/* ---- Aquanatura Projekte (Uebersicht mit Filter) ----
 *
 * 1:1 uebernommen aus der HTML-Fassung der Seite Projekte (50140, Stand
 * 28.07.2026). Beim Umbau auf das echte Elementor-Widget aqua_projekte wurde
 * an den Regeln NICHTS geaendert, damit die Seite exakt gleich aussieht.
 */
.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%;margin:0;padding:0;color:var(--txt);
  font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
/* Der untere Innenabstand gilt nur am letzten Abschnitt. Seit der Aufteilung
   gibt es .aqp dreimal je Seite. */
.aqp--schluss{padding-bottom:clamp(56px,6vw,100px)}
.aqp :where(*){box-sizing:border-box}
.aqp :where(p,h2,h3,figure){margin:0;padding:0}
/* Kopf oben links, Einleitung darunter in ZWEI Spalten (03.08.2026).
   Vorher: Kopf links, Text rechts, dazu align-items:end - dadurch sass die
   Ueberschrift am UNTEREN Rand ihrer Spalte, waehrend der Text oben begann,
   und die beiden Absaetze standen untereinander statt nebeneinander. */
.aqp__intro{padding:clamp(48px,5vw,80px) 0 0}
/* Die Breitenbegrenzung gehoert an die Ueberschrift SELBST, nicht an ihre
   Huelle: ch rechnet mit der Schriftgroesse des Elements, und die Huelle hat
   16px statt 50px. Mit max-width am Wrapper brach der Titel bei 190px um. */
.aqp__introtext{margin-top:clamp(26px,3vw,44px);display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(30px,4vw,72px);align-items:start}
/* Unter 820px waeren die Spalten nur noch gut 350px breit - dann untereinander. */
@media(max-width:820px){
  .aqp__introkopf{max-width:none}
  .aqp__introtext{grid-template-columns:minmax(0,1fr);gap:20px}
}
.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;max-width:17ch}
.aqp .aqp__lead{font-size:19.5px;line-height:1.62;color:var(--txt);max-width:46ch}
/* ===================================================================
   PROJEKTFILTER als Schalter (24.08.2026)
   Vorher fuenf einzelne Pillen, die aktive schwarz gefuellt. Marcel wollte
   dieselbe Bauform wie den Kanalfilter im Abschnitt Aktuelles: ein Rahmen,
   ein wandernder gruener Reiter.

   Anders als dort sind die fuenf Beschriftungen verschieden lang. Ein
   Reiter mit fester Breite kann das nicht abbilden, deshalb setzt
   aqua-projekte.js Lage und Breite als --thumb-x / --thumb-w. Solange die
   Variablen fehlen (kein JavaScript, erster Frame), ist der Reiter
   durchsichtig und der aktive Knopf faerbt sich selbst gruen ein.
   =================================================================== */
.aqp__filter{margin-top:clamp(36px,4vw,56px);
  padding-bottom:clamp(28px,3vw,40px);border-bottom:1px solid var(--line)}

.aqp__schalter{position:relative;display:inline-flex;align-items:stretch;
  max-width:100%;padding:4px;gap:0;
  background:#f1f2ef;border:1px solid rgba(20,20,20,.10);border-radius:999px;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.aqp__schalter::-webkit-scrollbar{display:none}

/* Der Reiter faehrt, er blinkt nicht um: ease-out-quint ueber 420 ms,
   dieselbe Kurve wie im Abschnitt Aktuelles. */
.aqp__thumb{position:absolute;z-index:0;top:4px;bottom:4px;left:0;
  width:var(--thumb-w,0);transform:translateX(var(--thumb-x,0));
  border-radius:999px;background:var(--green,#4CA139);
  box-shadow:0 1px 2px rgba(30,72,20,.22),0 6px 16px rgba(30,72,20,.20);
  opacity:0;
  transition:transform .42s cubic-bezier(.22,1,.36,1),
             width .42s cubic-bezier(.22,1,.36,1),opacity .3s ease}
.aqp__schalter.ist-bereit .aqp__thumb{opacity:1}

.aqp__pill{position:relative;z-index:1;flex:0 0 auto;
  border:0;background:none;color:var(--mut,#636368);cursor:pointer;
  -webkit-appearance:none;appearance:none;white-space:nowrap;
  font-family:inherit;font-size:15.5px;font-weight:500;line-height:1;
  padding:12px 22px;border-radius:999px;
  transition:color .26s ease,transform .16s cubic-bezier(0.23,1,0.32,1)}
.aqp__pill:hover{color:var(--ink)}
/* Ohne JavaScript traegt der Knopf die Farbe selbst. Sobald der Reiter da
   ist, uebernimmt der sie und der Knopf wird nur noch weiss beschriftet. */
.aqp__pill.on{background:var(--green,#4CA139);color:#fff}
.aqp__schalter.ist-bereit .aqp__pill.on{background:none;color:#fff}
.aqp__pill:focus-visible{outline:3px solid var(--green,#4CA139);outline-offset:3px}
/* Der Knopf muss sich gedrueckt anfuehlen. Ohne diesen Zustand wirkt die
   Leiste tot - man klickt und die Flaeche selbst reagiert gar nicht.
   0.97 ist bewusst knapp: spuerbar, aber nicht albern. (21.08.2026) */
.aqp__pill:active{transform:scale(.97)}

/* Am Rechner gibt es den Auslöser nicht. */
.aqp__mtoggle{display:none}

/* ===================================================================
   HANDY: Auswahlfeld statt Schalter (24.08.2026)
   Marcel: "mir gefaellt die Filterauswahl auf dem Handy nicht, kannst du
   da ein komplett anderes System machen." Der Schalter scrollte dort
   seitlich weg, sichtbar waren anderthalb Knoepfe.

   Jetzt ein Feld, das den gewaehlten Filter zeigt und die Liste
   untereinander aufklappt. Kein Popup: eine aufklappende Liste braucht
   keine Ebene ueber der Seite, kein Sperren des Hintergrunds und keine
   Ruecktaste-Behandlung. Sie steht dort, wo man sie angetippt hat.
   =================================================================== */
@media(max-width:700px){
  .aqp__filter{position:relative}

  .aqp__mtoggle{display:flex;align-items:center;justify-content:space-between;
    gap:12px;width:100%;
    padding:15px 20px;border-radius:999px;
    background:#f1f2ef;border:1px solid rgba(20,20,20,.14);
    font-family:inherit;font-size:16px;font-weight:600;line-height:1;
    color:var(--ink);cursor:pointer;text-align:left;
    transition:border-color .25s ease,background .25s ease}
  .aqp__mtoggle[aria-expanded="true"]{border-color:var(--green);background:#fff}
  .aqp__mtoggle:focus-visible{outline:3px solid var(--green);outline-offset:3px}
  .aqp__mtoggle-p{flex:0 0 auto;color:var(--mut);
    transition:transform .34s cubic-bezier(.22,1,.36,1)}
  .aqp__mtoggle[aria-expanded="true"] .aqp__mtoggle-p{transform:rotate(180deg)}

  /* Die Liste faellt unter das Feld.
     Hier max-height und nicht grid-template-rows 0fr auf 1fr: die Technik
     traegt nur EIN Kind, hier sind es fuenf Knoepfe. 480px ist grosszuegig
     gewaehlt und deckt auch acht Filter ab; der Wert begrenzt nur die
     Bewegung, die tatsaechliche Hoehe bleibt der Inhalt. */
  .aqp__schalter{display:block;max-height:0;
    margin-top:0;padding:0;gap:0;overflow:hidden;
    background:none;border:0;border-radius:0;
    opacity:0;pointer-events:none;
    transition:max-height .38s cubic-bezier(.22,1,.36,1),
               opacity .28s ease,margin-top .38s cubic-bezier(.22,1,.36,1)}
  .aqp__schalter.ist-offen{max-height:480px;opacity:1;
    pointer-events:auto;margin-top:10px}
  /* Der wandernde Reiter ergibt untereinander keinen Sinn. */
  .aqp__thumb{display:none}

  .aqp__pill{display:block;width:100%;text-align:left;
    padding:14px 20px;border-radius:14px;font-size:16px;
    color:var(--ink);background:none}
  .aqp__pill.on,
  .aqp__schalter.ist-bereit .aqp__pill.on{background:var(--green);color:#fff}
}

@media(max-width:560px){
  .aqp__pill{font-size:15.5px}
}
@media(prefers-reduced-motion:reduce){
  .aqp__thumb{transition:opacity .01ms}
  .aqp__pill,.aqp__schalter,.aqp__mtoggle-p{transition:none}
}

/* position:relative traegt die ausgehenden Karten: aqua-projekte.js nimmt sie
   beim Filtern kurz aus dem Fluss (position:absolute) und laesst sie an ihrer
   alten Stelle ausfaden, waehrend die bleibenden Karten wandern. Ohne diesen
   Bezugspunkt saessen sie relativ zur ganzen Seite - also irgendwo. */
.aqp__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.5vw,36px);margin-top:clamp(28px,3vw,44px);
  position:relative}
/* Die Karten bekommen beim Filtern transform und opacity. Ein eigener
   Stapelkontext haelt die ausfadende Karte unter den nachrueckenden. */
.aqp__card{isolation:isolate}
.aqp__card{display:block;text-decoration:none;color:inherit;min-width:0}
.aqp__card.hide{display:none}
.aqp__frame{position:relative;width:100%;aspect-ratio:3/2;overflow:hidden;background:#ecedeb}
.aqp .aqp__img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;display:block;transition:opacity .18s ease}
.aqp__card:hover .aqp__img{opacity:.88}
.aqp .aqp__cat{margin-top:18px;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);font-weight:600}
.aqp /* Lange Zusammensetzungen duerfen umbrechen, sonst ragt z.B.
   "Fassadenbegruenung" bei 768px 6px aus der Kachel (gemessen 30.07.2026). */
.aqp__title{margin-top:8px;font-size:23px;line-height:1.25;letter-spacing:-.01em;color:var(--ink);font-weight:600;hyphens:auto;overflow-wrap:break-word}
.aqp__card:hover .aqp__title{text-decoration:underline;text-underline-offset:4px}
.aqp__cta{border-top:1px solid var(--line);margin-top:clamp(56px,6vw,90px);padding:clamp(64px,7vw,110px) 0 0;text-align:center}
.aqp__cta .aqp__kicker{justify-content:center}
.aqp__cta .aqp__h{margin-left:auto;margin-right:auto;max-width:18ch}
.aqp__cta .aqp__lead{margin:24px auto 0;text-align:center}
.aqp__ctabtns{margin-top:36px;display:flex;justify-content:center}
.aqp__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}
.aqp__btn:hover{background:#418c30}
.aqp__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}
.aqp .tp-btn-black.btn-green-light-bg .tp-btn-black-text,
.aqp .tp-btn-black.btn-green-light-bg .tp-btn-black-circle{background-color:#4CA139}
.aqp .tp-btn-black.btn-green-light-bg .tp-btn-black-text{color:#fff}
.aqp .tp-btn-black.btn-green-light-bg .tp-btn-black-circle svg{color:#fff}
.aqp.rv-on [data-rv]{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.aqp.rv-on [data-rv].rv-in{opacity:1;transform:none}
.aqp.rv-on [data-rv][data-rv-d="1"]{transition-delay:.1s}
.aqp.rv-on [data-rv][data-rv-d="2"]{transition-delay:.2s}
@media(prefers-reduced-motion:reduce){.aqp.rv-on [data-rv]{opacity:1!important;transform:none!important;transition:none!important}}
@media(max-width:1100px){.aqp__grid{grid-template-columns:1fr 1fr}}

/* Am Handy stehen die Projektkarten untereinander. Dann ist der Abstand
   ZWISCHEN zwei Karten (row-gap) genauso gross wie der Abstand INNERHALB einer
   Karte zwischen Bild und Beschriftung - gemessen 20px aussen gegen 18px innen,
   optisch 26 zu 24. Dadurch haengt jede Beschriftung gleich weit zwischen dem
   Bild darueber und dem darunter, und man sieht nicht mehr, was zusammengehoert.
   Aussen deutlich groesser als innen macht die Zuordnung wieder eindeutig. */
@media(max-width:700px){
  .aqp__grid{row-gap:56px}
}
@media(max-width:880px){.aqp__intro{grid-template-columns:1fr;gap:24px}}
@media(max-width:640px){.aqp__grid{grid-template-columns:1fr}}