/* ---- Aquanatura Bau & Stein ----
 *
 * 1:1 uebernommen aus dem <style>-Block der HTML-Fassung der Seite
 * Bau & Stein (50017, Stand 29.07.2026). Beim Umbau auf das
 * Elementor-Widget aqua_baustein wurde an den Regeln NICHTS geaendert -
 * kein Selektor, kein Wert, keine Reihenfolge.
 *
 * Die Seite mischt zwei Praefixe: .aqe (Grundraster, wortgleich mit
 * aqua-wasser.css bis auf die eine Zeile aqb__wide[id],.aqb__detail[id])
 * und .aqb (die Abschnitts-Varianten dieser Seite). aqua-wasser.css wird
 * hier NICHT geladen - sie haengt am Widget aqua_wasser, das auf dieser
 * Seite nicht vorkommt. Deshalb steht der .aqe-Block auch hier komplett.
 * Beide Dateien widersprechen sich nicht: der gemeinsame Teil ist Zeichen
 * fuer Zeichen derselbe.
 */
.aqe__wrap{width:100%;max-width:1510px;margin-inline:auto;padding-inline:clamp(20px,4vw,40px)}

/* ===================================================================
   AB HIER: der echte .aqe-Block 1:1 von Seite 50015 (Bridge-Abfrage
   post_id 50015, path 5.elements.0, Widget-ID bbe883d, unverändert
   kopiert). Es wurde NICHTS an Selektoren oder Werten erfunden.
   Ergänzt wurde nur --green und der Muster-Kopf (Punkt+Eyebrow+H2),
   weil dieser auf der echten Seite ein eigenes Widget ist
   (tp-about-heading + tp-heading-title), das hier als reines HTML
   nachgebaut werden muss.
   =================================================================== */
/* Der untere Innenabstand steht seit der Aufteilung in .aqe--schluss und gilt
   nur am letzten Abschnitt. Stuende er hier, haette die Seite ihn zwoelfmal. */
.aqe{--ink:#111013;--txt:#141414;--mut:#636368;--line:rgba(20,20,20,.14);--green:#4CA139;--paper:#f4f6f3;
  width:100%;max-width:none;margin:0;padding:0;color:var(--txt);
  font-family:inherit;-webkit-font-smoothing:antialiased}
.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[id]{scroll-margin-top:120px}
.aqb__wide[id],.aqb__detail[id]{scroll-margin-top:120px}
.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 Ausnahme fuer die erste Reihe ist am 31.07.2026 ENTFALLEN.
   Grund: seit der Aufteilung in Abschnitts-Widgets steht jede Reihe allein in
   ihrer eigenen .aqe-Huelle. :first-of-type haette danach auf JEDE Reihe
   gepasst und allen die Trennlinie genommen.
   Sie hat ohnehin nie gewirkt: die Regel .aqb__start + .aqe__row weiter unten
   hat sie mit gleicher Spezifitaet und spaeterer Position wieder aufgehoben.
   Nachgemessen auf der Live-Seite bei 1440px: die erste Reihe (terrassen)
   hatte border-top 1px und padding-top 72px, also die normalen Werte. */
.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:12px;font-size:16px;line-height:1;
  letter-spacing:.02em;text-transform:uppercase;color:var(--mut);font-weight:600}
.aqe__kicker .aqe__kdot{width:10px;height:10px;border-radius:50%;background:var(--green);flex:0 0 10px}
.aqe .aqe__kicker::after{content:"";height:1px;width:46px;flex:0 0 46px;margin-left:4px;background:rgba(20,20,20,.30)}
.aqe__cta .aqe__kicker{justify-content:center}
.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__p + .aqe__p{margin-top:20px}
.aqe .aqe__p b{color:var(--ink);font-weight:600}
.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}
}

/* Kopf je Abschnitt: Kicker (Punkt+Eyebrow+Linie) sitzt direkt ueber der
   H3, beide in derselben Spalte (aqe__text). Kein separater Vollbreite-Kopf
   mehr, sonst zeigt der Kicker links ueber dem Bild statt ueber dem Titel. */

/* Intro-Hero: breit, ruhig, hell, gehört zum selben Rhythmus */
.aqe__intro{padding:clamp(48px,5vw,80px) 0 clamp(8px,1vw,12px)}
.aqe__introtext{font-family:'Inter Tight',sans-serif;font-size:clamp(24px,2.4vw,34px);line-height:1.25;
  letter-spacing:-.02em;color:var(--ink);font-weight:600;max-width:22ch}
.aqe__introwide{margin-top:clamp(32px,3.5vw,52px);position:relative;width:100%;aspect-ratio:5/2;
  overflow:hidden;background:#ecedeb}
.aqe__introwide img,.aqe__introwide video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* Prozess: läuft im selben Rhythmus wie jede aqe__row (border-top + gleiches
   Padding), damit kein Sprung/Leerraum entsteht. Kreisliste 1:1 aus dem
   aquanatura-widgets-Plugin (aqe-process.css). */
.aqe__procwrap{border-top:1px solid var(--line);padding:clamp(44px,5vw,80px) 0;max-width:none}
.aqe-process{--aqua-green:#4CA139;--aqua-ink:#141414;--aqua-desc:#6a6f75;--aqua-circle:#fff;
  --aqua-circle-border-color:#d9ddd6;--aqua-circle-size:56px;--aqua-circle-border:2px;--aqua-circle-border-style:solid;
  --aqua-num:#141414;--aqua-active-bg:var(--aqua-green);--aqua-active-border:var(--aqua-green);
  --aqua-active-num:#fff;--aqua-desc-space:14px;--aqua-desc-maxw:32ch;width:100%}
.aqe-process__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3vw,44px)}
.aqe-process__item{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding-top:24px;border-top:2px solid var(--aqua-circle-border-color)}
.aqe-process__num{position:absolute;top:-28px;left:0;z-index:1;flex:0 0 auto;width:var(--aqua-circle-size);height:var(--aqua-circle-size);
  border-radius:50%;background:var(--aqua-circle);border:var(--aqua-circle-border) var(--aqua-circle-border-style) var(--aqua-circle-border-color);
  display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:600;color:var(--aqua-num)}
.aqe-process__content{margin-top:20px}
.aqe-process__title{margin:0;font-size:20px;line-height:1.2;font-weight:600;color:var(--aqua-ink)}
.aqe-process__desc{margin:var(--aqua-desc-space) 0 0;font-size:15px;line-height:1.5;color:var(--aqua-desc);max-width:var(--aqua-desc-maxw)}
.aqe-process__item.is-active{border-top-color:var(--aqua-active-border)}
.aqe-process__item.is-active .aqe-process__num{background:var(--aqua-active-bg);border-color:var(--aqua-active-border);color:var(--aqua-active-num)}
.aqe-process--glow .aqe-process__item.is-active .aqe-process__num{box-shadow:0 10px 26px rgba(76,161,57,.32)}
@media(max-width:880px){.aqe-process__list{grid-template-columns:1fr 1fr;row-gap:44px}}
@media(max-width:560px){.aqe-process__list{grid-template-columns:1fr}}

/* FAQ: gleicher Rhythmus wie jede row */
.aqe__faq{border-top:1px solid var(--line);padding:clamp(44px,5vw,80px) 0}
.aqe__faqgrid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,5vw,96px);align-items:start}
.aqe__q{border-bottom:1px solid var(--line)}
.aqe__q:first-child{border-top:1px solid var(--line)}
/* Die letzte Frage ohne eigene Unterlinie: darunter beginnt der
   Abschluss-Block mit seiner border-top. Gemessen 31.07.2026 bei 390px:
   zwei Striche im Abstand von 44px (Wasser) bzw. 41px (Bau & Stein) mit
   nichts dazwischen. Dieselbe Stelle wie auf Dein Garten und
   Pflanzen & Pflege. */
.aqe__q:last-child{border-bottom:0}
.aqe__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)}
.aqe__qbtn::after{content:"+";font-size:24px;font-weight:400;color:var(--green);flex:0 0 auto}
.aqe__q.open .aqe__qbtn::after{content:"–"}
/* 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). */
.aqe__a{display:grid;grid-template-rows:minmax(0,0fr);overflow:hidden;transition:grid-template-rows .28s ease}
.aqe__a > *{min-height:0;overflow:hidden}
@media (prefers-reduced-motion: reduce){.aqe__a{transition:none}}
.aqe__a p{padding:0 0 24px;font-size:16.5px;line-height:1.6;color:var(--txt);max-width:60ch}

/* Abschluss-CTA: gleicher Rhythmus, zentriert */
.aqe__cta{border-top:1px solid var(--line);padding:clamp(64px,7vw,110px) 0;text-align:center}
.aqe__cta .aqe__h{margin-left:auto;margin-right:auto;max-width:18ch}
.aqe__cta .aqe__ctalead{margin:24px auto 0;max-width:56ch;text-align:center;font-size:19px;line-height:1.62;color:var(--txt)}
.aqe__ctabtns{margin-top:36px;display:flex;justify-content:center}
.aqe__btn{display:inline-flex;align-items:center;gap:14px;background:var(--green);color:#fff;
  font-size:17px;font-weight:600;line-height:1;padding:16px 16px 16px 28px;border-radius:999px;
  text-decoration:none;transition:background .18s ease}
.aqe__btn:hover{background:#418c30}
.aqe__btn i{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.22);
  display:grid;place-items:center;font-style:normal;font-size:14px;flex:0 0 30px}

@media(max-width:900px){
  .aqe__faqgrid{grid-template-columns:1fr;gap:24px}
}

/* ======================================================================
   Bau & Stein: Abschnitts-Varianten auf dem aqe-System.
   Farben, Schriftgrößen, Linien und Abstände kommen unverändert aus dem
   aqe-Block (Seite 50015 / 50016). Neu sind nur die ANORDNUNGEN, damit
   nicht sechs Mal derselbe Bild-neben-Text-Block untereinander steht.
   ====================================================================== */

/* ---- Eingangsanimation (HTML-Widgets erfasst das globale Plugin-Fade nicht) --- */
.aqe [data-rv]{transition:opacity .75s cubic-bezier(.22,.61,.36,1),transform .75s cubic-bezier(.22,.61,.36,1)}
.aqe.rv-on [data-rv]{opacity:0;transform:translateY(24px)}
.aqe.rv-on [data-rv].rv-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .aqe.rv-on [data-rv],.aqe.rv-on [data-rv].rv-in{opacity:1;transform:none;transition:none}
}

/* ---- Start: Sechs Gewerke, ein Team ---------------------------------- */
/* Seit 04.08.2026 steht die Sprungliste als Kachelband UNTER diesem Kopf
   (eigenes Widget, wie auf Pflanzen & Pflege). Die zweite Spalte war damit
   leer - Titel und Einleitung teilen sie sich jetzt, statt untereinander in
   der linken Haelfte zu stehen. */
.aqb__start{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,5vw,96px);
  align-items:start;padding:clamp(48px,5.5vw,88px) 0 clamp(44px,5vw,80px)}
.aqe .aqb__lead{margin-top:28px;font-size:19.5px;line-height:1.62;color:var(--txt);max-width:44ch}
.aqb__index{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.aqb__ix{border-bottom:1px solid var(--line)}
.aqe .aqb__ixa{display:grid;grid-template-columns:56px minmax(0,1fr) 24px;align-items:center;gap:18px;
  padding:22px 0;text-decoration:none;color:var(--ink)}
.aqe .aqb__no{font-size:15px;letter-spacing:.12em;color:var(--mut);font-weight:600}
.aqe .aqb__nm{font-size:clamp(20px,1.6vw,25px);line-height:1.2;font-weight:600;letter-spacing:-.02em;
  transition:transform .25s ease}
.aqe .aqb__ar{font-style:normal;font-size:17px;color:var(--mut);justify-self:end;
  transition:color .25s ease,transform .25s ease}
.aqb__ixa:hover .aqb__nm{transform:translateX(6px)}
.aqb__ixa:hover .aqb__ar{color:var(--green);transform:translate(3px,-3px)}

/* ---- Variante: Breitbild mit Spalten darunter ------------------------ */
.aqb__wide{border-top:1px solid var(--line);padding:clamp(44px,5vw,80px) 0}
.aqb__wideimg{position:relative;width:100%;aspect-ratio:21/9;overflow:hidden;background:#ecedeb}
.aqe .aqb__wideimg img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;display:block}
.aqb__widehead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,80px);
  align-items:end;padding-bottom:clamp(28px,3vw,44px)}
.aqb__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,52px);
  margin-top:clamp(34px,3.6vw,56px)}
.aqb__col{border-top:1px solid var(--line);padding-top:22px}
.aqe .aqb__colt{font-size:19px;line-height:1.25;font-weight:600;color:var(--ink)}
.aqe .aqb__colp{margin-top:12px;font-size:16.5px;line-height:1.6;color:var(--txt)}

/* ---- Variante: Zwischenband mit Satz --------------------------------- */
.aqb__band{position:relative;width:100%;aspect-ratio:16/6;overflow:hidden;background:#0d110d;
  margin-top:clamp(44px,5vw,80px)}
.aqe .aqb__band img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;display:block}
.aqb__bandscrim{position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 50%,rgba(8,12,8,.62) 0%,rgba(8,12,8,.42) 55%,rgba(8,12,8,.22) 100%)}
.aqb__bandin{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;gap:clamp(14px,1.8vw,24px);padding:0 24px}
.aqe .aqb__bandeyebrow{display:flex;align-items:center;gap:12px;margin:0;font-size:15px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.92)}
/* Die Punkt-Maße stehen sonst nur unter .aqe__kicker, hier also mitgeben. */
.aqe .aqb__bandeyebrow .aqe__kdot{width:10px;height:10px;flex:0 0 10px;border-radius:50%;background:var(--green)}
.aqe .aqb__bandline{margin:0;color:#fff;font-weight:800;font-size:clamp(28px,4vw,58px);line-height:1.08;
  letter-spacing:-.025em;text-shadow:0 2px 30px rgba(0,0,0,.45);max-width:20ch}

/* ---- Variante: Bild links, nummerierte Punkte rechts ----------------- */
.aqb__pts{list-style:none;margin:44px 0 0;padding:0;border-top:1px solid var(--line)}
.aqb__pt{display:grid;grid-template-columns:56px minmax(0,1fr);gap:20px;padding:24px 0;
  border-bottom:1px solid var(--line)}
.aqe .aqb__ptn{font-size:15px;letter-spacing:.12em;color:var(--green);font-weight:700}
.aqe .aqb__ptt{font-size:21px;line-height:1.2;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.aqe .aqb__ptp{margin-top:10px;font-size:16.5px;line-height:1.6;color:var(--txt);max-width:44ch}

/* ---- Variante: Material mit Herkunft ---------------------------------
   Neu am 03.08.2026 abends. Vorher: duenne Haarlinien-Spalten, viel Weiss -
   Marcel: "das sieht extrem haesslich aus". Jetzt dieselbe Sprache wie die
   Prozess-Kacheln der Seite: vier Karten auf der Papierflaeche, grosser
   Materialname, Herkunft als kleine Zeile mit gruenem Quadrat davor. Keine
   Trennlinien - die Flaeche haelt die Karte zusammen (Lehre vom Team-Raster). */
.aqb__origin{margin-top:clamp(48px,5vw,84px)}
.aqe .aqb__originlabel{display:flex;align-items:center;gap:12px;
  font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);font-weight:600}
.aqe .aqb__originlabel::before{content:"";width:10px;height:10px;border-radius:50%;
  background:var(--green);flex:0 0 10px}
.aqb__originlist{list-style:none;margin:clamp(20px,2.2vw,30px) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,24px)}
.aqb__originitem{background:var(--paper);padding:clamp(22px,2.2vw,34px) clamp(20px,2vw,30px) !important;
  border-top:3px solid var(--green)}
.aqe .aqb__originmat{display:block;font-size:clamp(20px,1.6vw,24px);line-height:1.2;
  letter-spacing:-.02em;font-weight:650;color:var(--ink)}
.aqe .aqb__originsrc{display:block;margin-top:12px;font-size:12.5px;line-height:1.45;
  letter-spacing:.1em;text-transform:uppercase;color:var(--mut);font-weight:600}
.aqe .aqb__originsrc::before{content:"";display:inline-block;width:6px;height:6px;
  background:var(--green);margin-right:9px;vertical-align:.1em}

/* ---- Variante: schmaler Detail-Abschnitt -----------------------------
   Neu am 03.08.2026 abends. Vorher lag ein 21:8-Bildband ueber zwei
   Textspalten - wirkte wie ein Fremdkoerper zwischen den Bild-neben-Text-
   Abschnitten. Jetzt: Bild und Text halbe/halbe nebeneinander, das Bild in
   4:3 und damit deutlich groesser. Bewusst OHNE die kleinen Zusatzbilder,
   damit die Form sich von den grossen bildreihe-Abschnitten unterscheidet. */
.aqb__detail{border-top:1px solid var(--line);padding:clamp(44px,5vw,80px) 0;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,72px);align-items:center}
.aqb__detailimg{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;background:#ecedeb}
.aqe .aqb__detailimg img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;display:block}
.aqb__detailtxt{display:block}
.aqb__detailtxt > div + div{margin-top:clamp(18px,2vw,28px)}

@media(max-width:880px){
  .aqb__start,.aqb__widehead{grid-template-columns:1fr;gap:28px}
  .aqb__cols{grid-template-columns:1fr;gap:26px}
  .aqb__originlist{grid-template-columns:1fr 1fr}
  .aqb__wideimg{aspect-ratio:16/10}
  .aqb__band{aspect-ratio:4/3}
  .aqb__detail{grid-template-columns:1fr;gap:26px;align-items:start}
  .aqb__detailimg{aspect-ratio:16/9}
}
@media(max-width:560px){
  .aqb__originlist{grid-template-columns:1fr}
  /* Auch die Punkteliste ohne Unterlinie an der letzten Zeile: darunter folgt
     am Handy 39px spaeter die Trennlinie der naechsten Reihe. Am Rechner sind
     es 72px, dort bleibt die Linie stehen (gemessen 31.07.2026). */
  .aqb__pt:last-child{border-bottom:0}

  /* Ausstattungs-Tabelle am Handy untereinander statt nebeneinander.
     Zweispaltig bleiben hier nur rund 165px fuer den Wert uebrig - "Stainzer
     Hartgneis, Waldviertler Gneis, Pannonia Green und Granit, frostfest und
     langlebig." brach dort auf SIEBEN Zeilen um und sah aus wie ein Fehler.
     Am 29.07.2026 im Handy-Screenshot gesehen; Marcel: "auf der Handy-Ansicht
     muss alles perfekt aussehen." Am Rechner aendert sich nichts. */
  .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}
}

/* Die Regel "erste Reihe nach dem Startblock" ist am 31.07.2026 ebenfalls
   entfallen: nach der Aufteilung stehen Startblock und erste Reihe in zwei
   verschiedenen Widgets, der Geschwister-Selektor kann gar nicht mehr passen.
   Da die Ausnahme oben mit weg ist, holt sich jede Reihe ihre Trennlinie und
   ihren Innenabstand aus der Grundregel - das ergibt genau das Bild, das die
   Seite vorher hatte.
   Eine Abweichung bleibt und ist gewollt: unter 880px hatte die erste Reihe
   durch diese Regel 44px Innenabstand oben, alle anderen 38px. Das war ein
   Nebeneffekt, keine Gestaltungsentscheidung. Jetzt haben alle 38px. */

/* ---- Website-Button: die Theme-Regel greift nur unter .aqua-tp-header,
       im Inhalt muss die grüne Färbung scoped nachgebaut werden. ---- */
.aqe .tp-btn-black.btn-green-light-bg .tp-btn-black-text,
.aqe .tp-btn-black.btn-green-light-bg .tp-btn-black-circle{background-color:#4CA139}
.aqe .tp-btn-black.btn-green-light-bg .tp-btn-black-text{color:#fff}
.aqe .tp-btn-black.btn-green-light-bg .tp-btn-black-circle svg{color:#fff}

/* Unter dem Seitenkopf steht seit 04.08.2026 die Sprungliste. Zusammen mit
   deren Abstand klafften zwischen der Einleitung und den Kacheln rund 143px
   (gemessen). Marcel: "allgemein der Abstand oben passt auch nicht."

   Ein erster Versuch mit .aqe__wrap:has(+ .aqsl__wrap) hat NICHT gegriffen:
   die beiden Huellen sind keine Geschwister, zwischen ihnen liegen die
   .elementor-element-Container. Deshalb hier ohne Bedingung - aqua_bs_start
   steht ohnehin nur auf Bauliches, und dort folgt immer die Sprungliste. */
.aqb__start{padding-bottom:clamp(18px,2vw,30px)}

/* ---- Kopf ohne Sprungliste, einspaltig (04.08.2026) ----
   Einheitlich mit den anderen Leistungsseiten: Kicker, Titel und Einleitung
   stehen untereinander LINKS. Marcel: "das sollte eigentlich einheitlich
   sein, dann sollte man's wenn dann links machen."

   WICHTIG, weshalb dieser Block am DATEIENDE steht: .aqb__start setzt
   grid-template-columns weiter oben mit derselben Spezifitaet (beides eine
   Klasse). Bei Gleichstand gewinnt die spaetere Regel. Ein erster Versuch
   oberhalb war wirkungslos - der Satz stand weiter rechts (nachgesehen).
   Dieselbe Falle steht als Warnung schon in aqua-wasser.css. */
/* Der Abstand kommt aus dem gap des Rasters: einspaltig ist die Einleitung
   eine eigene Zeile, und clamp(40px,5vw,96px) sind dort viel zu viel. */
/* Padding-Top wie die Sprungliste darunter (clamp(24px,2.6vw,42px) aus
   aqua-sprungliste.css) - vorher 79px gegen deren 37px, auf jeder
   Unterseite ein anderer Abstand zum Banner (Marcel: "das muss identisch
   passen"). */
.aqb__start--breit{grid-template-columns:minmax(0,1fr);row-gap:0;
  padding-top:clamp(24px,2.6vw,42px)}
.aqe .aqb__start--breit .aqb__lead{margin-top:20px;max-width:88%}

/* ---- Variante: Mauern (16.08.2026) -----------------------------------
   Eigene Bauform, weil dieser Abschnitt DREI Bildrollen hat: ein grosses
   Bild, drei quadratische Steinkacheln und einen Streifen mit Kleinbildern.
   Marcel: "wir haben halt noch viel mehr material und es ist halt schade
   drum" - der Streifen bringt elf zusaetzliche Bilder bei rund 110px
   Seitenhoehe, statt sie in weiteren grossen Reihen zu stapeln.

   Der Streifen wickelt UM (auto-fit), er scrollt nicht seitlich. Grund:
   #smooth-wrapper kappt jede Breite, seitliches Scrollen in einem Kind
   laesst sich hier nicht zuverlaessig messen (siehe die Notiz zu
   scrollWidth). Am Rechner stehen alle elf in einer Zeile, am Handy in
   vier - beides ohne Sonderfall. */
.aqm{border-top:1px solid var(--line);padding:clamp(44px,5vw,80px) 0}
.aqm[id]{scroll-margin-top:120px}
.aqm__kopf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,80px);align-items:end;padding-bottom:clamp(28px,3vw,44px)}

.aqm__hero{position:relative;width:100%;aspect-ratio:21/9;overflow:hidden;background:#ecedeb}
.aqe .aqm__hero img{position:absolute;inset:0;width:100%;height:100%;max-width:none;
  object-fit:cover;display:block}

.aqm__steine{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.4vw,36px);margin-top:clamp(34px,3.6vw,56px)}
.aqm__stein{min-width:0}
.aqm__steinbild{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;background:#ecedeb}
.aqe .aqm__steinbild img{position:absolute;inset:0;width:100%;height:100%;max-width:none;
  object-fit:cover;display:block}
.aqe .aqm__steinname{display:block;margin-top:18px;font-size:19px;line-height:1.25;
  font-weight:600;color:var(--ink)}
.aqe .aqm__steintext{display:block;margin-top:10px;font-size:16.5px;line-height:1.6;color:var(--txt)}

/* 18.08.2026: Aus dem Streifen wurde das Zieh-Karussell. Die Regeln fuer
   .aqm__streifen und .aqm__kachel sind ersatzlos entfallen - sie hatten
   niemanden mehr, den sie gestalten. Geblieben ist nur der Abstand.
   KEINE Trennlinie: Marcel am 17.08. zum Karussell bei den Pflanzen -
   "das gehoert zum Abschnitt, nicht optisch abtrennen". */
.aqm__mehr{margin-top:clamp(34px,3.6vw,56px)}

@media(max-width:880px){
  .aqm__kopf{grid-template-columns:1fr;gap:28px}
  .aqm__hero{aspect-ratio:16/10}
  .aqm__steine{grid-template-columns:1fr 1fr;gap:20px}
}
@media(max-width:560px){
  /* Einspaltig statt zweispaltig: bei 390px bleiben je Kachel rund 165px,
     der Steinname bricht dort auf zwei Zeilen und der Satz auf fuenf. */
  .aqm__steine{grid-template-columns:1fr}
}


/* ==========================================================================
   STUFENBAND - Bauart "stufen", 23.08.2026
   Marcel: "koenntest du noch den treppenbau abschnitt komplett neu machen,
   auch mit einem neuen layout so wie die anderen und auch mit galerie".

   Der Einfall: die drei Kacheln sitzen UNTEN auf einer Linie auf und werden
   nach rechts hoeher. Ihre Oberkanten bilden damit selbst eine Treppe - das
   einzige Layout der Seite, das sein Thema zeigt statt es nur zu bebildern.

   align-items:end ist der Kern. Mit einem Versatz nach OBEN (margin-top)
   saehe die Silhouette gleich aus, aber unter der kuerzesten Kachel bliebe
   eine Leerflaeche stehen - dieselbe Falle wie beim Mosaik von .aqt.
   ========================================================================== */
.aqtr{padding:clamp(44px,5vw,80px) 0;border-top:1px solid var(--line)}
.aqtr[id]{scroll-margin-top:120px}

/* Kopf: Titel links, erster Absatz rechts - wie bei .aqt__head, damit der
   Abschnitt trotz neuer Bildanordnung zur Seite gehoert. */
.aqtr__kopf{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(24px,3vw,56px);align-items:end}
.aqtr .aqtr__h{margin-top:20px;max-width:20ch}
.aqtr .aqtr__lead{font-size:19px;line-height:1.62;color:var(--txt);max-width:56ch}

/* Das Band. Die drei Seitenverhaeltnisse steigen an: quadratisch, dann
   hochkant, dann noch hoeher. Bei 1510 px Breite ergibt das Stufen von rund
   85 px - deutlich genug, um als Absicht gelesen zu werden, und flach genug,
   dass die Reihe nicht auseinanderfaellt. */
.aqtr__band{display:grid;gap:clamp(14px,1.6vw,22px);align-items:end;
  margin-top:clamp(34px,3.8vw,60px)}
.aqtr__band--n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.aqtr__band--n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.aqtr__band--n1{grid-template-columns:minmax(0,1fr)}
.aqtr__stufe{position:relative;overflow:hidden;background:#ecedeb;margin:0}
.aqtr__stufe img{width:100%;height:100%;object-fit:cover;display:block}
.aqtr__band--n3 .aqtr__stufe--1{aspect-ratio:1/1}
.aqtr__band--n3 .aqtr__stufe--2{aspect-ratio:4/4.7}
.aqtr__band--n3 .aqtr__stufe--3{aspect-ratio:4/5.4}
.aqtr__band--n2 .aqtr__stufe--1{aspect-ratio:4/3.4}
.aqtr__band--n2 .aqtr__stufe--2{aspect-ratio:4/4.4}
.aqtr__band--n1 .aqtr__stufe--1{aspect-ratio:16/9}

/* Der Nachsatz sitzt unter dem Band, eingerueckt auf die rechte Spalte des
   Kopfes - so bleibt eine senkrechte Linie durch den ganzen Abschnitt. */
/* Zwei Klassen UND !important: der p-Reset des Projekts setzt Absatzraender
   mit !important auf 0 und schlaegt eine Regel mit nur einer Klasse. Gemessen
   am 23.08.2026: computed margin-top war 0 statt 40, der Satz klebte am Band. */
.aqtr .aqtr__note{margin-top:clamp(28px,3vw,44px)!important;font-size:18px;
  line-height:1.6;color:var(--txt);max-width:62ch}

/* Karten wie im Wasser-Abschnitt: weisse Flaechen auf einem Raster aus
   Haarlinien. Bewusst dieselbe Sprache - neu ist die Bildanordnung, nicht
   das Regelwerk. */
.aqtr__specs{margin-top:clamp(40px,4.5vw,64px)}
.aqtr .aqtr__stitle{margin-top:0}
.aqtr__sgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.aqtr__karte{background:#fff;padding:32px 30px 38px}
.aqtr .aqtr__kt{margin:0;font-size:22px;line-height:1.2;color:var(--ink);font-weight:600}
.aqtr .aqtr__kd{margin-top:11px;font-size:16.5px;line-height:1.55;color:var(--mut)}

@media(max-width:1100px){
  .aqtr__sgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:880px){
  /* Unter 880 px waeren die Stufen nur noch Streifen. Ab hier stehen die
     Bilder in zwei gleichen Spalten - die Treppen-Silhouette entfaellt
     bewusst, statt sie unleserlich zu quetschen. */
  .aqtr__kopf{grid-template-columns:1fr;gap:18px;align-items:start}
  .aqtr__band--n3,.aqtr__band--n2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .aqtr__band--n3 .aqtr__stufe--1,
  .aqtr__band--n3 .aqtr__stufe--2,
  .aqtr__band--n3 .aqtr__stufe--3,
  .aqtr__band--n2 .aqtr__stufe--1,
  .aqtr__band--n2 .aqtr__stufe--2{aspect-ratio:4/5}
}
@media(max-width:560px){
  .aqtr__band--n3,.aqtr__band--n2,.aqtr__band--n1{grid-template-columns:1fr}
  .aqtr__sgrid{grid-template-columns:1fr}
}