/* ============================================================
   AQUANATURA . Planung & Gestaltung (Seite 50015)
   1:1 aus den vier HTML-Widgets der Seite uebernommen
   (Stand 29.07.2026). Kein Zeichen umgeschrieben.

   Vier Bloecke, vier Widgets, weil zwischen ihnen echte
   Elementor-Widgets stehen:
     aqua-rt   -> aqua_planung_uebergang  (Text im gepinnten Uebergang)
     aqe       -> aqua_planung_stile      (Gartenstile)
     aqwb      -> aqua_planung_werkbank   (Bildband der Gewerke)
     aqbx      -> aqua_planung_bau        (So entsteht Ihr Garten)
   ============================================================ */

/* ===== 1. aqua-rt: Text ueber dem gepinnten Uebergang ===== */
/* --p MUSS registriert sein: sonst rechnet Chrome var()-Nutzungen bei einer
   Aenderung am Vorfahren nicht neu (getestet: Wert erbt, opacity bleibt stehen). */
@property --p { syntax:'<number>'; inherits:true; initial-value:0 }
.aqua-reveal__pin{position:relative}

/* Der Beschreibungstext des Theme-Kopfes (tp-about-heading) sitzt ohne
   jeden Abstand direkt unter der Ueberschrift - gemessen 0px am 04.08.2026,
   als Ediths Planungstext dazukam. Das Theme bringt fuer dieses Feld keine
   Regel mit, weil es auf dieser Seite bisher leer war. */
.aqe .tp-about-heading-title + .tp-el-content,
.elementor-widget-tp-about-heading .tp-el-content{margin-top:26px;max-width:64ch;}

/* ---- Naht weich statt harte gruene Linie ---- */
.aqua-reveal__edge{display:none!important}
.aqua-reveal__stage{transform-origin:50% 50%;will-change:transform}
/* HIER STAND DER FEHLER (gefunden 04.08.2026, Marcel: "das Vorher-Bild wird
   nicht angezeigt"):
   Diese Datei hat die Maske des Nachher-Bildes ueberschrieben mit
     linear-gradient(90deg,#000 0,#000 calc(100% - 150px),transparent 100%)
   - ein Rest aus der Zeit, als der Wisch ueber ein Translate-Paar lief und
   diese Maske nur die rechte Kante der WANDERNDEN Ebene weich machte.
   Seit dem Umbau auf die wandernde Maske (aqua-reveal.css) muss der Verlauf
   die Ebene aber HALBIEREN: linke Haelfte deckend, rechte durchsichtig, bei
   doppelter Maskenbreite. Die alte Regel war fast durchgehend schwarz, also
   war das Nachher-Bild vom ersten Bild an sichtbar und die Skizze nie.
   aqua-planung.css laedt NACH aqua-reveal.css und hat bei gleicher
   Spezifitaet gewonnen. Die Regel ist deshalb ersatzlos entfallen - die
   Maske gehoert allein nach aqua-reveal.css.
   Auch die is-end-Ausnahme ist weg: bei Fortschritt 1 steht die Maske ohnehin
   auf 0% und damit auf ihrer deckenden Haelfte. */
/* Bild-Feather links raus (war die dauerhaft sichtbare Naht links) */
.aqua-reveal__layer--after img{-webkit-mask-image:none!important;mask-image:none!important}

.aqua-rt{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:6;
 font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
.aqua-rt__scrim{position:absolute;inset:0;pointer-events:none;background:radial-gradient(62% 54% at 50% 52%,rgba(8,12,8,.55) 0%,rgba(8,12,8,.34) 55%,rgba(8,12,8,0) 100%)}
.aqua-rt__inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:clamp(18px,2.2vw,30px);padding:0 24px}
.aqua-rt__eyebrow{display:flex;align-items:center;gap:12px;font-size:18px;
 font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.92);margin:0}
.aqua-rt__dot{width:10px;height:10px;border-radius:50%;background:#4CA139;flex:0 0 10px}
/* Alle Saetze liegen in derselben Rasterzelle, jeder in einer eigenen Maske und
   rollt hinter deren Kante. Nur transform, kein opacity (Chrome-Recalc-Falle). */
.aqua-rt__stack{display:grid;justify-items:center;width:100%;max-width:min(1000px,94%)}
.aqua-rt__mask{grid-area:1/1;overflow:hidden;padding-bottom:.14em}
.aqua-rt__line{margin:0;color:#fff;font-weight:800;
 font-size:clamp(34px,4.9vw,74px);line-height:1.08;letter-spacing:-.025em;
 text-shadow:0 2px 30px rgba(0,0,0,.45)}
.aqua-rt__line--2,.aqua-rt__line--3{transform:translateY(300%)}
@media(max-width:768px){.aqua-rt__stack{max-width:100%}.aqua-rt__line{font-size:clamp(29px,7.6vw,44px)}}
@media(prefers-reduced-motion:reduce){.aqua-rt__line{transform:none}}

/* ===== 2. aqe: Gartenstile ===== */
.aqe{--ink:#111013;--txt:#141414;--mut:#636368;--line:rgba(20,20,20,.14);width:100%;max-width:none;margin:0;padding:0;color:var(--txt);font-family:inherit;-webkit-font-smoothing:antialiased}
/* Der untere Abstand des Gartenstil-Blocks. Stand bis zur Aufteilung am
   31.07.2026 als padding-bottom an .aqe - mit einem Widget je Stil waere er
   zweimal dagewesen. Gilt jetzt nur noch am letzten. */
.aqe--schluss{padding-bottom:clamp(56px,6vw,100px)}
.aqe :where(*){box-sizing:border-box}
.aqe :where(p,h2,h3,dl,dd,dt,figure,ul,li){margin:0;padding:0}
.aqe__row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(44px,5vw,96px);align-items:center;padding:clamp(44px,5vw,80px) 0;border-top:1px solid var(--line)}
/* Die erste Reihe traegt keine Trennlinie und rueckt oben dicht an den
   Abschnittskopf. Das stand bis 31.07.2026 als :first-of-type hier. Nach der
   Aufteilung in ein Widget je Stil ist jede Reihe die erste ihrer eigenen
   <section class="aqe">, damit haetten ALLE die Ausnahme bekommen - die
   zweite haette ihre Trennlinie und 64px Abstand verloren (nachgemessen:
   0px/8px gegen 1px/72px). Deshalb jetzt eine ausdrueckliche Klasse, die das
   Widget nur bei der ersten Reihe setzt.

   Doppelt geschrieben, damit die Spezifitaet stimmt: :first-of-type zaehlte
   als Klasse PLUS Pseudoklasse und hat damit die Regel .aqe__row{padding:38px 0}
   aus der Media Query unter 880px geschlagen. Eine einfache Klasse haette
   dort verloren - am Handy standen dann 38px statt 8px oben, die Seite war
   30px laenger (nachgemessen bei 390px). */
.aqe__row.aqe__row--erste{border-top:0;padding-top:8px}
.aqe__row--flip .aqe__media{order:2}
.aqe__media{min-width:0}
.aqe__hero{position:relative;width:100%;aspect-ratio:3/2;overflow:hidden;background:#ecedeb}
.aqe .aqe__himg{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;display:block}
.aqe__sub{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.aqe__sfig{min-width:0}
.aqe__sframe{position:relative;width:100%;aspect-ratio:3/4;overflow:hidden;background:#ecedeb}
.aqe .aqe__simg{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;display:block}
.aqe__gcap{position:absolute;left:12px;right:12px;bottom:12px;padding:12px 16px;background:rgba(16,20,16,.34);border:1px solid rgba(255,255,255,.22);border-radius:14px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 12px 34px rgba(0,0,0,.20);color:#fff;font-size:16px;line-height:1.4;font-weight:500}
.aqe__text{min-width:0;max-width:540px}
.aqe .aqe__kicker{display:flex;align-items:center;gap:16px;font-size:18px;line-height:1;letter-spacing:.02em;text-transform:uppercase;color:var(--txt);font-weight:600}
.aqe .aqe__kicker::after{content:"";height:1px;width:46px;flex:0 0 46px;background:rgba(20,20,20,.30)}
.aqe .aqe__h{margin-top:24px;font-size:clamp(32px,3.5vw,50px);line-height:1.06;letter-spacing:-.03em;color:var(--ink);font-weight:700}
.aqe .aqe__p{margin-top:28px;font-size:19.5px;line-height:1.62;color:var(--txt);max-width:46ch;font-weight:400}
.aqe .aqe__spectitle{margin-top:56px;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);font-weight:600;padding-bottom:16px;border-bottom:1px solid var(--line)}
.aqe__spec{display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);gap:8px 28px;padding:24px 0;border-bottom:1px solid var(--line)}
.aqe .aqe__dt{font-size:16px;line-height:1.5;color:var(--mut)}
.aqe .aqe__dd{font-size:18.5px;line-height:1.5;color:var(--ink);font-weight:500}
@media(max-width:880px){
  .aqe__row{grid-template-columns:1fr;gap:32px;padding:38px 0}
  .aqe__row--flip .aqe__media{order:0}
  .aqe__hero{aspect-ratio:4/3}
  .aqe__text{max-width:none}
}
@media(max-width:560px){
  /* Ausstattungs-Tabelle am Handy untereinander statt nebeneinander.
     Zweispaltig bleiben fuer den Wert nur rund 165px - lange Angaben brachen
     dort auf sieben Zeilen um und sahen aus wie ein Fehler. Am Rechner
     aendert sich nichts. Dieselbe Korrektur steht in aqua-baustein.css;
     aqua-wasser.css braucht sie ebenfalls. */
  .aqe__spec{grid-template-columns:minmax(0,1fr);gap:5px 0;padding:20px 0}
  /* Die letzte Zeile der Liste ohne eigene Unterlinie: einspaltig gestapelt
     folgt darunter direkt die Trennlinie der naechsten Reihe, gemessen 38px
     darunter (bei Bau & Stein 35px) - zwei Striche mit nichts dazwischen.
     Nur hier unten, denn zweispaltig liegen rund 190px dazwischen und die
     Liste braucht ihren unteren Abschluss. */
  .aqe__spec:last-child{border-bottom:0}
  .aqe .aqe__dt{font-size:15px;letter-spacing:.02em}
  .aqe .aqe__dd{font-size:17px}
}

/* ===== 3. aqwb: Werkbank ===== */
/* ============================================================
   AQUANATURA . Bau & Anfertigung . Variante "Werkbank"
   Praefix: aqwb  (Aquanatura WerkBank)
   Alle Regeln sind auf .aqwb eingesperrt, damit weder Theme
   noch Elementor-Widgets ausserhalb beruehrt werden.
   ============================================================ */

/* Defensiver Radius-Reset: viele Themes setzen global Radien auf
   img/button. Scharfe Ecken sind hier Pflicht, die zwei erlaubten
   Ausnahmen (Pills, Glas) ueberschreiben weiter unten. */
.aqwb *{border-radius:0;}

.aqwb{
  /* Rule C: der Abschnittskopf steht direkt darueber, deshalb
     bewusst kein eigener Aussenabstand nach oben. */
  margin-top:0;
  padding-top:0;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color:#15130f;
  -webkit-font-smoothing:antialiased;
}
.aqwb *,
.aqwb *::before,
.aqwb *::after{box-sizing:border-box;}

/* ---------- Grundraster Desktop ----------------------------
   Lesespalte fix 420px, 40px Luecke, Bildband fuellt den Rest.
   Die Bedienleiste sitzt in Zeile 2 der linken Spalte, das Band
   spannt ueber beide Zeilen. Auf Tablet wird nur das Areas-
   Schema getauscht, das Markup bleibt gleich. */
.aqwb__layout{
  display:grid;
  grid-template-columns:420px minmax(0,1fr);
  grid-template-rows:auto auto;
  grid-template-areas:
    "read band"
    "controls band";
  column-gap:40px;
  align-items:start;
  padding-top:28px;
}
.aqwb__read{grid-area:read;min-height:372px;}
/* position:relative traegt den Hinweis-Pill. Der liegt bewusst
   NICHT im Fluss, sonst begaenne das Bild 42px tiefer als die
   Lesespalte und nach dem Ausblenden bliebe eine leere Zone. */
.aqwb__band{grid-area:band;min-width:0;position:relative;}
.aqwb__controls{grid-area:controls;}

/* ---------- Lesespalte -------------------------------------
   Bewusst ohne Karte, ohne Rahmen, ohne Glas: der Text steht
   direkt auf dem hellen Seitenhintergrund. */
.aqwb__count{
  font-size:14px;
  line-height:1.2;
  letter-spacing:.08em;
  color:#7b8079;
  font-variant-numeric:tabular-nums;
}
.aqwb__title{
  margin:10px 0 0;
  font-size:34px;
  line-height:1.1;
  font-weight:800;
  letter-spacing:-.01em;
  color:#15130f;
}
.aqwb__text{
  margin:16px 0 0;
  font-size:19px;
  line-height:1.6;
  color:#4a5049;
  max-width:34ch;
}
.aqwb__rule{
  height:1px;
  background:rgba(21,19,15,.12);
  margin:28px 0;
}
.aqwb__matlabel{
  font-size:14px;
  line-height:1.2;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#7b8079;
}
.aqwb__mat{
  margin:12px 0 0;
  font-size:17px;
  line-height:1.55;
  display:flex;
  flex-wrap:wrap;
  gap:6px 20px;
}
.aqwb__mati{display:inline-flex;align-items:baseline;gap:8px;}
/* Gruen erscheint ausschliesslich als 6px-Marker, nie als Flaeche. */
.aqwb__dot{
  flex:0 0 auto;
  width:6px;height:6px;
  background:#4CA139;
  transform:translateY(-1px);
}
.aqwb__matn{font-weight:500;color:#15130f;}
.aqwb__mato{font-weight:400;color:#4a5049;}

/* ---------- Bedienleiste: Pfeile + Fortschrittslineal ------- */
.aqwb__controls{
  display:flex;
  align-items:center;
  gap:20px;
  margin-top:28px;
}
.aqwb__navs{display:flex;gap:10px;}
.aqwb__nav{
  width:44px;height:44px;
  border-radius:999px;              /* erlaubte Ausnahme: Button */
  border:1px solid rgba(21,19,15,.20);
  background:transparent;
  color:#15130f;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
  transition:background-color 180ms ease, color 180ms ease, border-color 180ms ease, opacity 180ms ease;
}
.aqwb__nav svg{width:15px;height:15px;display:block;}
.aqwb__nav:hover{background:#161A14;border-color:#161A14;color:#ffffff;}
.aqwb__nav:focus-visible{outline:2px solid #4CA139;outline-offset:3px;}
.aqwb__nav[disabled]{opacity:.30;cursor:default;}
.aqwb__nav[disabled]:hover{background:transparent;border-color:rgba(21,19,15,.20);color:#15130f;}

.aqwb__ruler{display:flex;align-items:center;gap:6px;}
.aqwb__seg{
  width:28px;height:1px;
  background:rgba(21,19,15,.22);
  /* Der Segmentwechsel faellt mitten in die 520ms-Fahrt des Bandes.
     Deshalb hier NUR transform animieren, kein background-color:
     eine Paint-Animation parallel zur Bandbewegung ist tabu.
     Der Farbsprung ist bei 1px Hoehe nicht wahrnehmbar. */
  transition:transform 240ms cubic-bezier(.22,1,.36,1);
}
.aqwb__seg.is-on{background:#4CA139;transform:scaleY(2);}

/* ---------- Hinweis-Pill ------------------------------------
   Liegt absolut oben rechts ueber dem Band, also ueber dem
   ANGESCHNITTENEN Nachbarn, nie ueber der aktiven Karte, und
   ist nach der ersten Interaktion ohnehin verschwunden.
   Dadurch beginnt das Bild exakt wie die Lesespalte bei 28px. */
.aqwb__hintrow{
  position:absolute;
  top:12px;
  right:12px;
  z-index:4;
  display:flex;
  justify-content:flex-end;
  pointer-events:none;
}
/* Bewusst ohne Punkt-Marker davor: der Abschnittskopf darueber
   arbeitet mit gruenem Punkt, eine Wiederholung wuerde wie ein
   zweiter Eyebrow wirken. */
.aqwb__hint{
  display:inline-flex;
  align-items:center;
  font-size:14px;
  line-height:1;
  padding:8px 16px;
  color:#4a5049;
  background:#f5f4f0;               /* deckend, weil der Pill auf dem Bild liegt */
  border:1px solid rgba(21,19,15,.16);
  border-radius:999px;              /* erlaubte Ausnahme: Pill */
  transition:opacity 260ms ease;
}
/* Auf Zeigegeraeten ohne Maus (iPad, Handy quer) waere
   "Mit der Maus ziehen" schlicht falsch. */
.aqwb__hint--touch{display:none;}
@media (hover:none),(pointer:coarse){
  .aqwb__hint--mouse{display:none;}
  .aqwb__hint--touch{display:inline-flex;}
}
.aqwb__hintrow.is-gone .aqwb__hint{opacity:0;pointer-events:none;}

/* ---------- Bildband ---------------------------------------- */
.aqwb__viewport{
  overflow:hidden;                  /* an der Containerkante beschnitten */
}
.aqwb__track{
  display:flex;
  gap:24px;
  user-select:none;
  -webkit-user-select:none;
  cursor:grab;
  touch-action:pan-y;
  outline:none;
  /* Ruhezustand: KEIN will-change und KEIN translate3d. Beides
     wird nur waehrend der Bewegung gesetzt, sonst bleibt dauerhaft
     eine GPU-Ebene stehen und die Bilder werden bei dPR 1.25
     weichgezeichnet. Nach der Fahrt schreibt das Skript den
     Transform auf translateX zurueck. */
}
.aqwb__track.is-grabbing{cursor:grabbing;}
/* Kein Lupen-Zeiger auf den Bandbildern (Marcel, 04.08.2026): die globale
   Lightbox setzt ihn auf jedes anklickbare Bild, hier ist er falsch - man
   zieht das Band ja. Der Lupen-KNOPF in der Bildecke bleibt und ist der
   sichtbare Weg zur grossen Ansicht. */
.aqwb__track .aqwb__img.aqua-lb-on{cursor:inherit;}
.aqwb__track.is-grabbing .aqwb__img.aqua-lb-on{cursor:grabbing;}

/* Grosser Weiter-Pfeil am rechten Bildrand. Er sitzt ueber dem Streifen der
   Nachbarkarte und macht sichtbar, dass dort weitergeblaettert wird. */
.aqwb__weiter{
  position:absolute;
  top:50%;
  right:18px;
  transform:translateY(-50%);
  z-index:5;
  width:60px;
  height:60px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:50%;
  cursor:pointer;
  color:#15130f;
  background:rgba(255,255,255,.92);
  box-shadow:0 8px 26px -10px rgba(0,0,0,.45);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  transition:background .18s ease,transform .18s ease,box-shadow .18s ease;
}
.aqwb__weiter svg{width:20px;height:20px;display:block;}
.aqwb__weiter:hover{background:#161A14;color:#fff;transform:translateY(-50%) scale(1.06);}
@media (prefers-reduced-motion: reduce){.aqwb__weiter{transition:none;}}
/* Der Fokusring liegt aussen am Band, innen wuerde ihn das
   Beschneiden des Viewports auffressen. */
.aqwb__band:has(.aqwb__track:focus-visible){outline:2px solid #4CA139;outline-offset:4px;}

/* 04.08.2026, Marcel: "die Bilder viel groesser machen, sodass das naechste
   Bild weniger hervorscheint". Von 640x480 auf 860x645 (gleiches 4:3) - die
   aktive Karte fuellt das Band jetzt fast allein, vom Nachbarn bleibt nur
   noch ein schmaler Streifen als Hinweis, dass es weitergeht. */
.aqwb__card{
  flex:0 0 860px;
  width:860px;
  margin:0;
}
.aqwb__media{
  position:relative;
  width:860px;
  height:645px;                     /* 4:3 */
  overflow:hidden;
  background:#e9e8e2;
}
.aqwb .aqwb__img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  /* Kein transform, kein will-change im Ruhezustand. */
}
/* Schleier statt Filter: nur opacity wird animiert. */
.aqwb__veil{
  position:absolute;
  inset:0;
  background:#f5f4f0;
  opacity:.35;
  pointer-events:none;
  transition:opacity 260ms ease;
}
.aqwb__card.is-active .aqwb__veil{opacity:0;}

/* Glas-Panel nur auf den NACHBARkarten. Auf der aktiven Karte
   liegt nichts, das Bild bleibt frei. */
.aqwb__glass{
  position:absolute;
  left:20px;
  bottom:20px;
  max-width:calc(100% - 40px);
  padding:12px 18px;
  background:rgba(16,20,16,0.34);
  border:1px solid rgba(255,255,255,0.22);
  border-radius:14px;               /* erlaubte Ausnahme: Glas */
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  box-shadow:0 12px 34px rgba(0,0,0,0.20);
  transition:opacity 200ms ease;
  pointer-events:none;
}
.aqwb__glasstitle{
  display:block;
  font-size:22px;
  line-height:1.25;
  font-weight:600;
  color:#ffffff;
}
/* Glas liegt jetzt auf JEDER Karte, auch der aktiven (Kundenwunsch). */
.aqwb__card.is-clipped .aqwb__glass{opacity:1;}

/* Kartentext nur fuer Handy, oberhalb 768px ausgeblendet. */
.aqwb__mcopy{display:none;}

/* ---------- Herkunftsabsatz (Ersatz der Materialleiste) ----- */
.aqwb__origin{
  margin-top:48px;
  margin-bottom:72px;
  border-top:1px solid rgba(21,19,15,.12);
  padding-top:28px;
}
.aqwb__originText{
  margin:0;
  font-size:20px;
  line-height:1.65;
  color:#4a5049;
  max-width:68ch;
}
.aqwb__term{
  position:relative;
  font-weight:600;
  color:inherit;                    /* kein Farbwechsel, kein Unterstrich */
  text-decoration:none;
  cursor:pointer;
  /* Zweiwortige Begriffe duerfen nicht umbrechen: sonst sitzt das
     position:relative auf zwei Zeilenfragmenten und das Panel
     klappt mitten in den laufenden Text. */
  white-space:nowrap;
}
.aqwb__term:focus-visible{outline:2px solid #4CA139;outline-offset:2px;}
.aqwb__pop{
  position:absolute;
  top:100%;
  left:0;                           /* wird beim Oeffnen per JS gegen den Rand korrigiert */
  z-index:20;
  width:max-content;
  max-width:280px;
  margin-top:10px;
  padding:12px 14px;
  background:rgba(16,20,16,0.34);
  border:1px solid rgba(255,255,255,0.22);
  border-radius:14px;               /* erlaubte Ausnahme: Glas */
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  box-shadow:0 12px 34px rgba(0,0,0,0.20);
  opacity:0;
  transform:translateY(8px);
  pointer-events:none;
  transition:opacity 160ms ease, transform 160ms ease;
  white-space:normal;               /* der nowrap des Begriffs darf nicht erben */
}
.aqwb__popline{
  display:block;
  font-size:15px;
  line-height:1.45;
  font-weight:400;
  color:#ffffff;
}
.aqwb__term:hover .aqwb__pop,
.aqwb__term:focus-visible .aqwb__pop,
.aqwb__term.is-open .aqwb__pop{opacity:1;transform:translateY(0);}

/* ============================================================
   TABLET  768 - 1279px
   Lesespalte wandert ueber das Band und wird zweispaltig.
   ============================================================ */
@media (max-width:1279px) and (min-width:768px){
  .aqwb__layout{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto auto;
    grid-template-areas:"read" "band" "controls";
    row-gap:0;
    padding-top:24px;
  }
  .aqwb__read{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);
    column-gap:40px;
    align-items:start;
    margin-bottom:24px;
  }
  .aqwb__title{font-size:28px;margin-top:8px;}
  .aqwb__text{font-size:18px;margin-top:0;max-width:46ch;}
  .aqwb__rule{margin:20px 0;}
  .aqwb__controls{margin-top:24px;}
  .aqwb__card{flex:0 0 460px;width:460px;}
  .aqwb__media{width:460px;height:345px;}
  .aqwb__glass{left:16px;bottom:16px;padding:10px 14px;}
  .aqwb__originText{max-width:74ch;}
}

/* ============================================================
   HANDY  unter 768px
   Kein eigener Drag-Code: nativer Scroller mit Snap, das
   Momentum des Systems schlaegt jede Nachbildung.
   ============================================================ */
@media (max-width:767px){
  .aqwb__layout{
    display:block;
    padding-top:20px;
  }
  .aqwb__read,
  .aqwb__controls,
  .aqwb__hintrow{display:none;}

  .aqwb__viewport{
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }
  .aqwb__viewport::-webkit-scrollbar{display:none;}
  .aqwb__track{
    /* Die JS-Transformation wird auf Handy hart neutralisiert. */
    transform:none !important;
    cursor:auto;
    touch-action:auto;
    gap:12px;
    padding-right:20px;             /* Anschnitt der letzten Karte */
  }
  .aqwb__card{
    flex:0 0 82vw;
    width:82vw;
    scroll-snap-align:start;
  }
  .aqwb__media{
    width:100%;
    height:auto;
    aspect-ratio:4 / 3;
  }
  .aqwb__veil,
  .aqwb__glass{display:none;}       /* Glas der Nachbarn entfaellt */

  .aqwb__mcopy{display:block;margin:16px 0 0;}
  .aqwb__mtitle{
    margin:0;
    font-size:24px;
    line-height:1.15;
    font-weight:800;
    color:#15130f;
  }
  .aqwb__mtext{
    margin:10px 0 0;
    font-size:17px;
    line-height:1.55;
    color:#4a5049;
  }
  .aqwb__mmat{
    margin:14px 0 0;
    font-size:15px;
    line-height:1.5;
    display:flex;
    flex-wrap:wrap;
    gap:4px 16px;
  }
  .aqwb__origin{margin-top:36px;padding-top:24px;}
  .aqwb__originText{font-size:18px;max-width:none;}
  .aqwb__pop{max-width:min(280px, 78vw);}
}

/* ============================================================
   Bewegungsreduktion
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .aqwb__track,
  .aqwb__veil,
  .aqwb__glass,
  .aqwb__pop,
  .aqwb__seg,
  .aqwb__hint,
  .aqwb__nav,
  .aqwb__count,
  .aqwb__title,
  .aqwb__text,
  .aqwb__mat{
    transition-duration:1ms !important;
    transition-delay:0ms !important;
  }
}
/* Karte zwischen 576 und 767px auf die Rahmenbreite deckeln.
   82vw oben bezieht sich aufs FENSTER, der Rahmen .aqwb__viewport haengt aber am
   Elementor-Container, und der steht ab 576px fest auf 520px. Ab 635px Fensterbreite
   war die Karte breiter als ihr eigener Rahmen und wurde rechts abgeschnitten: bei
   700px um 54px, bei 767px um 109px - der Fliesstext brach mitten im Wort ab
   ("Eine Schwergewich|"). Wegen scroll-snap-type:x mandatory war der Rest
   unerreichbar, man kann nicht innerhalb einer Karte stehenbleiben.

   Bewusst erst ab 576px: unterhalb ist der Container so breit wie das Fenster, dort
   stimmte alles, und echte Telefone sollen sich nicht veraendern.
   92% des Inhaltskastens der Spur (520 minus 20px padding-right = 500) ergibt 460px -
   denselben Wert, den der Block ab 768px fest setzt. Damit ist der Uebergang am
   Breakpoint stufenlos und der Anschnitt der naechsten Karte bleibt sichtbar. */
@media (min-width:576px) and (max-width:767px){
  .aqwb__card{
    flex-basis:min(82vw, 92%);
    width:min(82vw, 92%);
  }
}

.aqwb__zoom{position:absolute;right:16px;bottom:16px;z-index:6;width:46px;height:46px;display:grid;place-items:center;padding:0;margin:0;cursor:pointer;pointer-events:auto;border:1px solid rgba(255,255,255,.24);border-radius:999px;background:rgba(16,20,16,.58);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 8px 24px rgba(0,0,0,.25);transition:background-color .18s}
@media(hover:hover){.aqwb__zoom{opacity:0;transition:opacity .18s,background-color .18s}.aqwb__card:hover .aqwb__zoom,.aqwb__zoom:focus-visible{opacity:1}.aqwb__zoom:hover{background:rgba(16,20,16,.72)}}

/* ===== 4. aqbx: So entsteht Ihr Garten ===== */
  .aqbx{--ink:#141414;--head:#111013;--muted:#636368;--line:rgba(20,20,20,.14);--green:#4CA139;
    width:100%;padding-top:clamp(44px,5vw,80px);padding-bottom:clamp(48px,6vw,88px);border-top:1px solid var(--line);color:var(--ink);font-family:inherit}
  .aqbx *,.aqbx *::before,.aqbx *::after{box-sizing:border-box}
  .aqbx :where(p,h2,h3,h4,ul,ol,li,a,span){margin:0;padding:0}
  .aqbx .aqbx__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,64px);align-items:end}
  .aqbx .aqbx__h3{margin:0;font-size:clamp(25px,2.5vw,36px);font-weight:700;letter-spacing:-.025em;line-height:1.1;color:var(--head)}
  .aqbx .aqbx__lead{margin:0;font-size:19px;line-height:1.6;color:var(--ink);max-width:52ch}
  .aqbx .aqbx__steps{list-style:none;margin:clamp(40px,4.5vw,68px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,2.4vw,44px)}
  .aqbx .aqbx__step{border-top:1px solid var(--line);padding-top:clamp(18px,1.6vw,26px)}
  .aqbx .aqbx__ic{display:block;width:38px;height:38px;color:#1c211c;margin:0 0 20px}.aqbx .aqbx__ic svg{width:100%;height:100%;display:block;stroke-width:1.7}
  .aqbx .aqbx__num{display:block;margin:0;font-size:clamp(22px,2.2vw,30px);font-weight:700;letter-spacing:-.03em;line-height:1;color:rgba(17,16,19,.3)}
  .aqbx .aqbx__step-title{margin:clamp(14px,1.4vw,18px) 0 0;font-size:clamp(19px,1.5vw,22px);font-weight:600;line-height:1.2;color:var(--head)}
  .aqbx .aqbx__p{margin:12px 0 0;font-size:18px;line-height:1.6;color:var(--ink)}
  .aqbx .aqbx__origin{margin-top:clamp(40px,4.5vw,60px);padding-top:clamp(26px,3vw,38px);border-top:1px solid var(--line)}
  .aqbx .aqbx__origin-label{margin:0;font-size:16px;font-weight:600;line-height:1.2;text-transform:uppercase;color:var(--muted)}
  .aqbx .aqbx__origin-list{list-style:none;margin:clamp(18px,1.8vw,26px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2vw,32px)}
  .aqbx .aqbx__origin-item{margin:0;display:flex;flex-direction:column;gap:4px}
  .aqbx .aqbx__origin-mat{margin:0;font-size:17px;font-weight:600;line-height:1.3;color:var(--head)}
  .aqbx .aqbx__origin-src{margin:0;font-size:16px;line-height:1.4;color:var(--muted)}
  .aqbx .aqbx__cta{margin-top:clamp(32px,4vw,48px)}
  .aqbx .aqbx__btn{display:inline-flex;align-items:center;justify-content:center;background:var(--green);color:#fff;font-size:18px;font-weight:600;line-height:1;padding:17px 32px;border-radius:999px;text-decoration:none;transition:background .18s ease}
  .aqbx .aqbx__btn:hover{background:#418c30}
  @media (max-width:860px){
    .aqbx .aqbx__head{grid-template-columns:1fr;gap:clamp(12px,4vw,20px);align-items:start}
    .aqbx .aqbx__steps{grid-template-columns:1fr;gap:0}
    .aqbx .aqbx__step{margin-top:clamp(22px,5vw,30px);padding-top:clamp(18px,4vw,24px)}
    .aqbx .aqbx__step:first-child{margin-top:0}
    .aqbx .aqbx__origin-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  }

/* ===================================================================
   Planungskonditionen (aqua_pg_konditionen, neu 03.08.2026)
   Quelle: Werbekatalog 2025, Seite 5. Drei Karten auf der Papierflaeche,
   gleiche Sprache wie Prozess-Kacheln und Material-Karten. Der Katalog
   setzt gruene Balken - hier nicht: gruene Flaechen sind Projektregel-
   widrig, Gruen kommt nur als Quadrat vor den Zeilen und im Betrag vor.
   =================================================================== */
.aqpk__wrap{width:100%;max-width:1510px;margin-inline:auto;padding-inline:clamp(20px,4vw,40px)}
.aqpk{--ink:#111013;--mut:#636368;--line:rgba(20,20,20,.14);--green:#4CA139;--paper:#f4f6f3;
  padding:0 0 clamp(56px,6vw,100px);color:#141414;-webkit-font-smoothing:antialiased}
.aqpk[id]{scroll-margin-top:120px}
.aqpk :where(p,ul,li){margin:0;padding:0}
.aqpk__label{display:flex;align-items:center;gap:12px;font-size:15px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mut);font-weight:600}
.aqpk__label::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--green);flex:0 0 10px}

/* Die Vorteils-Liste: zwei Spalten, gruene Quadrate, keine Linien. */
.aqpk__vorteile{margin-bottom:clamp(40px,4.4vw,68px)}
.aqpk__vliste{list-style:none;margin-top:clamp(18px,2vw,26px);display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:14px clamp(28px,3vw,56px)}
.aqpk__v{font-size:clamp(17px,1.3vw,19.5px);line-height:1.45;color:var(--ink);font-weight:500;
  padding-left:22px;position:relative}
.aqpk__v::before{content:"";position:absolute;left:0;top:.52em;width:8px;height:8px;background:var(--green)}

.aqpk__stufen{margin-top:clamp(18px,2vw,26px);display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,24px)}
.aqpk__stufe{background:var(--paper);padding:clamp(24px,2.4vw,36px) clamp(20px,2.2vw,32px);
  display:flex;flex-direction:column}
.aqpk .aqpk__snum{font-size:13px;letter-spacing:.14em;font-weight:700;color:var(--green);
  font-variant-numeric:tabular-nums}
.aqpk .aqpk__stitel{margin-top:10px;font-size:clamp(20px,1.6vw,24px);line-height:1.2;
  letter-spacing:-.02em;font-weight:650;color:var(--ink)}
.aqpk__sliste{list-style:none;margin-top:clamp(16px,1.6vw,22px)}
.aqpk .aqpk__sp{font-size:15.5px;line-height:1.5;color:var(--mut);padding:6px 0 6px 20px;position:relative}
.aqpk .aqpk__sp::before{content:"";position:absolute;left:0;top:calc(.52em + 6px);width:6px;height:6px;background:var(--green)}
/* Preis ans Kartenende, damit die drei Karten auf einer Linie enden. */
.aqpk__preise{margin-top:auto;padding-top:clamp(18px,1.8vw,26px)}
.aqpk__preis{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:7px 0}
.aqpk .aqpk__preistext{font-size:14.5px;line-height:1.4;color:var(--mut)}
.aqpk .aqpk__betrag{font-size:clamp(20px,1.6vw,24px);font-weight:700;letter-spacing:-.02em;
  color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.aqpk__fussnote{margin-top:clamp(16px,1.8vw,24px);font-size:14px;line-height:1.5;color:var(--mut)}

/* Eingang wie die uebrigen Abschnitte der Seite */
.aqpk[data-rv-wurzel].rv-on [data-rv]{opacity:0;transform:translate3d(0,24px,0)}
.aqpk[data-rv-wurzel].rv-on [data-rv].rv-in{opacity:1;transform:translate3d(0,0,0);
  transition:opacity .7s cubic-bezier(.23,1,.32,1),transform .8s cubic-bezier(.23,1,.32,1)}

@media(max-width:880px){
  .aqpk__stufen{grid-template-columns:1fr}
  .aqpk__vliste{grid-template-columns:1fr}
}

/* Kopf des Konditionen-Abschnitts (03.08. abends): grosse Ueberschrift wie
   die uebrigen Abschnittskoepfe der Seite, danach erst Liste und Karten. */
.aqpk__kopf{margin-bottom:clamp(28px,3vw,44px)}
.aqpk .aqpk__h{margin:18px 0 0;font-size:clamp(30px,3.2vw,46px);line-height:1.08;
  letter-spacing:-.028em;color:var(--ink,#111013);font-weight:700;max-width:22ch}
.aqpk__vorteile{margin-bottom:clamp(32px,3.4vw,52px)}