/* Zieh-Karussell (17.08.2026) — wiederverwendbares Bauteil
   ===========================================================================
   Gehoert zu aqua-karussell.js. Absichtlich ohne jeden Bezug auf einen
   bestimmten Abschnitt, damit dasselbe Bauteil bei den Mauern, den Pflanzen
   und ueberall sonst eingesetzt werden kann.

   Der Grund fuer das Bauteil: wir haben tausende gute Bilder und zeigen pro
   Abschnitt drei bis vier. Ein Karussell traegt beliebig viele, kostet aber
   nur die Hoehe EINER Kachelreihe.

   ⚠️ HIER STEHT KEIN scroll-behavior.
   Vorher stand auf der Spur `scroll-behavior:smooth`. Damit animiert der
   Browser JEDE Zuweisung an scrollLeft - beim Ziehen lief das Bild der Maus
   dadurch hinterher statt an ihr zu kleben. Alles Gleiten macht jetzt das
   Skript mit einer Feder. Bitte nicht wieder eintragen. */

.aqk{
  --aqk-kachel:clamp(210px,21vw,272px);
  /* Groesse und Abstand der Pfeile setzt das SKRIPT (aqua-karussell.js), weil
     nur es den Seitenrand wirklich kennt.
     Der Versuch, das in CSS zu rechnen, ist zweimal schiefgegangen:
       · `(100vw - 100%) / 2` ueberschaetzt den Rand um die halbe
         Rollbalkenbreite - 100vw zaehlt den Rollbalken mit, 100% nicht.
       · Und `100%` bedeutet je Eigenschaft etwas anderes: bei `width` die
         BREITE des Elternkastens, bei `height` und `top` dessen HOEHE. Der
         Knopf war dadurch 34 breit und 46 hoch.
     Die Werte hier sind nur die Vorgabe, bis das Skript gemessen hat. */
  --aqk-pfeil:34px;
  --aqk-abstand:10px;
}

/* ---- Kopf: Titel links, Filter rechts ----------------------------------- */
.aqk__kopf{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:18px 24px;flex-wrap:wrap;margin-bottom:18px;
}
.aqk__titel{
  margin:0;font-size:clamp(21px,1.8vw,26px);font-weight:600;
  /* Grosse Schrift braucht engere Laufweite, sonst zerfaellt das Wortbild. */
  letter-spacing:-.01em;line-height:1.15;
}

.aqk__filter{display:flex;gap:8px;flex-wrap:wrap}
.aqk__chip{
  appearance:none;cursor:pointer;
  padding:7px 15px;border-radius:999px;
  border:1px solid var(--line,rgba(0,0,0,.16));
  background:transparent;color:inherit;
  font:inherit;font-size:14.5px;line-height:1.2;
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.aqk__chip:hover{border-color:var(--gruen,#5aa02c)}
.aqk__chip[aria-pressed="true"]{
  background:var(--gruen,#5aa02c);border-color:transparent;color:#fff;
}
.aqk__chip:focus-visible{outline:2px solid var(--gruen,#5aa02c);outline-offset:3px}

/* ---- Buehne: die Spur, Pfeile daneben in der Gasse ---------------------- */
/* Die Spur nimmt die VOLLE Layoutbreite ein, die Pfeile haengen absolut
   daneben - ausserhalb der Layoutbreite.
   Zwischenschritt am 17.08.2026 war ein dreispaltiges Raster; darin lagen die
   Pfeile INNERHALB der Breite und nahmen der Spur rund 120 px weg. Marcel:
   "die sollen aussen sein hab ich doch gesagt, die sind ausserhalb der
   layoutbreite halt dann." */
.aqk__buehne{position:relative}

.aqk__spur{
  overflow-x:auto;overflow-y:hidden;
  overscroll-behavior-x:contain;
  scrollbar-width:none;-ms-overflow-style:none;
  /* Die Affordanz. Vorher stand hier `auto` - es sah nicht ziehbar aus, also
     hat es niemand gezogen. */
  cursor:grab;
  /* Nichts markierbar, IMMER - nicht erst waehrend eines Zuges.
     Vorher stand user-select:none nur unter .aqk--zieht, also erst NACH der
     Totzone von 8 px. In diesen ersten Pixeln begann der Browser eine
     Textmarkierung auf dem Kachelnamen, und solange er markierte, kam kein
     Zug zustande: "im weissen leeren anklickt und haelt, dann passiert da
     nix" (Marcel, 17.08.2026). Die Namen sind Beschriftungen, niemand will
     sie kopieren. */
  user-select:none;-webkit-user-select:none;
}
.aqk__spur::-webkit-scrollbar{display:none}
/* ⚠️ Beim Klicken KEIN Rahmen.
   Marcel am 17.08.2026: "ganz am anfang beim ersten mal nutzen wird so ein
   komplett schwarze umrandung angezeigt." Ursache war der Fokusrahmen: das
   Skript setzte den Fokus beim Druck selbst, und darauf griff eine
   Fremdregel mit schwarzem outline. Das programmatische Fokussieren ist
   entfallen; zusaetzlich hier ausdruecklich abgeschaltet, damit keine andere
   Regel es wieder einschleppt.
   Der Rahmen fuer die TASTATUR bleibt - dort ist er notwendig. */
.aqk__spur:focus{outline:none}
.aqk__spur:focus-visible{outline:2px solid var(--gruen,#5aa02c);outline-offset:4px}
.aqk--zieht .aqk__spur{cursor:grabbing}

/* Am Finger scrollt der Browser selbst - dort darf er auch selbst einrasten.
   Bei Zeigergeraeten macht das Skript beides; zwei Systeme auf einer Spur
   wuerden sich bekaempfen. */
@media (hover:none){
  .aqk__spur{scroll-snap-type:x proximity;cursor:auto}
  .aqk__karte{scroll-snap-align:start}
}

.aqk__reihe{
  list-style:none;margin:0;padding:0;
  display:grid;grid-auto-flow:column;
  /* FESTE Kachelbreite. Mit minmax(0,1fr) verteilt das Raster die Kacheln auf
     die Containerbreite, sie schrumpfen, die Spur laeuft nie ueber - und dann
     gibt es nichts zu scrollen (aufgelaufen am 11.08.2026). */
  grid-auto-columns:var(--aqk-kachel);
  gap:clamp(12px,1.2vw,18px);
}
/* ⚠️ Hier darf KEIN transform stehen.
   Ein transform auf der Reihe verkleinert die scrollbare Breite des
   Behaelters - scrollWidth sinkt, das Maximum sinkt, und der Browser klemmt
   scrollLeft kleiner. Sichtbar war das als Zuruecklaufen beim Ziehen ueber das
   Ende hinaus (gemessen 17.08.2026: Zug ueber 500 px endete bei 238 statt
   358). Deshalb ist auch das frueher hier eingebaute Gummiband entfallen. */

/* ---- Kachel ------------------------------------------------------------- */
.aqk__karte{min-width:0}
.aqk__bild{
  position:relative;aspect-ratio:4/5;overflow:hidden;background:#1b1b1b;
}
.aqk__bild img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.6,.2,1);
  -webkit-user-drag:none;user-select:none;
}
.aqk__karte:hover .aqk__bild img{transform:scale(1.05)}
/* Beim Ziehen keinen Zoom: das Bild soll unter der Maus ruhig liegen. */
.aqk--zieht .aqk__karte:hover .aqk__bild img{transform:none}
.aqk--zieht .aqk__karte *{user-select:none;-webkit-user-select:none}

/* Zwei Zeilen, keine Beschreibung. Marcel: "was ich auch nicht brauche sind
   beschreibungen ... bzw. koennte man viel kompakter gestalten." */
/* opacity war .55 und damit zu blass ("der text von juni bis september da ist
   mir zu hellgrau das muss duenkler sein etwas", Marcel 17.08.2026).
   Jetzt eine eigene Farbe statt Transparenz: sie ist vorhersagbar und haengt
   nicht am Hintergrund. #5c625c auf Weiss ergibt Kontrast 6,2:1 - deutlich
   ueber der Grenze 4,5:1 fuer kleinen Text. */
.aqk__meta{
  margin:11px 0 2px;font-size:12.5px;line-height:1.2;
  letter-spacing:.07em;text-transform:uppercase;color:#5c625c;
}
.aqk__name{
  margin:0;font-size:17.5px;font-weight:600;line-height:1.25;
  letter-spacing:-.005em;
}

/* ---- Pfeile ------------------------------------------------------------- */
/* Sie stehen NEBEN der Spur, nicht darauf. Senkrecht sitzen sie auf halber
   BILDhoehe, nicht auf halber Kachelhoehe - unter dem Bild stehen noch zwei
   Textzeilen. Kachelbreite x 1.25 (aspect 4/5), davon die Haelfte, minus der
   halbe Knopf. */
.aqk__pfeil{
  position:absolute;z-index:2;
  /* Senkrecht auf halber BILDhoehe. translateY(-50%) statt einer Rechnung mit
     der Pfeilgroesse - so bleibt es richtig, egal welche Groesse das Skript
     setzt. aspect-ratio haelt den Knopf rund, auch gegen eine Fremdregel, die
     auf button eine Mindesthoehe setzt. */
  top:calc(var(--aqk-kachel) * .625);
  transform:translateY(-50%);
  width:var(--aqk-pfeil);height:auto;aspect-ratio:1;
  min-width:0;min-height:0;box-sizing:border-box;
  border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line,rgba(0,0,0,.14));
  background:#fff;
  color:#1b1f1a;font-size:0;line-height:0;padding:0;
  transition:transform .22s cubic-bezier(.2,.6,.2,1),opacity .22s ease,
             background .22s ease,border-color .22s ease,color .22s ease;
}
/* right/left auf 100% setzt den Knopf vollstaendig NEBEN die Buehne.
   --aqk-abstand ist der Luftspalt zum Bild; Marcel am 17.08.2026: "koenntest
   du bei den pfeilen ein kleines bisschen mehr abstand zum bild machen, weil
   das klebt etwas noch zu sehr." */
.aqk__pfeil--links{right:calc(100% + var(--aqk-abstand))}
.aqk__pfeil--rechts{left:calc(100% + var(--aqk-abstand))}
/* Reicht der Seitenrand nicht fuer einen brauchbaren Knopf, setzt das Skript
   diese Klasse - dann bleibt nur das Ziehen. Ein 18-px-Kringel waere
   schlechter als kein Knopf. */
.aqk--eng .aqk__pfeil{display:none}
.aqk__pfeil svg{width:calc(var(--aqk-pfeil) * .42);height:calc(var(--aqk-pfeil) * .42);display:block}
.aqk__pfeil:hover{background:var(--gruen,#5aa02c);border-color:transparent;color:#fff}
/* Rueckmeldung auf den DRUCK, nicht auf das Loslassen.
   translateY MUSS in jeder transform-Regel mitgeschrieben werden - sonst
   verliert der Knopf seine senkrechte Mitte, sobald er gedrueckt wird. */
.aqk__pfeil:active{transform:translateY(-50%) scale(.93)}
.aqk__pfeil:focus-visible{outline:2px solid var(--gruen,#5aa02c);outline-offset:3px}
/* Am Ende ausgegraut statt verschwunden: ein Knopf, der sich in Luft
   aufloest, kostet die Orientierung ("wo bin ich, was geht noch"). */
.aqk__pfeil[disabled]{
  opacity:.3;cursor:default;transform:translateY(-50%);
  background:#fff;border-color:var(--line,rgba(0,0,0,.14));color:#1b1f1a;
}
.aqk--fest .aqk__pfeil{display:none}

/* ---- Punkte unter dem Karussell ---------------------------------------- */
/* Ein Punkt je Seite, nicht je Kachel - bei 30 Bildern waeren 30 Punkte
   unlesbar. Das Skript legt sie an, weil ihre Zahl an Fensterbreite und
   Filter haengt. */
.aqk__punkte{
  display:flex;justify-content:center;align-items:center;
  gap:9px;margin-top:22px;
}
.aqk__punkte:empty{display:none}
.aqk--fest .aqk__punkte{display:none}
/* Feste Farbe statt var(--line): die Linienfarbe des Themes ist fuer Trennlinien
   gedacht und als Punkt zu blass. */
.aqk__punkt{
  appearance:none;padding:0;cursor:pointer;
  width:9px;height:9px;border-radius:50%;
  border:0;background:rgba(27,31,26,.3);
  transition:background .22s ease,transform .22s ease,width .22s ease;
}
.aqk__punkt:hover{background:rgba(27,31,26,.55)}
.aqk__punkt:focus-visible{outline:2px solid var(--gruen,#5aa02c);outline-offset:3px}
/* Die aktive Seite wird zum Strich - so ist sie auch ohne Farbunterschied
   erkennbar (wichtig bei prefers-contrast und fuer Farbsehschwaechen). */
.aqk__punkt[aria-current="true"]{
  width:24px;border-radius:999px;background:var(--gruen,#5aa02c);
}

/* Randmaske und Fortschrittsleiste: am 17.08.2026 auf Marcels Wunsch entfernt
   ("das mit dem verlauf gefaellt mir nicht so jetzt, und diese leiste da unten
   will ich auch nicht haben"). Dass es weitergeht, zeigt die angeschnittene
   naechste Kachel zusammen mit dem aktiven Pfeil. Bitte nicht wieder
   einbauen. */

/* ---- Handy und Tablet --------------------------------------------------- */
@media (max-width:900px){
  .aqk{--aqk-kachel:clamp(158px,44vw,210px)}
  .aqk__kopf{align-items:flex-start;flex-direction:column;gap:12px}
  /* Am Finger braucht es keine Pfeile, dort wird gewischt. Sie wuerden nur
     Bildflaeche verdecken. */
  .aqk__pfeil{display:none}
  .aqk__meta{font-size:11.5px;margin-top:9px}
  .aqk__name{font-size:16px}
  .aqk__punkte{margin-top:16px;gap:8px}
}

@media (max-width:520px){
  .aqk{--aqk-kachel:min(62vw,240px)}
}

/* ---- Weniger Bewegung -------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .aqk__karte:hover .aqk__bild img{transform:none}
  .aqk__pfeil,.aqk__chip{transition:none}
}
@media (prefers-contrast:more){
  .aqk__pfeil{border-color:#1b1f1a}
  .aqk__meta{color:#3a3f3a}
  .aqk__punkt{background:#6b716b}
}

/* ---- Schriftgroessen gegen die Theme-Regeln ---------------------------- */
/* Wie schon bei der Pflanzenwelt gemessen (11.08.2026): !important allein
   reicht nicht, es mischt ein Stylesheet mit, dessen Regeln sich per
   JavaScript nicht auslesen lassen. Deshalb Spezifitaet erhoehen - drei
   Klassen plus Typ schlagen jede p-Regel des Themes. */
.aqk .aqk__reihe .aqk__karte p.aqk__name{font-size:17.5px}
.aqk .aqk__reihe .aqk__karte p.aqk__meta{font-size:12.5px}
@media (max-width:900px){
  .aqk .aqk__reihe .aqk__karte p.aqk__name{font-size:16px}
  .aqk .aqk__reihe .aqk__karte p.aqk__meta{font-size:11.5px}
}

/* ---- Querformat-Karten (18.08.2026) ---------------------------------
   Mauern laufen im Bild waagrecht. Ein 4:5-Ausschnitt drueckt sie an den
   Rand oder schneidet sie ganz weg - an 13 Karten nachgesehen, drei waren
   danach nur noch Rasen und Hecke. Deshalb fuer solche Abschnitte breitere
   Kacheln im Querformat. Die Grundstellung (hochkant, Pflanzen) bleibt.
   Die Kachel ist breiter, damit die Reihe nicht flach wirkt: 360 x 240
   statt 272 x 340. */
.aqk--quer{--aqk-kachel:clamp(260px,26vw,360px)}
.aqk--quer .aqk__bild{aspect-ratio:3/2}
/* Der Pfeil steht auf halber BILDhoehe. Die Grundstellung rechnet mit
   4:5 (Faktor .625 = 1.25/2); bei 3:2 ist die halbe Hoehe .333 der
   Kachelbreite. Ohne diese Zeile haengen die Pfeile unter dem Bild. */
.aqk--quer .aqk__pfeil{top:calc(var(--aqk-kachel) * .333)}
@media(max-width:880px){
  .aqk--quer{--aqk-kachel:clamp(220px,52vw,300px)}
}
@media(max-width:560px){
  .aqk--quer{--aqk-kachel:min(76vw,300px)}
}

/* Eingestellte Kartenhoehe (Regler im Widget, 20.08.2026). Die Breite bleibt
   wie sie ist, nur die Hoehe steht fest - der Zuschnitt macht object-fit.
   Der Pfeil sitzt dann auf halber Bildhoehe, sonst haengt er daneben. */
.aqk--hoehe .aqk__bild{aspect-ratio:auto;height:var(--aqk-h)}
.aqk--hoehe .aqk__pfeil{top:calc(var(--aqk-h) / 2)}

/* Abstand des Karussells zum Abschnitt darueber. Bewusst NUR Abstand und
   keine Trennlinie: Marcel am 17.08.2026 - "das gehoert zum Abschnitt,
   nicht optisch abtrennen". */
.aqua-karussell{margin-top:clamp(34px,3.6vw,56px);margin-bottom:clamp(28px,3vw,44px)}