/* ---- Aquanatura Pflanzen & Pflege ----
 *
 * 1:1 uebernommen aus den drei HTML-Widgets der Seite Pflanzen & Pflege
 * (50018, Stand 29.07.2026). Beim Umbau auf die Elementor-Widgets
 * aqua_pflanzen_a, aqua_pflanzen_rasen und aqua_pflanzen_b wurde an den Regeln
 * NICHTS geaendert - die drei <style>-Bloecke stehen hier in genau der
 * Reihenfolge hintereinander, in der sie vorher im Seitenquelltext standen
 * (aqp, aqpc, aqp2). Damit bleibt die Kaskade dieselbe.
 *
 * ACHTUNG Namenskonflikt: Das Praefix .aqp benutzt auch die Seite Projekte
 * (assets/css/aqua-projekte.css) fuer etwas anderes - .aqp, .aqp__wrap,
 * .aqp__kicker, .aqp__h, .aqp__cta und .aqp.rv-on kollidieren dort.
 * Das geht nur gut, weil BEIDE Dateien ausschliesslich als Style-Abhaengigkeit
 * ihres eigenen Widgets geladen werden und die Widgets nie auf derselben Seite
 * stehen. Keine dieser Regeln darf global werden.
 */
/* ===================================================================
   Pflanzen & Pflege (50018), Teil A.
   Gleiche visuelle Sprache wie 50015/50016 (hell, scharfe Kanten,
   Eyebrow mit gruenem Punkt, Inter-Tight-Headline, duenne Linien),
   aber JEDER Abschnitt hat eine eigene Anordnung.
   Tokens 1:1 aus dem .aqe-Block uebernommen.
   =================================================================== */
.aqp__wrap{width:100%;max-width:1510px;margin-inline:auto;padding-inline:clamp(20px,4vw,40px)}

.aqp{--ink:#111013;--txt:#141414;--mut:#636368;--line:rgba(20,20,20,.14);--green:#4CA139;
  width:100%;max-width:none;margin:0;padding:0;color:var(--txt);
  font-family:inherit;-webkit-font-smoothing:antialiased}
.aqp :where(*){box-sizing:border-box}
.aqp :where(p,h2,h3,dl,dd,dt,figure,ul,li,a){margin:0;padding:0}

/* --- gemeinsame Bausteine ------------------------------------------ */
.aqp .aqp__kicker{display:flex;align-items:center;gap:12px;font-size:16px;line-height:1;
  letter-spacing:.02em;text-transform:uppercase;color:var(--mut);font-weight:600}
.aqp__kicker .aqp__kdot{width:10px;height:10px;border-radius:50%;background:var(--green);flex:0 0 10px}
.aqp .aqp__kicker::after{content:"";height:1px;width:46px;flex:0 0 46px;margin-left:4px;background:rgba(20,20,20,.30)}
.aqp .aqp__h{margin-top:24px;font-size:clamp(32px,3.5vw,50px);line-height:1.06;letter-spacing:-.03em;
  color:var(--ink);font-weight:700}
.aqp .aqp__p{font-size:19.5px;line-height:1.62;color:var(--txt);font-weight:400}
.aqp .aqp__p + .aqp__p{margin-top:20px}
.aqp .aqp__p b{color:var(--ink);font-weight:600}

.aqp__sec{padding:clamp(52px,6vw,96px) 0;border-top:1px solid var(--line)}
.aqp__sec[id]{scroll-margin-top:120px}

/* Abschnittskopf ZWEISPALTIG: Ueberschrift links, Einleitung rechts - wie im
   Schaugarten (.aqs__head) und damit wie im Rest des Projekts.
   ⚠️ Geaendert am 17.08.2026. Vorher lief die Einleitung als `columns:2` UNTER
   der Ueberschrift ueber die volle Breite. Das war fuer LANGE Texte gedacht,
   kippt aber bei kurzen: der Browser fuellt erst die linke Spalte, die rechte
   bleibt leer. Auf dieser Seite haben die beiden Einleitungen nur 292 bzw. 196
   Zeichen - es stand also immer die halbe Kopfbreite leer.
   Marcel: "das mit der ueberschrift und einleitung, ja das muss auf jeden fall
   zweispaltig sein." */
.aqp__head{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(24px,4vw,80px);
  align-items:end;
}
.aqp__head .aqp__h{margin-top:24px;max-width:20ch}
.aqp__lead{margin-top:0}
.aqp .aqp__lead .aqp__p{margin:0 0 20px;break-inside:avoid;max-width:none}
.aqp .aqp__lead .aqp__p:last-child{margin-bottom:0}

/* --- 1 Auftakt: fuenf Kacheln statt Intro-Satz mit Breitbild -------- */
.aqp__open{padding:clamp(44px,5vw,72px) 0 clamp(40px,4vw,64px)}
.aqp__openhead{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,4vw,64px);
  align-items:baseline;padding-bottom:clamp(28px,3vw,40px)}
.aqp .aqp__openlead{font-family:'Inter Tight',sans-serif;font-size:clamp(21px,1.9vw,27px);line-height:1.3;
  letter-spacing:-.02em;color:var(--ink);font-weight:600;max-width:34ch;justify-self:end;text-align:right}
/* Spaltenzahl kommt seit 04.08.2026 als --aqp-cols aus dem Widget: das
   Kachelband laeuft jetzt auch auf Wasser im Garten (3 Kacheln) und auf
   Bauliches (6). Fuenf fest verdrahtet liess dort Spalten leer. */
.aqp__tiles{display:grid;grid-template-columns:repeat(var(--aqp-cols,5),minmax(0,1fr));gap:clamp(10px,1.2vw,18px)}
.aqp__tile{display:block;text-decoration:none;color:inherit}
.aqp__tileframe{display:block;position:relative;width:100%;aspect-ratio:3/4;overflow:hidden;background:#ecedeb}
.aqp .aqp__tileimg{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.aqp__tile:hover .aqp__tileimg{transform:scale(1.05)}
.aqp__tilebar{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.aqp .aqp__tilelabel{font-size:16.5px;line-height:1.25;font-weight:600;color:var(--ink)}
.aqp .aqp__tilearrow{font-style:normal;font-size:15px;color:var(--mut);transition:transform .3s ease,color .3s ease}
.aqp__tile:hover .aqp__tilearrow{transform:translate(3px,-3px);color:var(--ink)}

/* --- 2 Pflanzungen: drei Karten ------------------------------------ */
.aqp__cards{margin-top:clamp(44px,5vw,76px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(24px,3vw,44px)}
.aqp__cardframe{position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;background:#ecedeb}
.aqp .aqp__cardimg{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;display:block}
.aqp .aqp__cardtitle{margin-top:26px;font-size:clamp(24px,2.1vw,30px);line-height:1.15;letter-spacing:-.02em;
  color:var(--ink);font-weight:600}
.aqp .aqp__cardtext{margin-top:12px;font-size:16.5px;line-height:1.6;color:var(--mut);max-width:34ch}

/* --- 3 Rasenanlage: Text, darunter der Vorher/Nachher-Regler -------- */
.aqp__note{margin-top:clamp(36px,4vw,56px);padding-top:20px;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:14px;font-size:16px;color:var(--mut)}
.aqp__note i{font-style:normal;color:var(--green);font-size:19px;line-height:1}

@media(max-width:1100px){
  .aqp__tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
}
@media(max-width:880px){
  /* Untereinander: Ueberschrift, dann Einleitung. */
  .aqp__head{grid-template-columns:1fr;gap:22px;align-items:start}
  .aqp__head .aqp__h{max-width:none}
  .aqp__openhead{grid-template-columns:1fr;gap:18px}
  .aqp .aqp__openlead{justify-self:start;text-align:left;max-width:none}
  .aqp__cards{grid-template-columns:1fr;gap:36px}
  .aqp__tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}

/* Die Beschriftung der Kacheln am Handy.
   Bei 390px ist eine Kachel gemessen 169px breit. "Innenraumbegruenung" braucht
   bei 16,5px rund 155px, dazu 10px Abstand und 14px fuer den Pfeil - macht
   179px. Der Pfeil stand deshalb 8px ausserhalb des Bildes (gemessen am
   30.07.2026 bei 390px; im Screenshot war er halb abgeschnitten).
   Das zweispaltige Raster bleibt, geaendert wird nur die Zeile darunter:
   - Der Pfeil darf nicht mehr schrumpfen und nicht mehr weichen.
   - Die Beschriftung darf umbrechen. Trennung nach Silben zuerst, und wenn ein
     Wort selbst dafuer zu lang ist, bricht es hart um statt herauszuragen.
   - align-items:flex-start, damit der Pfeil bei zwei Zeilen oben bleibt und
     nicht in die Mitte rutscht. */
@media(max-width:560px){
  .aqp__tilebar{align-items:flex-start;gap:8px}
  .aqp .aqp__tilelabel{font-size:15px;min-width:0;hyphens:auto;overflow-wrap:break-word}
  .aqp .aqp__tilearrow{flex:0 0 auto;line-height:1.25}
}

/* --- Eingangsanimation: Fade-in mit Stagger ------------------------ */
.aqp.rv-on [data-rv]{opacity:0;transform:translateY(24px)}
.aqp.rv-on [data-rv].rv-in{opacity:1;transform:none;
  transition:opacity .75s ease,transform .75s cubic-bezier(.22,.61,.36,1)}
@media(prefers-reduced-motion:reduce){.aqp.rv-on [data-rv]{opacity:1;transform:none;transition:none}}

/* Kopf und Begleitbild zur vertikalen Schrittliste (aqua_process).
   Rechte Spalte des Rasenpflege-Blocks, Muster von 50015. */
.aqpc{--ink:#111013;--txt:#141414;--mut:#636368;--line:rgba(20,20,20,.14);--green:#4CA139;
  width:100%;color:var(--txt);font-family:inherit;-webkit-font-smoothing:antialiased}
.aqpc :where(*){box-sizing:border-box}
.aqpc :where(p,h2,figure){margin:0;padding:0}
.aqpc .aqpc__kicker{display:flex;align-items:center;gap:12px;font-size:16px;line-height:1;
  letter-spacing:.02em;text-transform:uppercase;color:var(--mut);font-weight:600}
.aqpc__kicker .aqpc__kdot{width:10px;height:10px;border-radius:50%;background:var(--green);flex:0 0 10px}
.aqpc .aqpc__kicker::after{content:"";height:1px;width:46px;flex:0 0 46px;margin-left:4px;background:rgba(20,20,20,.30)}
.aqpc .aqpc__h{margin-top:24px;font-size:clamp(32px,3.5vw,50px);line-height:1.06;letter-spacing:-.03em;
  color:var(--ink);font-weight:700;max-width:14ch}
.aqpc .aqpc__p{margin-top:26px;font-size:19.5px;line-height:1.62;color:var(--txt);max-width:46ch}
/* !important ist hier Pflicht, nicht nur Vorsicht: Elementors eigene
   Basis-CSS setzt "figure" innerhalb jedes Widgets mit
   .elementor .elementor-widget:not(...):not(...) figure zurueck - zwei
   :not()-Klauseln zaehlen als zwei Klassen, die Regel kommt damit auf
   Spezifitaet (0,4,1) und schlaegt jede normale Klassenregel wie
   .aqpc .aqpc__img (0,2,0) unabhaengig von der Reihenfolge im Stylesheet.
   Gemessen: der Abstand blieb bei 0px, obwohl clamp(32px,3.5vw,48px) korrekt
   im DOM stand (Marcel: "beim Text fehlt der Abstand unten zum Bild"). */
.aqpc .aqpc__img{margin-top:clamp(32px,3.5vw,48px) !important;position:relative;width:100%;aspect-ratio:4/3;
  overflow:hidden;background:#ecedeb}
.aqpc .aqpc__imgi{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;display:block}

.aqpc.rv-on [data-rv]{opacity:0;transform:translateY(24px)}
.aqpc.rv-on [data-rv].rv-in{opacity:1;transform:none;
  transition:opacity .75s ease,transform .75s cubic-bezier(.22,.61,.36,1)}
@media(prefers-reduced-motion:reduce){.aqpc.rv-on [data-rv]{opacity:1;transform:none;transition:none}}

/* ===================================================================
   Pflanzen & Pflege (50018), Teil B.
   Abschnittskopf ueberall gleich: Eyebrow, Headline, darunter der
   Fliesstext ueber die VOLLE Breite in zwei Spalten. Die Anordnung
   DARUNTER variiert je Abschnitt.
   =================================================================== */
.aqp2__wrap{width:100%;max-width:1510px;margin-inline:auto;padding-inline:clamp(20px,4vw,40px)}

.aqp2{--ink:#111013;--txt:#141414;--mut:#636368;--line:rgba(20,20,20,.14);--green:#4CA139;
  width:100%;max-width:none;margin:0;padding:0;color:var(--txt);
  font-family:inherit;-webkit-font-smoothing:antialiased}
/* Der untere Abstand der Seite. Stand bis zur Aufteilung am 31.07.2026 als
   padding-bottom an .aqp2 - mit fuenf Abschnitts-Widgets waere er fuenfmal
   dagewesen. Gilt jetzt nur noch am letzten Abschnitt. */
.aqp2--schluss{padding-bottom:clamp(24px,3vw,48px)}
.aqp2 :where(*){box-sizing:border-box}
.aqp2 :where(p,h2,h3,dl,dd,dt,figure,ul,li,a){margin:0;padding:0}

.aqp2 .aqp__kicker{display:flex;align-items:center;gap:12px;font-size:16px;line-height:1;
  letter-spacing:.02em;text-transform:uppercase;color:var(--mut);font-weight:600}
.aqp2 .aqp__kdot{width:10px;height:10px;border-radius:50%;background:var(--green);flex:0 0 10px}
.aqp2 .aqp__kicker::after{content:"";height:1px;width:46px;flex:0 0 46px;margin-left:4px;background:rgba(20,20,20,.30)}
.aqp2 .aqp__h{margin-top:24px;font-size:clamp(32px,3.5vw,50px);line-height:1.06;letter-spacing:-.03em;
  color:var(--ink);font-weight:700}
.aqp2 .aqp__p{font-size:19.5px;line-height:1.62;color:var(--txt);font-weight:400}
.aqp2 .aqp__p b{color:var(--ink);font-weight:600}

.aqp2__sec{padding:clamp(52px,6vw,96px) 0;border-top:1px solid var(--line)}
.aqp2__sec[id]{scroll-margin-top:120px}

/* Abschnittskopf ZWEISPALTIG - dieselbe Aenderung wie oben bei .aqp__head,
   damit beide Teile der Seite gleich aussehen. Begruendung dort. */
.aqp2__head{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(24px,4vw,80px);
  align-items:end;
}
.aqp2__head .aqp__h{max-width:20ch}
.aqp2 .aqp2__lead{margin-top:0}
.aqp2 .aqp2__lead .aqp__p{margin:0 0 20px;break-inside:avoid;max-width:none}
.aqp2 .aqp2__lead .aqp__p:last-child{margin-bottom:0}

/* --- 4 Vertikalbegruenung: Text links, Hochformat rechts ------------ */
.aqp2 .aqp2__split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(44px,5vw,96px);align-items:center}
.aqp2 .aqp2__splittext .aqp__h{max-width:16ch}
.aqp2 .aqp2__splittext .aqp__p{margin-top:26px;max-width:52ch}
.aqp2__portrait{position:relative;width:100%;aspect-ratio:3/4;overflow:hidden;background:#ecedeb}
.aqp2 .aqp2__portraitimg{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;display:block}
/* Mit Zusatzbildern (Vertikalbegruenung seit 03.08.2026): oben ein breites
   Bild, darunter ein Paar - dieselbe Anordnung wie in den Abschnitten der
   Projektseiten (.aqpd__hero + .aqpd__sub), damit kein zweites System
   entsteht. Ohne Zusatzbilder bleibt das einzelne Hochformat unveraendert. */
.aqp2__bilder{min-width:0}
.aqp2__portrait--breit{aspect-ratio:4/3}
.aqp2__sub{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.aqp2__subfig{position:relative;width:100%;aspect-ratio:3/4;overflow:hidden;background:#ecedeb;margin:0}

/* --- 5 Innenraumbegruenung: Breitbild ueber Dreispalter ------------- */
.aqp2 .aqp2__wide{margin-top:clamp(64px,6vw,104px);position:relative;width:100%;aspect-ratio:21/9;
  overflow:hidden;background:#ecedeb}
.aqp2 .aqp2__wideimg{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;display:block}
.aqp2 .aqp2__cols3{margin-top:clamp(44px,4.5vw,72px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(28px,3vw,56px)}
.aqp2__col{padding-top:24px;border-top:2px solid var(--ink)}
.aqp2 .aqp2__colt{font-size:21px;line-height:1.2;font-weight:600;color:var(--ink)}
.aqp2 .aqp2__colp{margin-top:12px;font-size:16.5px;line-height:1.6;color:var(--mut)}

/* --- 6 Gartenpflege: Bild links, Grosstitel-Liste rechts ------------ */
.aqp2 .aqp2__pflege{margin-top:clamp(48px,5vw,80px);display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(40px,5vw,88px);align-items:start}
.aqp2__pfimg{position:relative;width:100%;aspect-ratio:3/4;overflow:hidden;background:#ecedeb}
.aqp2 .aqp2__pfimgi{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;display:block}
.aqp2__big{border-top:1px solid var(--line)}
/* 18.08.2026 NEU GESETZT. Marcel: "warum machst du da keine Abstaende bei
   den Titeln gescheit, sowas geht nicht."
   Gemessen war: Titel 36 px, Text 16,5 px, dazwischen 8 px, zur naechsten
   Gruppe 53 px. Zwei Fehler auf einmal:
   1. 36 px ist die Groesse einer ABSCHNITTS-Ueberschrift. Fuenf Listenpunkte
      in dieser Groesse konkurrieren mit der H2 darueber (50 px) - beim
      Zusammenkneifen der Augen sieht man fuenf gleich laute Woerter statt
      einer Ueberschrift mit fuenf Punkten darunter.
   2. 8 px unter einem 36-px-Titel sind optisch null. Der Titel klebte am
      Text, und der Unterschied zu den 53 px zwischen den Gruppen war zu
      klein, um die Gruppen zu trennen.
   Jetzt: Titel 23 px (der Hausstandard fuer Kartentitel, siehe .aqt__ct und
   .aqm__steinname), innen 10 px, aussen 24+22 px plus Linie. Verhaeltnis
   innen zu aussen rund 1:4,6 statt 1:6,6 bei viel zu lauten Titeln. */
.aqp2__bigrow{padding:22px 0 24px;border-bottom:1px solid var(--line)}
/* Die letzte Zeile ohne eigene Unterlinie: direkt darunter beginnt der
   naechste Abschnitt mit seiner border-top. Gemessen 31.07.2026 bei 390px:
   zwei Striche im Abstand von 49px (Pflegeliste) bzw. 52px (Fragen) mit
   nichts dazwischen. Dieselbe Stelle wie auf Dein Garten. */
.aqp2__bigrow:last-child{border-bottom:0}
.aqp2 .aqp2__bigt{font-family:'Inter Tight',sans-serif;font-size:clamp(20px,1.55vw,23px);line-height:1.25;
  letter-spacing:-.01em;color:var(--ink);font-weight:600}
.aqp2 .aqp2__bigd{margin-top:10px;font-size:17px;line-height:1.6;color:var(--txt);max-width:56ch}

/* --- 7 FAQ ---------------------------------------------------------- */
.aqp2__faqgrid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,5vw,96px);align-items:start}
.aqp2__q{border-bottom:1px solid var(--line)}
.aqp2__q:first-child{border-top:1px solid var(--line)}
.aqp2__q:last-child{border-bottom:0}
.aqp2__qbtn{width:100%;background:none;border:0;cursor:pointer;text-align:left;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:24px 0;font-family:'Inter',sans-serif;font-size:19px;font-weight:600;color:var(--ink)}
.aqp2__qbtn::after{content:"+";font-size:24px;font-weight:400;color:var(--green);flex:0 0 auto}
.aqp2__q.open .aqp2__qbtn::after{content:"\2013"}
/* Aufklapper: Raster statt max-height (29.07.2026).
   minmax(0,0fr) -> minmax(0,1fr) laesst den Browser die Zielhoehe selbst
   ausrechnen. Vorher stand hier max-height:0 und assets/js/aqua-aufklappen.js
   musste die Zielhoehe in Pixeln messen - bei jedem Schriftwechsel, jedem
   resize und ueber einen ResizeObserver erneut. Endzustand identisch, nur
   ohne Messerei.
   Das ausdrueckliche Minimum 0 ist Pflicht: das kurze '0fr' heisst
   minmax(auto, 0fr), und dieses auto laesst das padding-bottom:24px des
   Antwort-Absatzes stehen - geschlossen waere der Deckel dann 24px hoch
   statt 0 (nachgemessen). */
.aqp2__a{display:grid;grid-template-rows:minmax(0,0fr);overflow:hidden;transition:grid-template-rows .28s ease}
.aqp2__a > *{min-height:0;overflow:hidden}
@media (prefers-reduced-motion: reduce){.aqp2__a{transition:none}}
.aqp2__a p{padding:0 0 24px;font-size:16.5px;line-height:1.6;color:var(--txt);max-width:64ch}

/* --- 8 Abschluss-CTA ------------------------------------------------ */
.aqp2__cta{border-top:1px solid var(--line);padding:clamp(64px,7vw,110px) 0;text-align:center}
.aqp2__cta .aqp__kicker{justify-content:center}
.aqp2 .aqp2__cta .aqp__h{margin-inline:auto;max-width:18ch}
.aqp2 .aqp2__ctalead{margin:24px auto 0;max-width:62ch;font-size:19px;line-height:1.62;color:var(--txt)}
.aqp2__ctabtns{margin-top:36px;display:flex;justify-content:center}
/* Website-Button: das Theme faerbt ihn nur unter .aqua-tp-header gruen,
   dieser Vorfahre fehlt im Content, deshalb hier scoped nachgebaut. */
.aqp2 .tp-btn-black.btn-green-light-bg .tp-btn-black-text,
.aqp2 .tp-btn-black.btn-green-light-bg .tp-btn-black-circle{background-color:#4CA139}
.aqp2 .tp-btn-black.btn-green-light-bg .tp-btn-black-text{color:#fff}
.aqp2 .tp-btn-black.btn-green-light-bg .tp-btn-black-circle svg{color:#fff}

@media(max-width:980px){
  /* Untereinander: Ueberschrift, dann Einleitung. */
  .aqp2__head{grid-template-columns:1fr;gap:22px;align-items:start}
  .aqp2__head .aqp__h{max-width:none}
  .aqp2 .aqp2__split{grid-template-columns:1fr;gap:32px}
  .aqp2 .aqp2__splittext .aqp__h{max-width:none}
  .aqp2 .aqp2__cols3{grid-template-columns:1fr;gap:28px}
  .aqp2 .aqp2__pflege{grid-template-columns:1fr;gap:32px}
  .aqp2 .aqp2__faqgrid{grid-template-columns:1fr;gap:24px}
  .aqp2 .aqp2__wide{aspect-ratio:16/9}
  .aqp2 .aqp2__pfimg{aspect-ratio:4/3}
}

/* --- Eingangsanimation --------------------------------------------- */
.aqp2.rv-on [data-rv]{opacity:0;transform:translateY(24px)}
.aqp2.rv-on [data-rv].rv-in{opacity:1;transform:none;
  transition:opacity .75s ease,transform .75s cubic-bezier(.22,.61,.36,1)}
@media(prefers-reduced-motion:reduce){.aqp2.rv-on [data-rv]{opacity:1;transform:none;transition:none}}

/* ---- Video im Rasenanlage-Abschnitt (11.08.2026) --------------------------
   Hochkant-Reel vom Verlegen des Fertigrasens. Bewusst schmal und mittig
   statt ueber die volle Breite: 9:16 ueber 1440 px waere zwei Bildschirme
   hoch. Gleiche Bedienung wie beim Bewaesserungs-Video (Knopf oeffnet den
   Player), deshalb dieselben Groessen und Farben. */
/* Spezifitaet ueber .aqp__sec: eine spaetere figure-Regel (Theme) setzt
   margin sonst auf 0 zurueck, und das Video klebt linksbuendig - gemessen
   am 11.08.2026 (Video begann bei x=40 statt mittig). */
.aqp__sec .aqp__videofig{
  /* Einzeln statt Kurzschrift: "margin:clamp(...) auto 0" wird vom
     Browser komplett VERWORFEN (gemessen 11.08.2026: computed margin
     blieb 0px, obwohl die Regel als einzige griff). Mit getrennten
     Eigenschaften zentriert es. */
  /* !important ist hier noetig, nicht Bequemlichkeit: auf dieses figure
     zielen VIER Resets - bootstrap (figure), agntix-core (*),
     Elementors custom-frontend (.elementor-widget) und weiter oben in
     dieser Datei .aqp :where(...figure...). Ohne !important bleibt das
     Video linksbuendig kleben (gemessen 11.08.2026). */
  position:relative;margin-top:clamp(28px,3vw,44px)!important;
  margin-inline:auto!important;margin-bottom:0!important;padding:0;
  width:min(360px,72vw);aspect-ratio:9/16;overflow:hidden;
  border-radius:var(--radius,0);background:#1b1b1b;
}
.aqp__vid{width:100%;height:100%;object-fit:cover;display:block}
.aqp__play{
  position:absolute;inset:0;margin:auto;width:64px;height:64px;
  border:1px solid rgba(255,255,255,.55);border-radius:50%;
  background:rgba(20,22,28,.32);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:transform .3s cubic-bezier(.2,.6,.2,1),background .3s;
}
.aqp__play:hover{transform:scale(1.09);background:rgba(20,22,28,.46)}
.aqp__playicon{font-size:20px;line-height:1;margin-left:3px}
.aqp__videocap{
  position:absolute;left:12px;bottom:12px;margin:0;padding:8px 14px;
  border-radius:999px;background:rgba(20,22,28,.55);color:#fff;
  font-size:15px;line-height:1.2;backdrop-filter:blur(6px);
}
@media (max-width:600px){ .aqp__videofig{width:min(300px,82vw)} }


/* Rasenpflege-Bildband (11.08.2026). Feste Bandhoehe, unterschiedliche
   Breiten - dieselbe Machart wie das Band im Wintergarten-Abschnitt, damit
   die Seite EIN System bleibt. Die aspect-ratio der Einzelkachel wird
   aufgehoben: im Band bestimmt die Bandhoehe, sonst rechnet der Browser aus
   der Hoehe die Breite und die Kachel laeuft aus ihrer Spalte. */
.aqpc__band{display:grid;gap:clamp(12px,1.4vw,22px);
  margin-top:clamp(32px,3.5vw,48px)}
/* ACHTUNG: .aqpc ist die RECHTE SPALTE neben der Schrittliste (aqua_process),
   nicht die volle Seitenbreite. Drei Bilder nebeneinander waeren dort nur
   rund 170 px breit. Deshalb gestapelt: eines breit oben, zwei darunter. */
/* Die Bandhoehe ist NICHT frei waehlbar. Links steht die Schrittliste
   (aqua_process), rechts dieser Abschnitt - beide beginnen auf gleicher Hoehe.
   Am 11.08.2026 gemessen bei 1440 px: linke Spalte 558 px, Text ueber dem
   Band 370 px. Fuer das Band bleiben also rund 188 px. Ein gestapeltes Band
   (ein breites oben, zwei darunter) war 621 px hoch und hat links eine
   leere Flaeche von 409 px hinterlassen.
   Deshalb eine Reihe aus gleich grossen Quadraten: (608-40)/3 = 189 px
   breit und ebenso hoch - die Spalten enden damit buendig. */
.aqpc__band--n1{grid-template-columns:1fr}
.aqpc__band--n2{grid-template-columns:1fr 1fr}
.aqpc__band--n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.aqpc__band--n2 .aqpc__img,
.aqpc__band--n3 .aqpc__img{margin-top:0 !important;height:auto}
.aqpc__band--n2 .aqpc__img{aspect-ratio:4/3}
.aqpc__band--n3 .aqpc__img{aspect-ratio:1/1}

@media(max-width:880px){
  /* Am Handy stehen die Spalten untereinander, die Hoehenbindung entfaellt -
     dort darf das erste Bild wieder gross sein. */
  .aqpc__band--n3{grid-template-columns:1fr 1fr}
  .aqpc__band--n3 .aqpc__img{aspect-ratio:4/3}
  .aqpc__band--n3 .aqpc__img:first-child{grid-column:1/-1;aspect-ratio:16/9}
}


/* Innenraumbegruenung: versetztes Bildband (11.08.2026).
   Drei Formate nebeneinander - hoch, quer, quer - und jedes eine Stufe
   tiefer als das vorige. Der Versatz macht aus drei Kaesten eine Collage.
   align-items:start ist Pflicht: mit stretch wuerden alle drei auf die
   Zeilenhoehe gezogen, und dann rechnet aspect-ratio die Breite aus der
   Hoehe - genau der Fehler, der im Pflanzen-Abschnitt die Texte
   ueberdeckt hat. */
.aqp2__staffel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.6vw,26px);align-items:start;
  margin-top:clamp(30px,3.4vw,52px);margin-bottom:clamp(30px,3.4vw,52px)}
.aqp2__staffel .aqp2__sfig{position:relative;margin:0 !important;padding:0 !important;
  overflow:hidden;background:#ecedeb;border-radius:0 !important}
.aqp2__staffel .aqp2__sfig img{position:absolute;inset:0;width:100%;height:100%;
  max-width:none;object-fit:cover;display:block}
/* Der Versatz braucht !important: die Regel .aqp2__staffel .aqp2__sfig
   oben setzt margin:0 !important gegen den figure-Reset des Themes und
   haette den Treppenversatz sonst selbst wieder plattgemacht (am
   11.08.2026 genau so passiert - alle drei standen auf einer Linie). */
.aqp2__sfig--1{aspect-ratio:3/4}
.aqp2__sfig--2{aspect-ratio:4/3}
.aqp2__sfig--3{aspect-ratio:4/3}
/* Der Versatz muss dieselbe Spezifitaet haben wie die Regel darueber.
   Nur !important reicht NICHT: .aqp2__staffel .aqp2__sfig{margin:0 !important}
   hat zwei Klassen, .aqp2__sfig--2 nur eine - bei gleichem !important
   entscheidet die Spezifitaet, und die Null gewinnt. Am 11.08.2026 zweimal
   hineingelaufen: erst ohne !important, dann mit, beides wirkungslos. */
/* Marcel, 11.08.2026: der Treppenversatz wirkte schief statt gestaltet.
   Jetzt eine ruhige Reihe - die Abwechslung kommt aus den Formaten
   (ein Hochformat, zwei Querformate), nicht aus dem Versatz. */
.aqp2__staffel .aqp2__sfig--2,
.aqp2__staffel .aqp2__sfig--3{margin-top:0 !important;align-self:stretch}
.aqp2__staffel{align-items:stretch}
.aqp2__sfig--2,.aqp2__sfig--3{aspect-ratio:auto;min-height:0}

@media(max-width:880px){
  .aqp2__staffel{grid-template-columns:1fr 1fr}
  .aqp2__sfig--1{grid-column:1/-1;aspect-ratio:16/10}
  .aqp2__staffel .aqp2__sfig--2,
  .aqp2__staffel .aqp2__sfig--3{margin-top:0 !important;aspect-ratio:4/3}
}


/* Innenraumbegruenung ab 11.08.2026: Text und breites Bild NEBENEINANDER.
   Vorher lag das breite Bild wie ein Riegel quer unter dem Text.
   Der Textteil davor steht per order:-1 links, das Bild rechts. */
.aqp2__kopf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(24px,3vw,54px);align-items:center}
/* ⚠️ Hier bleibt der Kopf EINSPALTIG.
   Der Textteil kommt aus der kopf()-Hilfsmethode, die seit 17.08.2026
   zweispaltig setzt (Ueberschrift links, Einleitung rechts). Hier steht er
   aber schon in halber Breite neben dem Bild - zwei Spalten darin waeren rund
   200 px breit und damit unlesbar. Also zuruecksetzen. */
.aqp2__kopftext .aqp2__head{grid-template-columns:1fr;gap:18px;align-items:start}
.aqp2__kopftext .aqp2__lead,
.aqp2__kopftext [class*="__lead"]{columns:1 !important}
.aqp2__kopf .aqp2__wide{margin:0 !important;position:relative;
  aspect-ratio:4/3;overflow:hidden;background:#ecedeb}
.aqp2__kopf .aqp2__wideimg{position:absolute;inset:0;width:100%;height:100%;
  max-width:none;object-fit:cover;display:block}
@media(max-width:900px){
  .aqp2__kopf{grid-template-columns:1fr}
  .aqp2__kopf .aqp2__wide{aspect-ratio:16/10}
}


/* Rasenpflege-Kopf ab 11.08.2026 als eigener Abschnitt ueber die volle
   Breite. Vorher steckte er in einer Rasterspalte, die ihm den seitlichen
   Abstand gab - allein stehend lief der Text bis an den Fensterrand. */
.aqpc{max-width:1320px;margin-left:auto;margin-right:auto;
  padding-left:clamp(20px,3vw,40px);padding-right:clamp(20px,3vw,40px)}


/* ---- Vertikalbegruenung im Raster der Rasenanlage, 20.08.2026 ----
   Marcel: "koenntest du den vertikalbegruenung abschnitt das layout komplett
   aendern und das von dem rasenanlage uebernehmen".

   Das Grundraster (.aqbw) kommt aus aqua-wasser.css. Hier stehen nur die
   Kacheln der zweiten Reihe. auto-fit statt fester Spannweiten, weil das
   Widget zwei Bildplaetze hat und auch mit EINEM Bild sauber aussehen muss -
   feste Breiten liessen sonst eine Luecke stehen. Dieselbe Loesung wie beim
   Schwimmteich (.aqbw--teich). */
.aqbw--vert .aqbw__kacheln{grid-column:1 / -1;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(0,1fr));
  gap:clamp(14px,1.6vw,22px)}
.aqbw--vert .aqbw__kacheln .aqbw__fig{aspect-ratio:4/3}
@media(max-width:560px){
  .aqbw--vert .aqbw__kacheln{grid-template-columns:1fr}
}
/* Der Kicker der Pflanzenseite bringt keinen eigenen Abstand nach unten mit;
   im .aqbw-Textblock uebernimmt das die Ueberschrift. */
.aqbw--vert .aqp__kicker{margin:0}