/* Pflanzenwelt: zwei Standbilder plus Karussell (11.08.2026)
   ---------------------------------------------------------------------------
   Ersetzt die drei gleich grossen Karten des alten Pflanzungen-Abschnitts.
   Marcel: "denk dir da ein cooles krasses elegantes konzept aus ... und
   bedenke keine leeren flaechen."

   Grundgedanke: links ein Hochformat ueber die volle Hoehe, rechts ein
   Querformat UND die Textgruppen. Die rechte Spalte fuellt sich damit selbst
   auf die Hoehe des Hochformats - egal wie lang der Text wird, es bleibt
   nichts leer stehen. Darunter das Karussell ueber die volle Breite.

   Bewusst KEIN Slider-Skript: scroll-snap kann der Browser selbst, das Rad
   und das Wischen funktionieren damit ueberall. Die Pfeile schieben nur die
   Spur weiter (siehe aqua-pflanzenwelt.js). Ohne JavaScript bleibt eine ganz
   normale scrollbare Reihe stehen. */

/* EIN gemeinsames Raster fuer beide Spalten, zwei Reihen. Die waagrechte Fuge
   ist damit fuer links und rechts DIESELBE Rasterlinie und kann nicht
   auseinanderlaufen - auch nicht bei anderen Bildformaten oder Textlaengen.
   Aufbau und Begruendung stehen im Widget (class-pp-pflanzenwelt-widget.php). */
.aqpw__buehne{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  grid-template-rows:auto auto;
  column-gap:clamp(16px,1.8vw,26px);
  row-gap:clamp(14px,1.5vw,22px);
  align-items:stretch;
  margin-top:clamp(28px,3vw,44px);
}
.aqpw__pos1{grid-column:1;grid-row:1}
.aqpw__pos2{grid-column:2;grid-row:1}
.aqpw__pos3{grid-column:1;grid-row:2}
.aqpw__pos4{grid-column:2;grid-row:2}
/* Nur EIN linkes Bild: es traegt beide Reihen, wie vor der Teilung. */
.aqpw__buehne:not(.aqpw__buehne--geteilt) .aqpw__pos1{grid-row:1 / 3}

.aqpw__rechts{
  display:grid;
  grid-template-rows:auto auto;
  gap:clamp(16px,1.8vw,26px);
  min-width:0;
  align-content:start;
}
/* Zwei kleine Bilder unter dem Querformat. Der Kran steht hier - er zeigt
   einen Arbeitsvorgang und darf die Flaeche nicht dominieren. */
.aqpw__klein{display:grid;gap:clamp(14px,1.5vw,22px)}
.aqpw__klein--n1{grid-template-columns:minmax(0,1fr)}
.aqpw__klein--n2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.aqpw__fig--klein{aspect-ratio:4/3}
.aqpw__cap--klein{left:10px;bottom:10px;padding:6px 12px;font-size:13.5px}

.aqpw__fig{position:relative;margin:0;overflow:hidden;background:#1b1b1b;min-width:0}

/* Der frueher hier stehende Wrapper .aqpw__links ist entfallen: die beiden
   linken Bilder sitzen jetzt direkt im Raster der Buehne, damit die Fuge mit
   der rechten Spalte auf derselben Linie liegt. Ein eigenes Unterraster
   teilte die Hoehe halbe-halbe und lief dadurch aus der Reihe. */

/* KEIN aspect-ratio auf den hohen Bildern.
   Die Kachel ist ein Rasterelement mit align-items:stretch. Sobald die rechte
   Spalte hoeher wird (Querformat + zwei kleine Bilder + Textgruppen), bekommt
   auch diese Kachel diese Hoehe - und aspect-ratio rechnet daraus dann die
   BREITE. Am 11.08.2026 waren das 809 px in einer 580 px breiten Spalte: das
   Bild lief nach rechts ueber und legte sich ueber die Textgruppen.
   min-height ist nur die Untergrenze, damit eine Reihe ohne Querformat nicht
   zusammenfaellt; die tatsaechliche Hoehe gibt die Rasterreihe vor. */
.aqpw__fig--hoch{width:100%;height:100%;min-height:clamp(180px,16vw,300px)}
/* ⚠️ Das Bild wird aus dem Fluss genommen.
   Gemessen am 17.08.2026: mit zwei Zeilen im linken Raster bestimmte das Bild
   die Zeilenhoehe MIT - `height:100%` in einer 1fr-Zeile ist zirkulaer und
   fiel auf die natuerliche Bildhoehe zurueck. Die Spalte wuchs dadurch von
   1.072 auf 1.504 px und zog den ganzen Abschnitt in die Laenge.
   Absolut gesetzt hat das Bild keine eigene Hoehe mehr: die Zeile gibt sie
   vor, das Bild fuellt sie. Gilt nur fuer --hoch; --quer und --klein tragen
   ihr Seitenverhaeltnis auf der figure und brauchen das nicht. */
.aqpw__fig--hoch img{position:absolute;inset:0}
.aqpw__fig--quer{aspect-ratio:16/10}
.aqpw__fig img{width:100%;height:100%;object-fit:cover;display:block}
.aqpw__cap{
  position:absolute;left:14px;bottom:14px;margin:0;padding:8px 15px;
  border-radius:999px;background:rgba(20,22,28,.55);color:#fff;
  font-size:16px;line-height:1.2;backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

/* Textgruppen: Trennlinien nur ZWISCHEN den Zeilen, nicht um jede herum. */
.aqpw__gruppen{margin:0;padding:0;display:grid;gap:0}
.aqpw__gruppe{
  display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);
  gap:6px 26px;padding:16px 0;border-top:1px solid var(--line,rgba(0,0,0,.12));
}
.aqpw__gruppe:first-child{border-top:0;padding-top:0}
.aqpw__gt{margin:0;font-weight:600;font-size:18px}
.aqpw__gd{margin:0;font-size:17.5px !important;line-height:1.6;opacity:.82}

/* ---- Karussell ---------------------------------------------------------- */
/* Steckt seit dem 17.08.2026 im gemeinsamen Bauteil: aqua-karussell.css und
   aqua-karussell.js, Auszeichnung in includes/class-aqua-karussell.php.
   Hier bleibt nur der Abstand nach oben - alles Weitere gilt fuer JEDEN
   Abschnitt, der das Karussell benutzt, und darf deshalb nicht hier stehen.

   Die frueheren Regeln (.aqpw__spur, .aqpw__karte, .aqpw__pfeil, .aqpw__kbody,
   .aqpw__knav) sind entfernt. Sie trugen unter anderem
   `scroll-behavior:smooth` auf der Spur - genau der Grund, warum sich das
   Karussell nicht ziehen liess: der Browser animierte jede Zuweisung an
   scrollLeft, das Bild lief der Maus hinterher statt an ihr zu kleben. */
.aqpw__karussell{margin-top:clamp(34px,3.6vw,56px)}

@media (max-width:900px){
  /* Eine Spalte, alles untereinander. Die Rasterplaetze werden aufgehoben,
     sonst blieben die Bloecke in zwei Spalten stehen; die Reihenfolge ergibt
     sich dann aus der Auszeichnung: Bild oben, Querformat, Bild unten, Rest. */
  .aqpw__buehne{grid-template-columns:1fr;grid-template-rows:auto}
  .aqpw__pos1,.aqpw__pos2,.aqpw__pos3,.aqpw__pos4,
  .aqpw__buehne:not(.aqpw__buehne--geteilt) .aqpw__pos1{grid-column:1;grid-row:auto}
  /* Untereinander bekommen die hohen Bilder ihr eigenes Seitenverhaeltnis. */
  .aqpw__fig--hoch{aspect-ratio:4/3;height:auto;min-height:0}
  .aqpw__gruppe{grid-template-columns:1fr;gap:2px}
  .aqpw__klein--n2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}