/* ---- Aquanatura Wasser im Garten ----
 *
 * 1:1 uebernommen aus der HTML-Fassung der Seite Wasser im Garten (50016,
 * Stand 28.07.2026). Beim Umbau auf das Elementor-Widget aqua_wasser wurde an
 * den Regeln NICHTS geaendert. Der .aqe-process-Block stammt aus der
 * HTML-Fassung und bleibt hier bewusst stehen: er ist eine Kopie aus
 * aqe-process.css, und eine Abhaengigkeit auf die Plugin-Datei wuerde die
 * Reihenfolge der Stylesheets aendern.
 */
.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.
   =================================================================== */
.aqe{--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 Innenabstand gilt nur am letzten Abschnitt. Stuende er in .aqe,
   haette die Seite ihn neunmal. */
.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}
.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.
   Sie hat auf dieser Seite nie gegriffen: :first-of-type meint das erste
   div unter seinen Geschwistern, und das ist .aqe__intro, nicht die erste
   .aqe__row. Nachgemessen: alle fuenf Reihen hatten 1px Trennlinie.
   Seit der Aufteilung in Abschnitts-Widgets steht jede Reihe allein in ihrer
   eigenen .aqe-Huelle - die Regel haette danach auf JEDE Reihe gepasst und
   allen die Linie genommen. */
.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}
}

/* Eckdaten-Tabellen am Handy untereinander statt nebeneinander.
   Zweispaltig bleiben bei 390px nur 162px fuer den Wert uebrig. Gemessen auf
   der Live-Seite: von den zwoelf Tabellen brechen die Werte auf VIER bis SECHS
   Zeilen um ("Aushub, Bau, Abdichtung, Filter- und Pumpentechnik..." auf sechs).
   Das sieht nach einem Fehler aus.
   Dieselbe Korrektur steht seit 29.07.2026 in aqua-baustein.css,
   aqua-planung.css und aqua-projektseite.css; hier hat sie gefehlt.
   Am Rechner aendert sich nichts. */
@media(max-width:560px){
  .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}
}

/* 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;transition:max-height .28s ease';
   die Zielhoehe musste dann assets/js/aqua-aufklappen.js in Pixeln messen und
   bei jedem Schriftwechsel, jedem resize und ueber einen ResizeObserver
   nachmessen. Der Endzustand ist derselbe, nur ohne Messerei, ohne Aufrundung
   und ohne abgeschnittene Antwort.
   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 24 px hoch statt
   0 (nachgemessen).
   Den Auf/Zu-Zustand setzt das Skript inline, wie vorher auch. */
.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}
.aqe__a p{padding:0 0 24px;font-size:16.5px;line-height:1.6;color:var(--txt);max-width:60ch}
@media (prefers-reduced-motion: reduce){
  .aqe__a{transition:none}
  .aqe__btn{transition:none}
}

/* 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}
}

/* -------------------------------------------------------------------
   Das breite Einleitungsfeld am Handy
   -------------------------------------------------------------------
   .aqe__introwide traegt auf dieser Seite das VIDEO. Bei 5:2 bleiben davon am
   Handy gemessen 350x140px uebrig, darin ist vom Schwimmteich nichts zu
   erkennen. Am Rechner bleibt 5:2 (1360x544px), dort wirkt das Kinoformat.
   Gemessen am 30.07.2026 bei 390px.

   WICHTIG, weshalb dieser Block am DATEIENDE steht: die Grundregel
   .aqe__introwide{aspect-ratio:5/2} steht in dieser Datei WEITER UNTEN als die
   beiden Media-Bloecke oben (Zeile 100 gegenueber Zeile 62 und 77). Bei
   gleicher Spezifitaet gewinnt die spaetere Regel, eine Media Query aendert
   daran nichts. Ein erster Versuch weiter oben war deshalb wirkungslos:
   gemessen standen dort weiter 350x140px. Wer hier etwas ergaenzt, muss also
   hinter der Grundregel bleiben. */
@media(max-width:880px){
  .aqe__introwide{aspect-ratio:16/9}
}
@media(max-width:560px){
  /* 16:9 sind bei 350px Breite nur 197px, fuer das Aufmacher-Video zu wenig. */
  .aqe__introwide{aspect-ratio:4/3}
}

/* ===================================================================
   NEU 04.08.2026 - drei gebaute Abschnitte statt dreimal derselben
   Zwei-Spalten-Zeile.

   Marcels Einwand zur alten Fassung: "links extrem viel Textinhalt,
   rechts ein Bild, das Verhaeltnis stimmt einfach nicht", "denk nicht
   immer in diesem Zwei-Spalten-Prinzip" und "es geht wirklich sehr viel
   darum, dass du leere Flaechen ausfuellst".

   Grundsatz hier: kein Textblock laeuft mehr ueber die volle Hoehe einer
   Spalte. Text sitzt in Baendern und in Luecken des Bildrasters, die
   Aufzaehlungen werden zu Karten. Farben, Schriftgroessen und Linien
   kommen unveraendert aus dem .aqe-Block darueber.
   =================================================================== */

.aqt,.aqwp,.aqbw{border-top:1px solid var(--line);padding:clamp(44px,5vw,80px) 0}
/* Der erste Abschnitt einer Seite bekommt KEINE Trennlinie (11.08.2026).
   Die Linie trennt Abschnitte VONEINANDER - steht das Widget als erstes
   direkt unter dem Banner, trennt sie nichts und sieht aus wie ein
   Versehen. Aufgefallen im Schaugarten, nachdem der Auftakt dort auf das
   Pool-Layout umgestellt wurde. Marcel: "du hast da oben eine trennlinie
   drinn, sowas muss dir auffallen". */
.aqua-ew-wrap:first-child .aqt:first-child,
.aqua-ew-wrap:first-child .aqwp:first-child,
.aqua-ew-wrap:first-child .aqbw:first-child,
.elementor-widget:first-child .aqt,
.elementor-widget:first-child .aqwp,
.elementor-widget:first-child .aqbw{border-top:0}
/* Der Pool folgt direkt auf das randlose Bildband. Ohne zusaetzliche Luft
   klebt seine Trennlinie an der letzten Kachel (Marcel: "ein bisschen mehr
   Abstand dann machen zum grossen Galerieabschnitt"). */
.aqwp{padding-top:clamp(64px,7vw,116px)}
.aqt[id],.aqwp[id],.aqbw[id]{scroll-margin-top:120px}

/* ---- Schwimmteich und Naturpool: Kopfband, Mosaik, Variantenkarten ---- */
.aqt__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,4vw,72px);align-items:end}
/* 18.08.2026: 14ch war zu eng. Marcel in seinem Chrome (2560 px Fenster):
   "der Titel hat oben eine zu kleine Breite." Gemessen: der Titel bekam 472
   von 651 px Spaltenbreite und brach bei Erd- und Betonarbeiten auf VIER
   Zeilen, waehrend die Nachbarabschnitte mit zwei auskommen. 20ch laesst die
   Zeile atmen und haelt sie trotzdem deutlich kuerzer als die Spalte. */
.aqt .aqt__h{margin-top:20px;max-width:20ch}
.aqt .aqt__lead{font-size:19.5px;line-height:1.62;color:var(--txt);max-width:52ch;
  padding-bottom:6px}

/* Das Mosaik: zwei ungleiche Bilder oben, darunter der zweite Absatz neben
   zwei weiteren Bildern. Die Textluecke ist Teil des Rasters, deshalb bleibt
   rechts wie links nichts frei stehen. */
.aqt__mosaik{margin-top:clamp(32px,4vw,56px);display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-auto-rows:auto;gap:clamp(14px,1.6vw,22px)}
.aqt__fig{position:relative;overflow:hidden;background:#ecedeb;margin:0}
.aqt__fig img{width:100%;height:100%;object-fit:cover;display:block}
/* Die Spaltenbreite steht seit 20.08.2026 am Element (style="grid-column"),
   weil sie das Widget aus der Bildanzahl ausrechnet. Hier steht nur noch, wie
   HOCH eine Kachel wird, und das haengt an ihrer Breite: schmale Kacheln
   hochkant, breite quer. Sonst stehen in einer Zeile unterschiedlich hohe
   Bilder und darunter bleibt Flaeche frei. */
.aqt__f1{align-self:stretch;min-height:100%}
.aqt__f2{aspect-ratio:4/5}
.aqt__sp4{aspect-ratio:4/3}
.aqt__sp6{aspect-ratio:3/2}
.aqt__sp8{aspect-ratio:16/9}
.aqt__sp12{aspect-ratio:21/9}
/* Eingestellte Hoehe (Regler im Widget): sie gilt fuer ALLE Kacheln, das
   Seitenverhaeltnis tritt zurueck. Der Zuschnitt macht object-fit:cover. */
.aqt__mosaik--hoehe .aqt__fig{height:var(--aqt-h);aspect-ratio:auto;min-height:0;align-self:auto}
.aqt__note{display:flex;align-items:center}
.aqt .aqt__note p{font-size:17.5px;line-height:1.62;color:var(--txt)}
.aqt__cap,.aqwp__cap,.aqbw__cap{
  position:absolute;left:14px;right:auto;bottom:14px;max-width:calc(100% - 28px);
  padding:12px 17px 13px;
  border-radius:14px;
  background:rgba(16,20,16,.34);
  border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 12px 34px rgba(0,0,0,.20);
  color:#fff;font-size:clamp(18px,1.5vw,22px);line-height:1.25;font-weight:700;
  letter-spacing:-.015em}
@media(max-width:900px){
  .aqt__cap,.aqwp__cap,.aqbw__cap{font-size:17px}
}
@media(max-width:560px){
  .aqt__cap,.aqwp__cap,.aqbw__cap{left:10px;bottom:10px;padding:10px 14px 11px;font-size:15.5px}
}

.aqt__varianten{margin-top:clamp(40px,4.5vw,64px)}
.aqt .aqt__vtitle{margin-top:0}
.aqt__vgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.aqt__card{background:#fff;padding:34px 32px 40px}
.aqt .aqt__cnum{display:block;font-size:34px;line-height:1;letter-spacing:-.02em;
  color:var(--green);font-weight:700}
.aqt .aqt__ct{margin-top:18px;font-size:23px;line-height:1.2;color:var(--ink);font-weight:600}
.aqt .aqt__cd{margin-top:12px;font-size:17px;line-height:1.55;color:var(--mut)}

@media(max-width:1000px){
  .aqt__vgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:880px){
  .aqt__head{grid-template-columns:1fr;gap:22px;align-items:start}
  .aqt .aqt__h{max-width:none}
  /* Am Handy zaehlt die Spaltenrechnung vom Rechner nicht: dort ist eine
     Kachel entweder halb oder ganz breit. Die Breiten stehen seit 20.08.2026
     am Element selbst (inline), deshalb braucht es hier !important - anders
     kommt eine Klasse gegen ein style-Attribut nicht an.
     Der Text steht im Quelltext ZWISCHEN den Bildern. Sechs Spalten breit
     draengte er sonst ein Bild allein in seine Reihe, daneben blieb die halbe
     Breite leer (gemessen bei 390px). Deshalb rutscht er per order ans Ende. */
  .aqt__mosaik .aqt__fig{grid-column:span 6 !important;aspect-ratio:3/4;
    min-height:0;align-self:auto}
  .aqt__mosaik .aqt__fig:first-child{grid-column:span 12 !important;aspect-ratio:4/3}
  /* Bleibt am Ende ein Bild allein uebrig, bekommt es die ganze Breite. Welches
     das ist, weiss das Widget (es zaehlt die Bilder) und setzt die Klasse. */
  .aqt__mosaik .aqt__fig--mvoll{grid-column:span 12 !important;aspect-ratio:16/9}
  .aqt__mosaik--hoehe .aqt__fig{aspect-ratio:auto}
  .aqt__mosaik .aqt__note{grid-column:span 12 !important;order:1}
}
@media(max-width:560px){
  .aqt__vgrid{grid-template-columns:1fr}
}

/* ---- Pool: Bildbuehne oben, Textband darunter, Merkmale als Zeile ---- */
.aqwp__stage{margin-top:clamp(32px,3.5vw,52px);display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);
  grid-template-rows:repeat(2,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.aqwp__fig{position:relative;overflow:hidden;background:#ecedeb;margin:0;min-height:0}
.aqwp__fig img{width:100%;height:100%;object-fit:cover;display:block}
.aqwp__f1{grid-row:span 2;align-self:stretch;min-height:100%}
.aqwp__f2,.aqwp__f3{min-height:0;aspect-ratio:3/2}

/* Marcel, 04.08.2026: "beim Abschnitt Pool das auch so machen, dass der
   Textbereich oben ist und der Bildbereich mit den drei Pool-Bildern
   unten". Der obere Aussenabstand entfaellt damit, die Buehne bekommt
   ihn stattdessen. */
/* Marcel, 11.08.2026: "Ueberschrift links breiter, Text rechts buendig".
   Vorher war die LINKE Spalte die schmalere (.85fr gegen 1.15fr), dazu ein
   max-width von 13ch auf der Ueberschrift - zusammen brach sie auf drei
   Zeilen um. Rechts kappte ein max-width von 62ch den Textblock rund 200 px
   vor dem rechten Rand, wodurch der Absatz frei in der Flaeche hing.
   Jetzt bestimmt allein das Raster die Breiten: links mehr Platz, rechts
   buendig mit der Bildbuehne darunter. */
.aqwp__band{display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,4vw,72px);align-items:start}
.aqwp .aqwp__h{margin-top:20px;max-width:none}
.aqwp__bandr{max-width:none}
.aqwp .aqwp__p{font-size:18.5px;line-height:1.62;color:var(--txt)}
.aqwp .aqwp__p + .aqwp__p{margin-top:18px}

/* Knopf im Textband. Markup ist der Theme-Knopf (tp-btn-black), damit er
   sich in der Bewegung wie der Knopf im Header verhaelt. Die gruene Farbe
   muss hier stehen: aqua-baustein.css wird auf der Schaugarten-Seite nicht
   geladen, und die Regel in aqua-schaugarten.css gilt nur unter .aqs. */
.aqwp__btnrow{margin-top:clamp(22px,2.4vw,32px)}
.aqwp .tp-btn-black.btn-green-light-bg .tp-btn-black-text,
.aqwp .tp-btn-black.btn-green-light-bg .tp-btn-black-circle{background-color:#4CA139}
.aqwp .tp-btn-black.btn-green-light-bg .tp-btn-black-text{color:#fff}
.aqwp .tp-btn-black.btn-green-light-bg .tp-btn-black-circle svg{color:#fff}

.aqwp__merkmale{margin-top:clamp(36px,4vw,56px)}
.aqwp .aqwp__mtitle{margin-top:0}
.aqwp__mgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.aqwp__m{background:#fff;padding:22px 22px 26px}
.aqwp .aqwp__mdt{font-size:15px;letter-spacing:.02em;color:var(--mut);font-weight:600}
.aqwp .aqwp__mdd{margin-top:9px;font-size:16.5px;line-height:1.5;color:var(--ink)}

@media(max-width:1000px){
  .aqwp__mgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:880px){
  .aqwp__stage{grid-template-columns:1fr;grid-template-rows:auto}
  .aqwp__f1{grid-row:auto;aspect-ratio:4/3;min-height:0}
  .aqwp__f2,.aqwp__f3{aspect-ratio:16/10}
  .aqwp__band{grid-template-columns:1fr;gap:22px}
  .aqwp .aqwp__h{max-width:none}
  .aqwp__bandr{max-width:none}
}
@media(max-width:560px){
  .aqwp__mgrid{grid-template-columns:1fr}
}

/* ---- Bewaesserung: Raster aus Text und vier Bildern, dann die Schritte ----
   Vorher stand hier ein Textblock mit EINEM Bild und einer leeren linken
   Haelfte, gefolgt von denselben vier Schritten zweimal hintereinander
   (aqua_process und aqua_wg_ablauf). Beides ist entfallen. */
.aqbw__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  gap:clamp(14px,1.6vw,22px);align-items:stretch}
.aqbw__intro{grid-column:span 5;display:flex;flex-direction:column;justify-content:center}
/* 13ch war zu eng: "Fertigrasen oder Ansaat, beides mit festem Boden" brach
   bei Marcels Fensterbreite (2560 px) auf VIER Zeilen, obwohl die Spalte
   583 px breit ist und nur 438 genutzt wurden. Gleiche Korrektur wie bei
   .aqt__h am 18.08.2026. */
.aqbw .aqbw__h{margin-top:20px;max-width:19ch}
.aqbw .aqbw__p{margin-top:22px;font-size:17.5px;line-height:1.62;color:var(--txt)}
.aqbw__fig{position:relative;overflow:hidden;background:#ecedeb;margin:0}
.aqbw__fig img{width:100%;height:100%;object-fit:cover;display:block}
.aqbw__b1{grid-column:span 7;aspect-ratio:16/10}
/* Zweite Reihe: Video, breites Foto, quadratisches Foto - drei Spaltenbreiten
   (3/5/4) mit drei Seitenverhaeltnissen, die alle dieselbe Hoehe ergeben.
   Ungleiche Hoehen hinterlassen sonst ein Loch unter der kuerzesten Kachel. */
.aqbw__video{grid-column:span 3;aspect-ratio:3/4}
.aqbw__b2{grid-column:span 5;aspect-ratio:5/4}
.aqbw__b3{grid-column:span 4;aspect-ratio:1/1}

/* Das Video liegt als 9:16 in der Mediathek, damit der Spieler die
   Originalbildaufteilung zeigt. In der Kachel wird es auf 3:4 beschnitten,
   der Bildausschnitt etwas nach unten versetzt - mittig gerechnet fiele der
   Fuss des Regners heraus (nachgesehen). */
.aqbw .aqbw__vid{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 57%;display:block}

.aqbw__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:78px;height:78px;border-radius:50%;border:1px solid rgba(255,255,255,.55);
  background:rgba(16,20,16,.34);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 12px 34px rgba(0,0,0,.28);cursor:pointer;
  display:grid;place-items:center;padding:0;
  transition:transform .25s cubic-bezier(.2,.6,.2,1),background .25s ease}
.aqbw__play:hover{transform:translate(-50%,-50%) scale(1.07);background:rgba(16,20,16,.5)}
.aqbw__playicon{color:#fff;font-size:22px;line-height:1;margin-left:4px}
@media(prefers-reduced-motion:reduce){.aqbw__play{transition:none}}
@media(max-width:560px){.aqbw__play{width:60px;height:60px}.aqbw__playicon{font-size:18px}}
/* Der zweite Absatz laeuft als breites Textband unter den Bildern, zweispaltig
   gesetzt - so bleibt er niedrig und daneben entsteht keine leere Spalte. */
.aqbw__zweit{grid-column:span 12;margin-top:clamp(10px,1vw,16px);
  columns:2;column-gap:clamp(32px,3.5vw,64px)}
.aqbw .aqbw__zweit p{margin-top:0;break-inside:avoid}
.aqbw .aqbw__zweit p + p{margin-top:18px}

.aqbw__schritte{margin-top:clamp(40px,4.5vw,64px)}
.aqbw .aqbw__stitle{margin-top:0}
.aqbw__sgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.aqbw__karte{background:#fff;padding:34px 30px 40px}
.aqbw .aqbw__snum{display:block;font-size:34px;line-height:1;letter-spacing:-.02em;
  color:var(--green);font-weight:700}
/* margin-bottom steht hier ausdruecklich: die Schritt-Ueberschrift war bis
   24.08.2026 ein h4 und bekam ihre 8 px von einer Tag-Regel des Themes. Seit
   sie ein h3 ist (der Abschnittstitel darueber wurde zu h2, sonst spraenge die
   Gliederung von h2 gleich auf h4), greift jene Regel nicht mehr. Wert
   festgeschrieben, damit die Abstaende exakt bleiben wie vorher. */
.aqbw .aqbw__st{margin-top:18px;margin-bottom:8px;font-size:23px;line-height:1.2;color:var(--ink);font-weight:600}
.aqbw .aqbw__sd{margin-top:12px;font-size:17px;line-height:1.55;color:var(--mut)}

@media(max-width:1000px){
  .aqbw__sgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:880px){
  .aqbw__grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .aqbw__intro{grid-column:span 6}
  .aqbw__b1{grid-column:span 6;aspect-ratio:4/3}
  .aqbw__video{grid-column:span 3;aspect-ratio:3/4}
  .aqbw__b2{grid-column:span 3;aspect-ratio:3/4}
  .aqbw__b3{grid-column:span 6;aspect-ratio:16/9}
  .aqbw__zweit{grid-column:span 6;columns:1}
}
@media(max-width:560px){
  .aqbw__sgrid{grid-template-columns:1fr}
}

/* ---- Buero-Fassung des Rasters (13.08.2026) ----
   Marcel: "den Buero und Kontakt Abschnitt so aufbauen wie bei Rasenanlage,
   Video brauchst du keins und Vorher-Nachher-Slider auch nicht, da nimmst du
   einfach normale Bilder in dem Format."
   Zwei Abweichungen sind noetig:
   1. Der Textblock links traegt hier Kontakt, Oeffnungszeiten UND Knopf, ist
      also hoeher als eine 16:10-Kachel. Mit festem Seitenverhaeltnis bliebe
      unter dem grossen Bild eine leere Flaeche stehen (dieselbe Falle wie bei
      .aqt__f1). Deshalb streckt sich b1 hier ueber die ganze Zeilenhoehe.
   2. Der Platz des Videos bekommt eine eigene Klasse, damit dort ein normales
      Bild stehen kann, ohne .aqbw__video zweckzuentfremden. */
/* ---- Symmetrie und Ueberlauf, 20.08.2026 ----
   Marcel: "koenntest du den buero und kontakt abschnitt etwas besser machen
   bzw. symetrischer gestalten und drauf achten auf genuegend abstaende".

   Gemessen bei 2560 x 1305, VOR der Aenderung:
     Reihe 1 war 5/7 geteilt (616 / 872), Reihe 2 dagegen 6/6 (744 / 744).
     Die senkrechte Fuge sprang also zwischen den Reihen um 125 px - genau
     das liest sich als schief.
     Schlimmer: die Zeile war 654 px hoch, der Inhalt der Textspalte aber
     677 px. Er lief 23 px unter das Bild hinaus, der gruene Knopf stand
     danach 1 px ueber den unteren Bildern.

   Ursache des Ueberlaufs: b1 hatte aspect-ratio:auto und ein img mit
   height:100%. Bei einer Zeile ohne feste Hoehe faellt das auf die
   natuerliche Bildhoehe zurueck - das BILD gab die Zeilenhoehe vor und der
   Text musste hineinpassen. Jetzt liegt das img absolut im Rahmen, damit
   zaehlt nur noch der Text fuer die Hoehe und das Bild fuellt, was uebrig
   bleibt. Damit kann der Block nie wieder ueberlaufen, egal wie lang der
   Text wird. */
/* Zeilenabstand groesser als Spaltenabstand. Der gruene Knopf ist das letzte
   Element der Textspalte und stand mit den 22 px des Rasters direkt auf der
   Oberkante des Fotos darunter - eine gefuellte Flaeche braucht mehr Luft als
   zwei Bilder nebeneinander. Gemessen am 20.08.2026 bei 2560 px. */
.aqbw--buero .aqbw__grid{row-gap:clamp(28px,3.4vw,48px)}
.aqbw--buero .aqbw__intro{grid-column:span 6}
.aqbw--buero .aqbw__b1{grid-column:span 6;aspect-ratio:auto;align-self:stretch;min-height:0}
.aqbw--buero .aqbw__b1 img{position:absolute;inset:0}
/* Untere Reihe: ZWEI gleich breite Kacheln, nicht drei. Es gibt vom Buero nur
   drei brauchbare Motive - Glasfassade, Gebaeude von der Strasse, Vorgarten.
   Eine vierte Kachel haette ein Motiv wiederholt (13.08.2026 aufgefallen:
   Vorgarten hoch und Vorgarten quer sind dasselbe Haus). */
.aqbw--buero .aqbw__b2,
.aqbw--buero .aqbw__b3{grid-column:span 6;aspect-ratio:16/10}

/* Rhythmus in der Textspalte. Vorher lagen alle Abstaende zwischen 22 und
   30 px - dadurch stand alles gleich weit auseinander und nichts gehoerte
   sichtbar zusammen. Jetzt eng innerhalb einer Gruppe (Titel, dann die
   beiden Faktenbloecke), weit zwischen den Gruppen und vor dem Knopf.
   Die Ueberschrift traegt hier .aqs__h aus der Schaugarten-Basis, nicht
   .aqbw__h - deshalb die Breitenbremse eigens. */
.aqbw--buero .aqs__h{margin-top:20px;max-width:17ch}
.aqbw--buero .aqbw__p{margin-top:24px;max-width:62ch}
.aqbw--buero .aqbw__kontakt{margin-top:clamp(30px,3vw,40px)}
.aqbw--buero .aqbw__zeiten{margin-top:20px}
.aqbw--buero .aqbw__knopf{margin-top:clamp(30px,3vw,40px)}
@media(max-width:880px){
  .aqbw--buero .aqbw__b1{aspect-ratio:4/3;min-height:0}
  .aqbw--buero .aqbw__b2,
  .aqbw--buero .aqbw__b3{grid-column:span 6;aspect-ratio:16/10}
}
@media(max-width:880px){
  .aqbw--buero .aqbw__intro{grid-column:span 6}
  .aqbw--buero .aqbw__b1{grid-column:span 6}
  .aqbw--buero .aqbw__b1 img{position:static}
}

/* ---- Schwimmteich im Schaugarten, 20.08.2026 ----
   Marcel: "koenntest du beim schwimmteich abschnitt genau das layout vom
   bewaesserungs abschnitt uebernehmen". Vorher stand dort .aqs__dark mit
   Hochbild und Plakette.

   Zwei begruendete Abweichungen vom Vorbild:
   1. Statt Video 3/4 + Foto 5/4 + Foto 1/1 stehen hier gleich breite Kacheln.
      Der schmale Platz in der Bewaesserung ist HOCH, weil dort ein
      Hochkant-Video liegt. Alle Aufnahmen vom Schwimmteich sind quer - ein
      3:4-Ausschnitt haette sie zerschnitten.
   2. auto-fit statt fester Spannweiten: das Feld hat fuenf Bildplaetze, nach
      dem Doppelten-Filter bleiben mal vier, mal drei uebrig. Feste Breiten
      liessen dann eine Luecke stehen (dieselbe Falle wie beim Mosaik von
      .aqt, wo ein fehlendes Bild vier Spalten leer laesst). */
/* 1 / -1 statt span 12: unter 880 px hat .aqbw__grid nur SECHS Spalten.
   Ein span 12 haette dort sechs zusaetzliche Spalten erzeugt - gemessen am
   20.08.2026 bei 390 px: die Textspalte schrumpfte auf 70 px, das Bild wuchs
   auf 1171 px und lief aus dem Bildschirm. 1 / -1 nimmt immer die ganze
   Zeile, egal wie viele Spalten definiert sind. */
.aqbw--teich .aqbw__kacheln{grid-column:1 / -1;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(0,1fr));
  gap:clamp(14px,1.6vw,22px)}
.aqbw--teich .aqbw__kacheln .aqbw__fig{aspect-ratio:4/3}
@media(max-width:880px){
  .aqbw--teich .aqbw__kacheln{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .aqbw--teich .aqbw__kacheln{grid-template-columns:1fr}
}

/* Karten ohne Nummer. Die vier Punkte des Schwimmteichs sind Eigenschaften,
   keine Reihenfolge - "Rein biologisch" ist kein Schritt 1. An der Stelle der
   grossen Ziffer steht deshalb derselbe gruene Punkt, den auch die kleine
   Zeile ueber der Ueberschrift fuehrt. Hoehe und Rhythmus der Karte bleiben
   dadurch unveraendert. */
.aqbw__karte--punkt{padding-top:32px}
.aqbw .aqbw__kdot{display:block;width:10px;height:10px;border-radius:50%;
  background:var(--green);margin:0 0 20px}
.aqbw .aqbw__karte--punkt .aqbw__st{margin-top:0}
/* Ohne zweiten Absatz und ohne Zwischentitel braucht die Kartenzeile ihren
   eigenen Abstand nach oben - .aqbw__stitle faellt hier weg. */
.aqbw--teich .aqbw__schritte{margin-top:clamp(40px,4.5vw,64px)}

/* ---- Kontaktzeilen und Oeffnungszeiten im Textblock ---- */
.aqbw__kontakt{margin-top:clamp(20px,2vw,28px);display:grid;gap:9px}
.aqbw__kzeile{display:flex;gap:12px;align-items:baseline;font-size:17.5px;line-height:1.5}
.aqbw__klabel{flex:0 0 auto;min-width:5.5em;color:var(--mut);font-size:14.5px;
  letter-spacing:.06em;text-transform:uppercase}
.aqbw .aqbw__kwert{color:var(--ink)}
.aqbw .aqbw__kwert a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.aqbw__zeiten{margin-top:clamp(20px,2vw,28px)}
.aqbw .aqbw__ztitel{margin:0 0 6px;font-size:14.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mut)}
.aqbw__zzeile{display:flex;justify-content:space-between;gap:18px;
  padding:11px 0;border-top:1px solid var(--line);font-size:17px}
.aqbw__zzeile dt{color:var(--ink);font-weight:600}
.aqbw__zzeile dd{margin:0;color:var(--txt);text-align:right}
.aqbw__knopf{margin-top:clamp(22px,2.4vw,30px)}

/* ---- Auftakt ohne Medium ----
   Ohne das Videofeld darunter braucht der Satz seinen eigenen unteren
   Abstand, sonst klebt er an der Trennlinie des naechsten Abschnitts. */
.aqe__intro--nur{padding-bottom:clamp(28px,3vw,44px)}
.aqe__intro--nur .aqe__introtext{max-width:34ch}

/* Ueberschrift ueber Karten, Merkmalen und Schritten: deutlicher als die
   graue Kapitaelchenzeile aus dem .aqe-Block, die Marcel zu leise war. */
.aqt .aqt__vtitle,.aqwp .aqwp__mtitle,.aqbw .aqbw__stitle{
  margin-top:0;font-size:23px;line-height:1.2;letter-spacing:-.02em;
  text-transform:none;color:var(--ink);font-weight:700;padding-bottom:20px}

/* ---- Der Spieler ----
   Marcel: "noch mal so ein Play-Button, wo das Video sich so normal wie ein
   Videoplayer oeffnet." Dunkles Overlay, darin das Video mit der Bedienleiste
   des Browsers. Aufgebaut von assets/js/aqua-videobox.js, deshalb steht das
   Markup nicht in einem Widget. */
.aqua-videobox{position:fixed;inset:0;z-index:99999;display:none;
  align-items:center;justify-content:center;padding:clamp(16px,4vw,48px);
  background:rgba(8,12,8,.88);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.aqua-videobox.is-auf{display:flex}
.aqua-videobox__buehne{max-width:min(100%,560px);max-height:100%;display:flex}
.aqua-videobox__vid{width:100%;max-height:88vh;display:block;background:#000}
.aqua-videobox__zu{position:absolute;top:clamp(12px,2vw,24px);right:clamp(12px,2vw,24px);
  width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.10);color:#fff;font-size:26px;line-height:1;cursor:pointer;
  display:grid;place-items:center;padding:0}
.aqua-videobox__zu:hover{background:rgba(255,255,255,.2)}
/* Die Seite darunter darf nicht mitscrollen, solange der Spieler offen ist. */
html.aqua-videobox-offen{overflow:hidden}


/* Website-Knopf in den Abschluss-Abschnitten gruen einfaerben.
   aqua-baustein.css wird nicht auf jeder Seite geladen, deshalb hier. */
.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}

/* ---- Mosaik mit DREI Bildern (16.08.2026) ----------------------------
   Das Raster hat zwoelf Spalten: 7+5 oben, darunter Notiz 4 + Bild 4 +
   Bild 4. Faellt das vierte Bild weg, blieben unten vier Spalten leer.
   Deshalb bekommt die Notiz die frei gewordene Breite - der Text traegt
   hier ohnehin das Argument.
   Am Handy (<=880px) laeuft das Mosaik auf sechs Spalten und die Notiz
   steht schon auf voller Breite; dort ist nichts zu tun ausser den
   Zwoelfer-Wert zurueckzunehmen. */
.aqt--kurz .aqt__note{grid-column:span 8}
@media(max-width:880px){
  .aqt--kurz .aqt__note{grid-column:span 6}
}

/* ---- Kompakte Variantenliste (18.08.2026) ----------------------------
   Marcel zu "Was dazugehoert" bei Erd- und Betonarbeiten: "viel kompakter
   machen bzw. anders in den Abschnitt integrieren". Sechs Karten mit je
   34/32/40 px Innenabstand sind dort ein zweiter Abschnitt im Abschnitt -
   und der Inhalt ist eine Aufzaehlung, keine Auswahl.
   Kompakt heisst: keine Kartenflaechen, nur Zeilen mit Begriff und einem
   Satz, dafuer vier statt drei Spalten und deutlich weniger Hoehe. */
/* DREI Spalten, nicht vier. Beide Listen haben sechs Eintraege: bei vier
   Spalten steht die zweite Reihe halb leer und die Trennlinien laufen ins
   Nichts (in Marcels Browser bei 2560 px gesehen). Drei ergibt 3+3. */
.aqt__vgrid--kompakt{grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0 clamp(24px,3vw,48px);background:none;border-bottom:0}
.aqt__vgrid--kompakt .aqt__card{background:none;padding:20px 0 22px;
  border-top:1px solid var(--line)}
.aqt .aqt__vgrid--kompakt .aqt__ct{margin-top:0;font-size:18.5px;line-height:1.25}
.aqt .aqt__vgrid--kompakt .aqt__cd{margin-top:8px;font-size:16px;line-height:1.5}
@media(max-width:1000px){
  .aqt__vgrid--kompakt{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .aqt__vgrid--kompakt{grid-template-columns:1fr}
}

/* ---- Kartenliste in der Textluecke des Mosaiks (18.08.2026) ----------
   Marcel zu Erd- und Betonarbeiten: "das was dazugehoert koenntest du viel
   kompakter machen und dann da oben in die leere Flaeche rein tun."
   Die Notizzelle war senkrecht zentriert (align-items:center) - mit Text UND
   Liste darin muss sie oben beginnen, sonst schwimmt beides in der Mitte. */
.aqt__note--liste{align-items:start}
.aqt__note--liste > div{width:100%}
.aqt__note--liste .aqt__varianten{margin-top:28px}
.aqt .aqt__note--liste .aqt__vtitle{margin-top:0}
/* In der Luecke ist weniger Platz als unter dem Mosaik: zwei Spalten statt
   vier, und die Zeilen enger. */
.aqt__note--liste .aqt__vgrid--kompakt{grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(20px,2.4vw,36px)}
.aqt__note--liste .aqt__vgrid--kompakt .aqt__card{padding:14px 0 16px}
.aqt .aqt__note--liste .aqt__vgrid--kompakt .aqt__ct{font-size:17.5px}
.aqt .aqt__note--liste .aqt__vgrid--kompakt .aqt__cd{margin-top:6px;font-size:15.5px;line-height:1.5}
@media(max-width:880px){
  .aqt__note--liste .aqt__vgrid--kompakt{grid-template-columns:1fr}
}

/* ---- Spiegelverkehrte Bauform (18.08.2026) --------------------------
   Marcel: "mach den Terrassen- und Sitzplaetze-Abschnitt am besten auch
   komplett anders, also wie den Wege- und Pflasterflaechen-Abschnitt, nur
   spiegelverkehrt." Beide Abschnitte stehen auf derselben Seite - ohne die
   Spiegelung waeren es zwei identische Bauformen untereinander.
   Umgesetzt ueber order, nicht ueber direction:rtl: rtl wuerde auch die
   Textrichtung drehen und Satzzeichen an die falsche Seite setzen. */
.aqt--spiegel .aqt__headl{order:2}
.aqt--spiegel .aqt__lead{order:1}
/* Zeile 1 des Mosaiks: erst das kleine, dann das grosse Bild. */
.aqt--spiegel .aqt__f1{order:2}
.aqt--spiegel .aqt__f2{order:1}
/* Zeile 2: erst die Bilder, dann die Textluecke. */
.aqt--spiegel .aqt__f3{order:3}
.aqt--spiegel .aqt__f4{order:4}
.aqt--spiegel .aqt__note{order:5}
@media(max-width:880px){
  /* Am Handy steht ohnehin alles untereinander - dort ist die Spiegelung
     bedeutungslos und wuerde nur die Lesereihenfolge verdrehen. */
  .aqt--spiegel .aqt__headl,
  .aqt--spiegel .aqt__lead,
  .aqt--spiegel .aqt__f1,
  .aqt--spiegel .aqt__f2,
  .aqt--spiegel .aqt__f3,
  .aqt--spiegel .aqt__f4,
  .aqt--spiegel .aqt__note{order:0}
}