/* ============================================================
   Aquanatura Projekt-Detailseite
   ------------------------------------------------------------
   Gehoert zum Widget aqua_projektseite (widgets/class-projektseite-widget.php)
   und traegt alle neun Projekt-Detailseiten (50299-50307).

   1:1 aus dem <style> der HTML-Fassung uebernommen. Das <style> war in allen
   neun Bloecken bytegleich (6126 Zeichen). Weggefallen sind nur vier Regeln:
   .aqe-lb, .aqe-lb.open, .aqe-lb img (die seiteneigene Lightbox) und
   [data-lb],.aqe__introwide{cursor:zoom-in}. Die Bild-Lightbox macht seit dem
   29.07.2026 aqua-lightbox.js fuer JEDES Inhaltsbild; der Lupenzeiger kommt
   von .aqua-lb-on. Die seiteneigene Lightbox lag INNERHALB von #smooth-content
   und wurde durch dessen transform zum 1440x5717-Overlay ueber der ganzen
   Seite - genau der in aqua-lightbox.css beschriebene Fehler.

   PRAEFIX .aqpd statt .aqe, und zwar bewusst:
   aqua-baustein.css belegt .aqe bereits. 42 Selektoren sind gemeinsam, davon
   drei ABWEICHEND (.aqe font-family, .aqe__introtext max-width 22ch statt
   26ch, .aqe.rv-on [data-rv] Distanz 24px statt 22px). Solange nie beide
   Widgets auf einer Seite liegen, passiert nichts - aber der Fehler waere
   spaeter kaum zu finden. Die Umbenennung ist rein mechanisch und aendert
   nichts am Aussehen.

   Die Klassen rv-on / rv-in / data-rv bleiben unveraendert: die setzt
   aqua-fade.js zentral ueber data-rv-wurzel an der Section.
   Der Strich am Abschnittskopf zieht sich beim Hereinscrollen auf - das macht
   die globale Regel in aqua-site.css ueber das Muster [class*="__kicker"].
   Deshalb muss die Klasse weiterhin auf "__kicker" enden.
   ============================================================ */

.aqpd__wrap{width:100%;max-width:1510px;margin-inline:auto;padding-inline:clamp(20px,4vw,40px)}
.aqpd{--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:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
/* Der untere Innenabstand gilt nur am letzten Abschnitt. Seit der Aufteilung
   gibt es .aqpd mehrfach je Seite. */
.aqpd--schluss{padding-bottom:clamp(56px,6vw,100px)}
.aqpd :where(*){box-sizing:border-box}
.aqpd :where(p,h2,h3,dl,dd,dt,figure,ul,li){margin:0;padding:0}
.aqpd__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: seit der
   Aufteilung in Abschnitts-Widgets steht jede Reihe allein in ihrer eigenen
   .aqpd-Huelle, :first-of-type haette danach auf JEDE Reihe gepasst.
   Sie hat vorher ohnehin nie gegriffen, weil .aqpd__intro das erste div unter
   seinen Geschwistern ist - nachgemessen auf der Live-Seite. */
.aqpd__row--flip .aqpd__media{order:2}
.aqpd__media{min-width:0}
.aqpd__hero{position:relative;width:100%;aspect-ratio:3/2;overflow:hidden;background:#ecedeb}
.aqpd .aqpd__himg{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;display:block}
.aqpd__sub{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.aqpd__sfig{min-width:0}
.aqpd__sframe{position:relative;width:100%;aspect-ratio:3/4;overflow:hidden;background:#ecedeb}
.aqpd .aqpd__simg{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;display:block}
/* Traegt die Layout-Automatik: EIN kleines Bild laeuft ueber beide Spalten und
   wechselt auf 3:2. Deshalb darf der Renderer nie ein leeres .aqpd__sfig
   ausgeben - :only-child zaehlt Geschwister. */
.aqpd__sub .aqpd__sfig:only-child{grid-column:1/-1}
.aqpd__sub .aqpd__sfig:only-child .aqpd__sframe{aspect-ratio:3/2}
.aqpd__text{min-width:0;max-width:540px}
.aqpd .aqpd__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}
.aqpd__kicker .aqpd__kdot{width:10px;height:10px;border-radius:50%;background:var(--green);flex:0 0 10px}
.aqpd .aqpd__kicker::after{content:"";height:1px;width:46px;flex:0 0 46px;margin-left:4px;background:rgba(20,20,20,.30)}
.aqpd__cta .aqpd__kicker{justify-content:center}
.aqpd .aqpd__h{margin-top:24px;font-size:clamp(32px,3.5vw,50px);line-height:1.06;letter-spacing:-.03em;
  color:var(--ink);font-weight:700}
.aqpd .aqpd__p{margin-top:28px;font-size:19.5px;line-height:1.62;color:var(--txt);max-width:46ch;font-weight:400}
.aqpd .aqpd__p + .aqpd__p{margin-top:20px}
.aqpd .aqpd__p b{color:var(--ink);font-weight:600}
.aqpd .aqpd__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)}
.aqpd__spec{display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);gap:8px 28px;
  padding:24px 0;border-bottom:1px solid var(--line)}
.aqpd .aqpd__dt{font-size:16px;line-height:1.5;color:var(--mut)}
.aqpd .aqpd__dd{font-size:18.5px;line-height:1.5;color:var(--ink);font-weight:500}
.aqpd__intro{padding:clamp(48px,5vw,80px) 0 clamp(8px,1vw,12px)}
/* 'Inter Tight' ist auf diesen Seiten NICHT geladen, der Einleitungssatz faellt
   gemessen auf 'Inter' zurueck. Das ist Bestand - nicht "reparieren", sonst
   aendert sich das Schriftbild der Einleitung. */
.aqpd__introtext{font-family:'Inter Tight','Inter',sans-serif;font-size:clamp(24px,2.4vw,34px);line-height:1.25;
  letter-spacing:-.02em;color:var(--ink);font-weight:600;max-width:26ch}
.aqpd__introwide{margin-top:clamp(32px,3.5vw,52px);position:relative;width:100%;aspect-ratio:5/2;
  overflow:hidden;background:#ecedeb}
.aqpd__introwide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.aqpd__more{border-top:1px solid var(--line);padding:clamp(44px,5vw,80px) 0}
.aqpd__moregrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.aqpd__mframe{position:relative;width:100%;aspect-ratio:3/2;overflow:hidden;background:#ecedeb}
.aqpd .aqpd__mimg{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;display:block}
/* Ein einzelnes Schlussbild laeuft ueber die volle Breite im Kinoformat. */
.aqpd__moregrid .aqpd__mframe:last-child:nth-child(odd){grid-column:1/-1;aspect-ratio:21/9}
.aqpd__cta{border-top:1px solid var(--line);padding:clamp(64px,7vw,110px) 0;text-align:center}
.aqpd__cta .aqpd__h{margin-left:auto;margin-right:auto;max-width:18ch}
.aqpd__cta .aqpd__ctalead{margin:24px auto 0;max-width:56ch;text-align:center;font-size:19px;line-height:1.62;color:var(--txt)}
.aqpd__ctabtns{margin-top:36px;display:flex;justify-content:center}
/* .aqpd__btn wird vom Markup NICHT benutzt (der CTA nimmt den Website-Knopf
   tp-btn-black). Steht 1:1 so in der HTML-Fassung und bleibt hier, damit die
   Datei nachweisbar deckungsgleich ist. Nicht als "toter Code" entfernen,
   ohne vorher den Pixelvergleich zu wiederholen. */
.aqpd__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}
.aqpd__btn:hover{background:#418c30}
.aqpd__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}
.aqpd__backlink{display:inline-block;margin-top:26px;font-size:16px;color:var(--mut);text-decoration:underline;text-underline-offset:4px}
.aqpd__backlink:hover{color:var(--ink)}
/* Website-Button grün wie im Header (Header-Regel verlangt .aqua-tp-header, greift im Content nicht) */
.aqpd .tp-btn-black.btn-green-light-bg .tp-btn-black-text,
.aqpd .tp-btn-black.btn-green-light-bg .tp-btn-black-circle{background-color:#4CA139}
.aqpd .tp-btn-black.btn-green-light-bg .tp-btn-black-text{color:#fff}
.aqpd .tp-btn-black.btn-green-light-bg .tp-btn-black-circle svg{color:#fff}
/* Eingangsanimation: sanftes Aufsteigen beim Sichtbarwerden, endet auf transform:none.
   Startzustand nur wenn JS die Klasse rv-on setzt, sonst bleibt Content immer sichtbar. */
.aqpd.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)}
.aqpd.rv-on [data-rv].rv-in{opacity:1;transform:none}
.aqpd.rv-on [data-rv][data-rv-d="1"]{transition-delay:.12s}
.aqpd.rv-on [data-rv][data-rv-d="2"]{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){.aqpd.rv-on [data-rv]{opacity:1!important;transform:none!important;transition:none!important}}
@media(max-width:880px){
  .aqpd__row{grid-template-columns:1fr;gap:32px;padding:38px 0}
  .aqpd__row--flip .aqpd__media{order:0}
  .aqpd__hero{aspect-ratio:4/3}
  .aqpd__text{max-width:none}
  .aqpd__moregrid{grid-template-columns:1fr}

  /* Das breite Einleitungsbild ist das ERSTE Bild der Projektseite. Bei 5:2
     bleiben davon am Handy gemessen 350x140px - beim Schwimmteich Holzdeck war
     nur ein Kiesstreifen zu sehen, das Motiv selbst gar nicht. Am Rechner
     bleibt 5:2, dort sind es 1360x544px und das Kinoformat wirkt.
     Gemessen am 30.07.2026 bei 390px. */
  .aqpd__introwide{aspect-ratio:16/9}

  /* Ein einzelnes Schlussbild lief im Kinoformat 21:9 ueber die ganze Breite.
     Bei 350px sind das 150px Hoehe. */
  .aqpd__moregrid .aqpd__mframe:last-child:nth-child(odd){aspect-ratio:16/9}
}

@media(max-width:560px){
  /* Eckdaten-Tabelle am Handy untereinander statt nebeneinander.
     Zweispaltig blieben fuer die Beschreibung nur 162px - "Geschwungenes
     Rasenband, Pflasterkreis und Wege, abgestimmt auf die runde Architektur."
     brach dort auf SIEBEN Zeilen um und sah aus wie ein Fehler. Am 29.07.2026
     im Handy-Screenshot gesehen und nachgemessen; Marcel: "auf der
     Handy-Ansicht muss alles perfekt aussehen."
     Am Rechner aendert sich nichts. Dieselbe Korrektur steht in
     aqua-baustein.css und aqua-planung.css. */
  .aqpd__spec{grid-template-columns:minmax(0,1fr);gap:5px 0;padding:20px 0}
  /* Die letzte Zeile der Tabelle ohne eigene Unterlinie: einspaltig gestapelt
     folgt darunter 37px spaeter die Trennlinie der naechsten Reihe - zwei
     Striche mit nichts dazwischen, auf allen neun Projektseiten (gemessen
     31.07.2026 bei 390px). Am Rechner sind es 117px, dort bleibt die Linie
     als unterer Abschluss der Tabelle stehen. Dieselbe Korrektur steht in
     aqua-planung.css, aqua-wasser.css und aqua-baustein.css. */
  .aqpd__spec:last-child{border-bottom:0}
  .aqpd .aqpd__dt{font-size:15px;letter-spacing:.02em}
  .aqpd .aqpd__dd{font-size:17px}

  /* Unter 560px noch eine Stufe hoeher: 16:9 sind bei 350px Breite 197px, das
     ist fuer das Aufmacherbild einer Projektseite zu wenig. 4:3 ergibt 263px. */
  .aqpd__introwide{aspect-ratio:4/3}
}

/* ---- Video (aqua_pd_video, Hochkant seit 03.08.2026 abends) -----------
   Marcel: Video links im originalen Hochformat 9:16, rechts Kicker, Titel
   und Text; der eigene Umsetzungs-Abschnitt ist dafuer entfallen. Aufbau
   und Rhythmus wie .aqpd__row, nur die Medienspalte ist schmaler, damit
   das stehende Video nicht turmhoch wird (430px breit = 764px hoch, das
   entspricht etwa einem Abschnitt mit grossem Bild plus Bildpaar). */
.aqpd__vrow{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)}
/* Marcel, 03.08. spaet: gleiches Layout wie die Abschnitte darueber - Text
   LINKS in seiner gewohnten Spalte, Video RECHTS. Gleiche Technik wie
   .aqpd__row--flip: das Medium steht im Markup vorn und wandert per order
   nach hinten, am Handy kommt es wieder zuerst. */
.aqpd__vmedia{min-width:0;order:2}
/* Das stehende Video fuellt seine Spalte nicht ganz - bei voller
   Spaltenbreite waere es ueber 1100px hoch. 480px breit = 853px hoch,
   das entspricht etwa dem Bildpaar im Abschnitt darueber. Es haelt die
   Fluchtlinie zur Textspalte, der Freiraum bleibt am Aussenrand. */
.aqpd__vfig{position:relative;margin:0;overflow:hidden;background:#0d110d;max-width:480px}
.aqpd__vmedia .aqpd__videozeile{max-width:480px}
/* Lupen-Zeiger wie auf den klickbaren Bildern (aqua-lightbox.css) - das
   Video oeffnet per Klick die grosse Ansicht. Gleicher Hover-Zoom 1.04
   wie dort: Andeutung, kein Effekt. */
.aqpd .aqpd__video{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;background:#0d110d;
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='0.55' stroke-width='4.5' stroke-linecap='round'%3E%3Ccircle cx='13' cy='13' r='9'/%3E%3Cline x1='19.5' y1='19.5' x2='28' y2='28'/%3E%3C/g%3E%3Cg fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='13' cy='13' r='9'/%3E%3Cline x1='19.5' y1='19.5' x2='28' y2='28'/%3E%3Cline x1='13' y1='9.5' x2='13' y2='16.5'/%3E%3Cline x1='9.5' y1='13' x2='16.5' y2='13'/%3E%3C/g%3E%3C/svg%3E") 13 13, zoom-in;
  transition:transform .6s cubic-bezier(.22,1,.36,1)}
@media(hover:hover) and (pointer:fine){.aqpd__vfig:hover .aqpd__video{transform:scale(1.04)}}
.aqpd .aqpd__videozeile{margin-top:14px;font-size:15px;line-height:1.5;color:#636368}
/* Grosse Ansicht: haengt wie die Bild-Lightbox direkt an <body> und nutzt
   deren Overlay-Klassen (.aqua-imglb). Nur das Video-Element selbst
   braucht eigene Masse - stehend, fast raumhoch. */
/* Breite fuehrt, Hoehe folgt dem Seitenverhaeltnis: eine feste 88vh-Hoehe
   wuerde am Handy mit max-width kollidieren und das Video seitlich
   beschneiden. min() nimmt am Rechner die Hoehe, am Handy die Breite. */
/* Seit 04.08.2026 ein echter Player (controls) - der Zeiger gehoert dem
   Video, nicht mehr dem Schliessen. */
.aqpd__vlbvideo{display:block;width:min(92vw,49.5vh);height:auto;aspect-ratio:9/16;
  object-fit:cover;background:#000;box-shadow:0 24px 70px rgba(0,0,0,.5);
  transform:scale(.96);transition:transform .3s cubic-bezier(.16,1,.3,1)}
.aqua-imglb.is-open .aqpd__vlbvideo{transform:scale(1)}
/* Querformat 16:9 (Widget-Einstellung "Format"). Das Video fuellt dann seine
   Spalte ganz aus - genau wie die Bilder in den Abschnitten darueber, die im
   selben Raster 3:2 laufen. Nur das stehende Format braucht die Bremse. */
.aqpd__vrow--quer .aqpd__vfig{max-width:none}
.aqpd .aqpd__vrow--quer .aqpd__video{aspect-ratio:16/9}
.aqpd__vrow--quer .aqpd__vmedia .aqpd__videozeile{max-width:none}
.aqpd__vlbvideo--quer{width:min(92vw,156vh);aspect-ratio:16/9}
@media(max-width:880px){
  .aqpd__vrow{grid-template-columns:1fr;gap:32px;padding:38px 0}
  /* Einspaltig bliebe das 9:16-Video sonst fensterhoch - auf 430px halten
     und mittig setzen, die Bildzeile wandert mit. order:0 stellt das Video
     wieder VOR den Text, wie bei den Bild-Abschnitten (--flip-Muster). */
  .aqpd__vmedia{max-width:430px;margin-inline:auto;width:100%;order:0}
  .aqpd__vfig{max-width:none}
  .aqpd__vmedia .aqpd__videozeile{max-width:none}
  /* Querformat darf am Handy die volle Breite nehmen. */
  .aqpd__vrow--quer .aqpd__vmedia{max-width:none}
}
@media(prefers-reduced-motion:reduce){
  .aqpd .aqpd__video{transition:none}
  .aqpd__vfig:hover .aqpd__video{transform:none}
  .aqpd__vlbvideo{transition:none}
}