/* ---- Aquanatura Schaugarten ----
 *
 * 1:1 uebernommen aus der HTML-Fassung der Seite Schaugarten (50176, Stand
 * 29.07.2026). Beim Umbau auf das Elementor-Widget aqua_schaugarten wurde an
 * den Regeln NICHTS geaendert - kein Wert, kein Selektor, keine Reihenfolge.
 * Ab hier folgt der Inhalt des alten <style>-Blocks woertlich.
 */
/* ======================================================================
   Schaugarten. Layout-Bausteine 1:1 aus dem Gerdix-Template uebernommen
   (About-Block mit ueberlappender Kennzahl-Karte, Service-Karten, dunkler
   Feature-Block, Prozess-Kacheln 01-04, Who-we-are mit Zitatkarte,
   Zwei-Ton-Ueberschrift), aber in der Aquanatura-Sprache ausgefuehrt:
   hell und neutral, Inter, scharfe Ecken, Gruen NUR als Punkt und Button.
   Typo- und Linienwerte kommen aus dem aqe-Block der Seiten 50015/50016.
   ====================================================================== */
.aqs{--ink:#111013;--txt:#141414;--mut:#636368;--line:rgba(20,20,20,.14);--green:#4CA139;
  --paper:#f4f6f3;--dark:#12170f;
  width:100%;color:var(--txt);font-family:inherit;-webkit-font-smoothing:antialiased}
.aqs :where(*){box-sizing:border-box}
.aqs :where(p,h2,h3,h4,dl,dd,dt,figure,ul,ol,li){margin:0;padding:0}
/* Der Elementor-Container dieser Seite steht auf "full", damit der dunkle
   Abschnitt und das Video ueber die ganze Bildschirmbreite laufen. Die
   normalen Abschnitte holen sich die Breite aus derselben Variable, die
   Elementor fuer seine Boxed-Container nutzt (1510/1140/960 je Breakpoint),
   damit sie exakt so breit sind wie auf den anderen Seiten. */
.aqs__wrap{--aqs-pad:clamp(20px,4vw,40px);width:100%;
  max-width:calc(var(--container-max-width,1510px) + var(--aqs-pad)*2);
  margin-inline:auto;padding-inline:var(--aqs-pad)}

/* Eingangsanimation (das globale Plugin-Fade erfasst HTML-Widgets nicht) */
.aqs [data-rv]{transition:opacity .75s cubic-bezier(.22,.61,.36,1),transform .75s cubic-bezier(.22,.61,.36,1)}
.aqs.rv-on [data-rv]{opacity:0;transform:translateY(24px)}
.aqs.rv-on [data-rv].rv-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .aqs.rv-on [data-rv],.aqs.rv-on [data-rv].rv-in{opacity:1;transform:none;transition:none}
}

/* Grundelemente */
.aqs .aqs__eyebrow{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}
.aqs__eyebrow .aqs__dot{width:10px;height:10px;flex:0 0 10px;border-radius:50%;background:var(--green)}
.aqs .aqs__eyebrow::after{content:"";height:1px;width:46px;flex:0 0 46px;margin-left:4px;background:rgba(20,20,20,.30)}
.aqs .aqs__h{margin-top:24px;font-size:clamp(32px,3.5vw,50px);line-height:1.06;letter-spacing:-.03em;
  color:var(--ink);font-weight:700}
/* Zwei-Ton-Ueberschrift aus Gerdix: zweiter Teil zurueckgenommen.
   Deckkraft am 31.07.2026 von .34 auf .47 angehoben. Bei .34 ergab das auf
   Weiss effektiv rgb(174,174,175) und damit 2,22:1 - unter dem Mindestwert
   von 3:1 fuer grosse Schrift, am Handy im Hellen war die halbe Ueberschrift
   kaum zu lesen (Handy-Durchgang 30.07.2026, schaugarten-04). Jetzt
   rgb(143,143,144) und 3,2:1. Der Zwei-Ton-Effekt bleibt deutlich: der
   dunkle Teil steht bei 19:1. */
.aqs .aqs__h .aqs__fade{color:rgba(17,16,19,.47)}
.aqs .aqs__p{margin-top:26px;font-size:19.5px;line-height:1.62;color:var(--txt);max-width:46ch;font-weight:400}
.aqs .aqs__p + .aqs__p{margin-top:18px}
.aqs__sec{padding:clamp(48px,5.5vw,92px) 0;border-top:1px solid var(--line)}
.aqs__sec--plain{border-top:0}
.aqs__row[id],.aqs__sec[id]{scroll-margin-top:120px}

/* Kopfzeile zweispaltig (Gerdix section-heading + Text rechts) */
.aqs__head{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(24px,4vw,80px);align-items:end}

/* --- Baustein A: About mit ueberlappender Kennzahl-Karte ---------------- */
.aqs__about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,3.4vw,60px) clamp(32px,4vw,80px);align-items:start}
.aqs__figure{position:relative;width:100%;overflow:hidden;background:#ecedeb}
.aqs__figure img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;display:block}
.aqs__figure--wide{aspect-ratio:16/10}
.aqs__figure--band{aspect-ratio:21/9}
.aqs__figure--tall{aspect-ratio:4/3}
.aqs__badgewrap{position:relative}
.aqs__badge{position:absolute;left:0;bottom:0;background:#fff;padding:22px 30px 24px;
  box-shadow:0 18px 46px rgba(0,0,0,.16);max-width:min(78%,320px)}
.aqs .aqs__badgenum{font-size:clamp(34px,3.4vw,48px);line-height:1;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.aqs .aqs__badgetxt{margin-top:10px;font-size:15.5px;line-height:1.4;color:var(--mut)}
/* Eckdaten unter der Startueberschrift, damit dort keine leere Flaeche steht */
.aqs__facts2{margin-top:36px;border-top:1px solid var(--line)}
.aqs__fact2{display:grid;grid-template-columns:minmax(0,110px) minmax(0,1fr);gap:8px 24px;
  padding:18px 0;border-bottom:1px solid var(--line)}
.aqs .aqs__fact2dt{font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);font-weight:600}
.aqs .aqs__fact2dd{font-size:17.5px;line-height:1.5;color:var(--ink);font-weight:500}

.aqs__checks{margin-top:34px;display:grid;grid-template-columns:1fr 1fr;gap:14px 28px}
.aqs__check{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start}
.aqs .aqs__checkico{width:22px;height:22px;border-radius:50%;background:rgba(76,161,57,.14);color:var(--green);
  display:grid;place-items:center;font-size:12px;font-style:normal;line-height:1}
.aqs .aqs__checktxt{font-size:16.5px;line-height:1.45;color:var(--ink);font-weight:500}
.aqs__btnrow{margin-top:34px;display:flex}

/* --- Video randlos ----------------------------------------------------- */
.aqs__videosec{position:relative;width:100%;background:#0d110d;overflow:hidden;aspect-ratio:16/7}
.aqs__videosec video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Rueckfall-Knopf, erscheint nur wenn der Browser Autoplay blockiert */
.aqs__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:inline-flex;align-items:center;gap:14px;padding:16px 26px;border:0;cursor:pointer;
  background:rgba(255,255,255,.94);color:#141414;font-family:inherit;font-size:16px;font-weight:600;
  box-shadow:0 14px 40px rgba(0,0,0,.28)}
.aqs__play[hidden]{display:none}
.aqs__playico{color:var(--green);font-size:14px;line-height:1}
@media(max-width:880px){.aqs__videosec{aspect-ratio:4/3}}


/* --- Baustein D: Prozess-Kacheln 01 bis 04 ----------------------------- */
.aqs__steps{margin-top:clamp(36px,4vw,60px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(16px,1.6vw,24px)}
.aqs__step{background:var(--paper);padding:clamp(24px,2.2vw,34px)}
.aqs .aqs__stepnum{width:46px;height:46px;border-radius:50%;border:1px solid rgba(20,20,20,.22);
  display:grid;place-items:center;font-size:15px;font-weight:600;color:var(--ink)}
.aqs .aqs__steptitle{margin-top:24px;font-size:20px;line-height:1.2;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.aqs__step hr{margin:18px 0 0;border:0;border-top:1px solid rgba(20,20,20,.16)}
.aqs .aqs__stepp{margin-top:18px;font-size:16px;line-height:1.55;color:var(--mut)}
.aqs__step:first-child .aqs__stepnum{background:var(--green);border-color:var(--green);color:#fff}

/* --- Baustein B: Service-Karten ---------------------------------------- */
/* Sonderfall EINE Karte (seit Edith nur noch die Innenraumbegruenung zeigt,
   03.08.2026): eine einzelne schmale Kachel in einem Dreierraster liess zwei
   Drittel der Breite leer. Ein Einzelkind wird deshalb zum Bild-Text-Paar
   ueber die volle Breite. Mit mehreren Karten bleibt alles wie gehabt. */
/* EINE Karte, ganz schlicht (04.08.2026, dritte Fassung):
   Text links, das eine hochformatige Bild rechts, beide exakt gleich hoch.

   Weg dahin: 16:10 zeigte von einem 788x1400-Foto nur einen Streifen. Ein
   3:4-Rahmen ueber die halbe Breite stellte es zwar aufrecht, war dann aber
   700px hoch neben 100px Text - eine riesige leere Flaeche, genau das, was
   hier nie entstehen soll. Marcel: "macht da ein komplett neues Layout,
   ganz, ganz simples Abschnitt-Design" und "nur das eine Bild".

   Loesung ohne festes Seitenverhaeltnis: die Bildspalte ist schmal (28 %),
   das Bild fuellt per height:100% GENAU die Hoehe des Textes daneben. Damit
   gibt es links wie rechts keine Restflaeche, egal wie lang der Text ist. */
/* Zwei gleich hohe Bloecke: das eine hochformatige Bild links in seinem
   ECHTEN Seitenverhaeltnis (788x1400), rechts die Textflaeche auf hellem
   Grund. Beide Spalten sind gleich hoch, dadurch wirkt der Abschnitt wie ein
   Paar und nicht wie ein Bild mit Restflaeche daneben.

   Zwei Sackgassen davor: 16:10 zeigte von dem Hochformat nur einen Streifen,
   und height:100% ohne Seitenverhaeltnis machte das Bild bei kurzem Text zu
   einem flachen Band. Deshalb hier das echte Verhaeltnis plus eine schmale
   Bildspalte - so bleibt die Hoehe im Rahmen. */
.aqs__cards > .aqs__card:only-child{grid-column:1/-1;display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr);gap:clamp(32px,4vw,60px);align-items:center;background:none}
.aqs__cards > .aqs__card:only-child .aqs__cardbody{background:transparent;padding:0;order:1;
  display:flex;flex-direction:column;justify-content:center}
.aqs__cards > .aqs__card:only-child .aqs__cardtitle{font-size:clamp(26px,2.6vw,38px);line-height:1.14;
  font-weight:700;letter-spacing:-.02em;color:var(--ink);margin-bottom:20px}
.aqs__cards > .aqs__card:only-child .aqs__cardp{font-size:19.5px;line-height:1.65;color:var(--txt);font-weight:400}
.aqs__cards > .aqs__card:only-child .aqs__cardimg{order:2;aspect-ratio:3/4;min-height:520px;height:100%;background:#ecedeb}
.aqs__cards > .aqs__card:only-child .aqs__cardimg img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:880px){
  .aqs__cards > .aqs__card:only-child{grid-template-columns:1fr}
  .aqs__cards > .aqs__card:only-child .aqs__cardbody{order:1}
  .aqs__cards > .aqs__card:only-child .aqs__cardimg{order:2;aspect-ratio:4/3;min-height:300px}
}

/* Wintergarten & Innenraumbegrünung: linke Textspalte / rechts Hochformat-Bild von oben */
.aqs__wintergarten-new{padding-top:clamp(60px,7vw,120px)}

.aqs__wg-outer{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.7fr);
  gap:clamp(40px,5vw,80px);
  align-items:start
}

.aqs__wg-left{display:flex;flex-direction:column;gap:clamp(28px,3vw,48px)}

.aqs__wg-header .aqs__wg-intro{margin-top:20px;font-size:19px;line-height:1.65;color:var(--txt);max-width:52ch}

.aqs__wg-imgcol{position:sticky;top:clamp(40px,5vw,80px)}
.aqs__wg-mainfig{position:relative;width:100%;aspect-ratio:3/4;overflow:hidden;background:#ecedeb;margin:0}
.aqs__wg-mainfig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

.aqs__wg-cardinner{display:flex;flex-direction:column;gap:16px}
.aqs__wg-cardtitle{font-size:clamp(22px,2.2vw,32px);line-height:1.15;font-weight:700;letter-spacing:-.02em;color:var(--ink);margin:0}
.aqs__wg-cardp{font-size:18.5px;line-height:1.65;color:var(--txt);font-weight:400;margin:0}

@media(max-width:800px){
  .aqs__wg-outer{grid-template-columns:1fr}
  .aqs__wg-imgcol{position:static;order:-1}
  .aqs__wg-mainfig{aspect-ratio:3/4;max-height:480px}
}

.aqs__cards{margin-top:clamp(36px,4vw,60px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2vw,30px)}
.aqs__card{background:var(--paper);display:flex;flex-direction:column}
.aqs__cardimg{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;background:#ecedeb}
.aqs__cardimg img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;display:block}
.aqs__cardbody{padding:clamp(22px,2vw,30px)}
.aqs .aqs__cardtitle{font-size:21px;line-height:1.2;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.aqs .aqs__cardp{margin-top:14px;font-size:16.5px;line-height:1.6;color:var(--mut)}

/* --- Baustein C: dunkler Feature-Block --------------------------------- */
.aqs__dark{position:relative;background:var(--dark);overflow:hidden}
.aqs__darkbg{position:absolute;inset:0;opacity:.15}
.aqs__darkbg img{width:100%;height:100%;object-fit:cover;display:block}
.aqs__darkbg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,23,15,.45),rgba(18,23,15,.80))}
.aqs__darkin{position:relative;padding:clamp(52px,5.5vw,96px) 0}
.aqs__darkgrid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(32px,4vw,80px);align-items:center}
.aqs__dark .aqs__eyebrow{color:rgba(255,255,255,.82)}
.aqs__dark .aqs__eyebrow::after{background:rgba(255,255,255,.34)}
.aqs__dark .aqs__h{color:#fff}
.aqs__dark .aqs__p{color:rgba(255,255,255,.80)}
.aqs__darkpts{margin-top:clamp(34px,3.4vw,52px);display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(22px,2.4vw,38px) clamp(28px,3vw,56px)}
.aqs__darkpt{border-top:1px solid rgba(255,255,255,.20);padding-top:20px}
.aqs .aqs__darkptt{font-size:19px;line-height:1.25;font-weight:600;color:#fff}
.aqs .aqs__darkptp{margin-top:10px;font-size:16px;line-height:1.55;color:rgba(255,255,255,.72)}
/* Karte bleibt weiss: Gruen ist auf dieser Website nur fuer Buttons da. */
.aqs__dark .aqs__badge{background:#fff}

/* --- Baustein F: Who-we-are mit Zitatkarte ------------------------------ */
.aqs__quote{position:absolute;right:0;bottom:0;background:#fff;padding:26px 30px;
  box-shadow:0 18px 46px rgba(0,0,0,.16);max-width:min(80%,360px)}
.aqs .aqs__quotetxt{font-size:18px;line-height:1.45;font-weight:600;color:var(--ink)}
.aqs .aqs__quotesub{margin-top:12px;font-size:15.5px;line-height:1.45;color:var(--mut)}
.aqs__hours{margin-top:36px;border-top:1px solid var(--line)}
.aqs__hourrow{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:8px 28px;
  padding:20px 0;border-bottom:1px solid var(--line)}
.aqs .aqs__hourdt{font-size:16px;line-height:1.5;color:var(--mut)}
.aqs .aqs__hourdd{font-size:18.5px;line-height:1.5;color:var(--ink);font-weight:500}

/* --- Zahlen und Fakten -------------------------------------------------- */
.aqs__facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2.4vw,40px)}
.aqs__fact{border-top:1px solid var(--line);padding-top:22px}
.aqs .aqs__factnum{font-size:clamp(34px,3.6vw,52px);line-height:1;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.aqs .aqs__factlbl{margin-top:14px;font-size:16.5px;line-height:1.5;color:var(--mut)}

/* --- CTA ---------------------------------------------------------------- */
.aqs__cta{text-align:center;padding:clamp(64px,7vw,110px) 0;border-top:1px solid var(--line)}
.aqs__cta .aqs__eyebrow{justify-content:center}
.aqs__cta .aqs__h{margin-left:auto;margin-right:auto;max-width:18ch}
.aqs__cta .aqs__p{margin-left:auto;margin-right:auto;max-width:56ch;text-align:center}
.aqs__cta .aqs__btnrow{justify-content:center}

/* Website-Button: die Theme-Regel greift nur unter .aqua-tp-header */
.aqs .tp-btn-black.btn-green-light-bg .tp-btn-black-text,
.aqs .tp-btn-black.btn-green-light-bg .tp-btn-black-circle{background-color:#4CA139}
.aqs .tp-btn-black.btn-green-light-bg .tp-btn-black-text{color:#fff}
.aqs .tp-btn-black.btn-green-light-bg .tp-btn-black-circle svg{color:#fff}

@media(max-width:1080px){
  .aqs__steps{grid-template-columns:1fr 1fr}
  .aqs__cards{grid-template-columns:1fr}
  .aqs__facts{grid-template-columns:1fr 1fr}
}
@media(max-width:880px){
  .aqs__about,.aqs__head,.aqs__darkgrid{grid-template-columns:1fr;gap:28px}
  .aqs__darkpts,.aqs__checks{grid-template-columns:1fr}
  .aqs__badge,.aqs__quote{position:static;max-width:none;margin-top:-1px;box-shadow:none;
    border:1px solid var(--line)}
  .aqs__dark .aqs__badge{border-color:transparent}
  .aqs__hourrow{grid-template-columns:1fr}

  /* Das Kinoformat 21:9 laesst am Handy gemessen 350x150px uebrig. Das Foto
     dahinter (aquanatura-sg-haus-terrasse.jpg) ist 1400x1050, also 4:3 - bei
     21:9 werden davon knapp zwei Drittel der Hoehe weggeschnitten, vom Haus
     bleibt ein Streifen. 16:9 bringt bei 738px Breite 415px Hoehe.
     Gemessen am 30.07.2026. */
  .aqs__figure--band{aspect-ratio:16/9}
}
@media(max-width:560px){
  .aqs__steps,.aqs__facts{grid-template-columns:1fr}
  .aqs__fact2{grid-template-columns:1fr;gap:4px}

  /* 4:3 entspricht genau dem Seitenverhaeltnis der Vorlage: kein Beschnitt. */
  .aqs__figure--band{aspect-ratio:4/3}
}

/* ======================================================================
   02.08.2026 - Rueckmeldungen des Kunden
   ====================================================================== */

/* Edith: "Bereich zu dunkel". Der Wassergarten-Abschnitt behaelt Aufbau und
   Hintergrundbild, bekommt aber die helle Fassung der uebrigen Seite.
   Der Klassenname aqs__dark ist historisch - er steckt im Widget-Markup und in
   den gespeicherten Elementor-Daten, deshalb sind nur die Farben getauscht.
   Das Hintergrundbild bleibt, jetzt mit hellem statt dunklem Schleier, damit
   der Abschnitt nicht flach wird. */
.aqs__dark{background:var(--paper);border-top:1px solid var(--line)}
/* 03.08.2026, Marcel: Hintergrundbild raus ("unnoetig") und die zwei Spalten
   auf 50/50 - das Bild links war ihm zu klein, der Textblock zu breit.
   Das Feld wassergarten_hintergrund ist geleert; display:none faengt alte
   gespeicherte Staende ab, bis sie neu gespeichert sind. */
.aqs__darkbg{display:none}
.aqs__darkgrid{grid-template-columns:1fr 1fr}
.aqs__dark .aqs__eyebrow{color:var(--mut)}
.aqs__dark .aqs__eyebrow::after{background:var(--line)}
.aqs__dark .aqs__h{color:var(--ink)}
.aqs__dark .aqs__p{color:var(--mut)}
.aqs__darkpt{border-top:1px solid var(--line)}
.aqs .aqs__darkptt{color:var(--ink)}
.aqs .aqs__darkptp{color:var(--mut)}
/* Die weisse Zahlenkarte braucht auf hellem Grund eine Kante, sonst schwimmt sie. */
.aqs__dark .aqs__badge{background:#fff;border:1px solid var(--line)}

/* Aufschrift und Abspiel-Knopf im Video. Der Verlauf ist Pflicht, nicht Zierde:
   das Drohnenvideo hat helle Himmelsflaechen, auf denen weisse Schrift sonst
   verschwindet. Er liegt nur oben und unten, damit die Bildmitte frei bleibt. */
.aqs__videoover{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:clamp(14px,1.6vw,22px);
  padding:clamp(24px,4vw,56px);text-align:center;pointer-events:none;
  /* Zwei Schichten. Der senkrechte Verlauf haelt Ober- und Unterkante ruhig, die
     weiche Platte in der Mitte sichert den Text ab. Gemessen am 02.08. gegen die
     ECHTEN Bildpunkte des laufenden Videos: mit dem Verlauf allein fiel die
     Kleinzeile an den hellsten Stellen (Himmel) auf 2,67:1, noetig sind 4,5.
     Die Platte laeuft nach aussen aus, damit das Bild an den Raendern frei bleibt. */
  /* 11.08.2026, Marcel: "beim schaugarten video abschnitt will ich auch dass
     der hintergrund nicht so krass dunkel ist". Bewusst UNGLEICH gesenkt: die
     Raender (linearer Verlauf) deutlich, die Platte in der Mitte nur moderat -
     sie ist es, die den Text traegt. Die oben vermerkte Messung von 2,67:1 galt
     fuer den Verlauf OHNE Platte; die bleibt mit .46 klar auf der sicheren
     Seite. */
  background:
    radial-gradient(ellipse 72% 62% at 50% 50%, rgba(8,12,8,.46) 0%, rgba(8,12,8,.26) 52%, rgba(8,12,8,0) 100%),
    linear-gradient(180deg,rgba(10,14,10,.24) 0%,rgba(10,14,10,.06) 38%,rgba(10,14,10,.06) 62%,rgba(10,14,10,.30) 100%)}
/* 04.08.2026, Marcel: "Titel und Untertitel viel groesser". Kicker von 12
   auf bis 19px, Titel von maximal 52 auf bis 84px - die Aufschrift traegt
   den Abschnitt, das Video ist Buehne. */
.aqs .aqs__videokicker{margin:0;font-size:clamp(14px,1.25vw,19px);font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.9)}
.aqs .aqs__videoh{margin:0;max-width:18ch;font-size:clamp(34px,5.4vw,84px);line-height:1.06;
  font-weight:700;letter-spacing:-.02em;color:#fff;text-wrap:balance;
  text-shadow:0 2px 24px rgba(0,0,0,.35)}
.aqs__videobtn{pointer-events:auto;display:inline-flex;align-items:center;gap:11px;
  margin-top:4px;padding:13px 24px 13px 18px;border:0;border-radius:999px;cursor:pointer;
  background:var(--green);color:#fff;font:inherit;font-size:15px;font-weight:600;
  box-shadow:0 10px 30px -12px rgba(0,0,0,.55);transition:transform .18s ease,filter .18s ease}
.aqs__videobtn:hover{transform:translateY(-1px);filter:brightness(1.07)}
.aqs__videobtn:focus-visible{outline:3px solid #fff;outline-offset:3px}
.aqs__videobtnico{display:grid;place-items:center;width:26px;height:26px;border-radius:999px;
  background:rgba(255,255,255,.22);font-size:11px;padding-left:2px}
/* Die drei Punkte unter dem Knopf (03.08.2026). Sie sind der Ersatz fuer den
   entfallenen Rundgang-Abschnitt und sagen in drei Zeilen, was man hier tun kann.
   Bewusst SCHMAL (max 62ch): der Verlauf hinter dem Text laeuft nach aussen aus,
   weit gezogene Zeilen laegen im hellen Bereich und waeren auf den
   Himmelsstellen des Videos nicht mehr lesbar.
   Die Zahl steht als eigene kleine Zeile darueber, nicht als Kreis wie bei den
   Prozess-Kacheln - auf bewegtem Bild ist jede zusaetzliche Flaeche Unruhe. */
/* 03.08. abends, Marcel: "nur die Titel, keine Beschreibungen, und das Ganze
   viel groesser". Die Textfelder sind geleert, die Titel tragen jetzt allein -
   deshalb fast Ueberschriften-Groesse und mehr Luft. */
/* 04.08.2026, Marcel: die Punkte mittig statt linksbuendig - Zahl und Titel
   stehen zentriert unter ihrer Trennlinie, wie die Aufschrift darueber. */
.aqs__vpunkte{list-style:none;margin:clamp(10px,1.6vw,24px) 0 0;padding:0;
  width:min(100%,84ch);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,3vw,56px);text-align:center}
.aqs__vpunkt{display:flex;flex-direction:column;align-items:center;gap:9px;
  padding-top:14px;border-top:1px solid rgba(255,255,255,.38)}
.aqs .aqs__vpnum{font-size:14px;font-weight:700;letter-spacing:.16em;
  color:rgba(255,255,255,.76);font-variant-numeric:tabular-nums}
.aqs .aqs__vptitel{font-size:clamp(19px,1.9vw,28px);line-height:1.15;font-weight:700;
  letter-spacing:-.02em;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.30)}
.aqs .aqs__vptext{font-size:14px;line-height:1.5;color:rgba(255,255,255,.92)}

@media(max-width:640px){
  .aqs .aqs__videoh{max-width:14ch}
  .aqs__videobtn{padding:12px 20px 12px 15px;font-size:14px}
  /* Nebeneinander waeren die Spalten am Handy unter 100px breit. Also
     untereinander, Zahl und Titel in EINER Zeile, damit der Block flach
     bleibt und die Aufschrift nicht ueber das Video hinauswaechst. */
  .aqs__vpunkte{grid-template-columns:minmax(0,1fr);gap:12px;width:min(100%,44ch)}
  /* Auch am Handy mittig (04.08.2026): Zahl und Titel zentriert in der Zeile. */
  .aqs__vpunkt{flex-direction:row;align-items:baseline;justify-content:center;gap:11px;flex-wrap:wrap;padding-top:10px}
  .aqs .aqs__vptitel{font-size:19px}
  .aqs .aqs__vptext{flex:1 1 100%;font-size:13.5px}
}

/* Das grosse Fenster fuers Video. Eigenstaendig, wird beim Schliessen wieder
   vollstaendig abgebaut - siehe Erklaerung im Widget. */
.aqs__vlb{position:fixed;inset:0;z-index:99999;display:grid;place-items:center;
  padding:clamp(16px,4vw,48px);background:rgba(8,10,8,.92);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.aqs__vlbbox{width:min(1180px,100%);max-height:100%;display:grid;place-items:center}
.aqs__vlbv{width:100%;max-height:82vh;border-radius:10px;background:#000;display:block}
.aqs__vlbzu{position:absolute;top:clamp(10px,2vw,22px);right:clamp(10px,2vw,22px);
  width:46px;height:46px;border:0;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.14);color:#fff;font-size:26px;line-height:1;
  display:grid;place-items:center;transition:background-color .18s ease}
.aqs__vlbzu:hover{background:rgba(255,255,255,.24)}
.aqs__vlbzu:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.aqs__videobtn{transition:none}}

/* Bildreihe im Schwimmteich-Abschnitt (04.08.2026).
   Der Abschnitt zeigte nur ein Hochformat-Bild neben dem Text; Marcel wollte
   mehrere Aufnahmen der Schauanlage sehen. Drei gleich hohe Kacheln ueber die
   volle Breite, unter dem Text-Bild-Raster. */
.aqs__teichreihe{margin-top:clamp(28px,3vw,48px);display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
.aqs__teichreihe figure{position:relative;width:100%;aspect-ratio:4/3;
  overflow:hidden;background:#ecedeb;margin:0}
.aqs__teichreihe img{position:absolute;inset:0;width:100%;height:100%;
  max-width:none;object-fit:cover;display:block}
@media(max-width:880px){
  .aqs__teichreihe{grid-template-columns:1fr 1fr}
  .aqs__teichreihe figure:first-child{grid-column:1/-1;aspect-ratio:16/9}
}

/* Asymmetrische Bildreihe im Schwimmteich-Abschnitt: dynamischer, spannender Aufbau ohne Duplikate */
/* Sechs Spalten als Grundraster - damit laesst sich dieselbe Reihe sowohl mit
   drei als auch mit fuenf Bildern bauen, ohne dass Luecken entstehen.
   Bei fuenf Bildern: oben zwei breite (je 3 Spalten), darunter drei schmale
   (je 2 Spalten). Bei drei Bildern bleibt es bei einer Zeile. */
.aqs__teichreihe--asym{margin-top:clamp(28px,3vw,48px);display:grid;
  grid-template-columns:repeat(6,1fr);gap:clamp(14px,1.6vw,24px);align-items:stretch}
.aqs__teichreihe--asym .aqs__teichfig{position:relative;width:100%;aspect-ratio:16/11;
  overflow:hidden;background:#ecedeb;margin:0;border-radius:0 !important}

/* drei Bilder: die alte Aufteilung 1.35fr / 1fr / 1fr nachgebaut */
.aqs__teichreihe--n3 .aqs__teichfig--1{grid-column:span 3;aspect-ratio:16/10}
.aqs__teichreihe--n3 .aqs__teichfig--2{grid-column:span 2;aspect-ratio:4/3}
.aqs__teichreihe--n3 .aqs__teichfig--3{grid-column:span 1;aspect-ratio:3/4}

/* vier Bilder */
.aqs__teichreihe--n4 .aqs__teichfig--1,
.aqs__teichreihe--n4 .aqs__teichfig--2{grid-column:span 3;aspect-ratio:16/10}
.aqs__teichreihe--n4 .aqs__teichfig--3,
.aqs__teichreihe--n4 .aqs__teichfig--4{grid-column:span 3;aspect-ratio:16/10}

/* fuenf Bilder: zwei breite oben, drei schmale darunter */
.aqs__teichreihe--n5 .aqs__teichfig--1,
.aqs__teichreihe--n5 .aqs__teichfig--2{grid-column:span 3;aspect-ratio:16/10}
.aqs__teichreihe--n5 .aqs__teichfig--3,
.aqs__teichreihe--n5 .aqs__teichfig--4,
.aqs__teichreihe--n5 .aqs__teichfig--5{grid-column:span 2;aspect-ratio:4/3}
.aqs__teichreihe--asym img{position:absolute;inset:0;width:100%;height:100%;
  max-width:none;object-fit:cover;display:block}
@media(max-width:880px){
  .aqs__teichreihe--asym{grid-template-columns:repeat(2,1fr)}
  .aqs__teichreihe--asym .aqs__teichfig{grid-column:span 1 !important;aspect-ratio:4/3 !important}
  .aqs__teichreihe--asym .aqs__teichfig--1{grid-column:span 2 !important;aspect-ratio:16/9 !important}
}


/* Bildband im Wintergarten-Abschnitt (11.08.2026).
   Feste Bandhoehe statt aspect-ratio je Kachel: so stehen die Bilder trotz
   unterschiedlicher Breite auf einer Linie, und das Band wirkt wie ein
   Streifen statt wie drei einzelne Kaesten. */
.aqs__wg-band{margin-top:clamp(30px,3.2vw,52px);display:grid;
  gap:clamp(12px,1.4vw,22px);height:clamp(240px,26vw,420px)}
.aqs__wg-band--n1{grid-template-columns:1fr}
.aqs__wg-band--n2{grid-template-columns:1fr 1.35fr}
.aqs__wg-band--n3{grid-template-columns:1.15fr 1fr 1.5fr}
.aqs__wg-band .aqs__wg-bandfig{position:relative;margin:0 !important;padding:0 !important;
  height:100%;overflow:hidden;background:#ecedeb;border-radius:0 !important}
.aqs__wg-band .aqs__wg-bandfig img{position:absolute;inset:0;width:100%;height:100%;
  max-width:none;object-fit:cover;display:block}
@media(max-width:880px){
  .aqs__wg-band{grid-template-columns:1fr 1fr !important;height:auto}
  .aqs__wg-band .aqs__wg-bandfig{aspect-ratio:4/3;height:auto}
  .aqs__wg-band .aqs__wg-bandfig--1{grid-column:1/-1;aspect-ratio:16/9}
}


/* Buero & Kontakt, Layout ab 11.08.2026: Hochformat / Text+Zeiten / Bild+Zitat. */
.aqs__bk{display:grid;grid-template-columns:0.92fr 1.16fr 0.92fr;
  gap:clamp(20px,2.4vw,42px);align-items:stretch}
.aqs__bk--ohnerechts{grid-template-columns:0.92fr 1.4fr}

.aqs__bk-hoch{position:relative;margin:0 !important;padding:0 !important;
  overflow:hidden;background:#ecedeb;aspect-ratio:2/3;height:100%;
  border-radius:0 !important}
.aqs__bk-hoch img{position:absolute;inset:0;width:100%;height:100%;
  max-width:none;object-fit:cover;display:block}

.aqs__bk-mitte{display:flex;flex-direction:column}
.aqs__bk .aqs__bk-p{margin-top:18px}
.aqs__bk-karte{margin-top:auto;padding:clamp(20px,2vw,28px);
  background:#f5f6f4;border-top:2px solid #4CA139}
.aqs__bk-kartentitel{font-size:15px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--mut);font-weight:600;margin:0 0 12px}
.aqs__bk .aqs__bk-hours{margin:0}

.aqs__bk-rechts{display:flex;flex-direction:column;gap:clamp(14px,1.5vw,22px)}
.aqs__bk-quer{position:relative;margin:0 !important;padding:0 !important;
  overflow:hidden;background:#ecedeb;aspect-ratio:4/3;border-radius:0 !important}
.aqs__bk-quer img{position:absolute;inset:0;width:100%;height:100%;
  max-width:none;object-fit:cover;display:block}
.aqs__bk-zitat{margin-top:auto;padding:clamp(18px,1.8vw,26px);background:#fff;
  border-left:3px solid #4CA139}
/* Ohne Zitatkarte stand unter dem rechten Bild eine leere Flaeche: die Karte
   ist freiwillig (Edith: "weglassen"). Ist das Bild das einzige Kind, nimmt es
   die ganze Spaltenhoehe - keine Luecke, gleiche Unterkante wie links. */
.aqs__bk-rechts .aqs__bk-quer:only-child{aspect-ratio:auto;flex:1 1 auto;min-height:0}

@media(max-width:1000px){
  .aqs__bk,.aqs__bk--ohnerechts{grid-template-columns:1fr 1fr}
  .aqs__bk-mitte{grid-column:1/-1;order:-1}
  .aqs__bk-hoch{aspect-ratio:3/4}
  /* WICHTIG: flex:1 auf dem rechten Bild funktioniert nur, solange die
     Rasterzeile eine Hoehe vorgibt. Sobald die Spalten untereinander
     stehen, hat die Spalte keine eigene Hoehe mehr - das Bild wurde dann
     0 px hoch und war am Handy komplett unsichtbar (am 11.08.2026 bei
     390 px gemessen). Hier also wieder ein festes Seitenverhaeltnis. */
  .aqs__bk-rechts .aqs__bk-quer:only-child{aspect-ratio:4/3;flex:0 0 auto;min-height:0}
}
@media(max-width:640px){
  .aqs__bk,.aqs__bk--ohnerechts{grid-template-columns:1fr}
  .aqs__bk-hoch{aspect-ratio:4/3}
}


/* Buero & Kontakt, dritte Fassung (11.08.2026).
   Zwei Spalten oben, darunter ein Band ueber die volle Breite.
   Kein aspect-ratio auf der linken Kachel: sie ist ein gestrecktes
   Rasterelement, und aspect-ratio wuerde daraus die BREITE rechnen. */
.aqs__bk2{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(24px,3vw,56px);align-items:stretch}
.aqs__bk2-fig{position:relative;margin:0 !important;padding:0 !important;
  overflow:hidden;background:#ecedeb;width:100%;height:100%;
  min-height:clamp(360px,38vw,620px);border-radius:0 !important}
.aqs__bk2-fig img{position:absolute;inset:0;width:100%;height:100%;
  max-width:none;object-fit:cover;display:block}

.aqs__bk2-text{display:flex;flex-direction:column}
.aqs__bk2 .aqs__bk2-p{margin-top:20px;max-width:56ch}

/* Oeffnungszeiten als Zeilen, nicht als grauer Kasten. */
.aqs__bk2-zeiten{margin-top:auto;padding-top:clamp(24px,2.6vw,38px)}
.aqs__bk2-ztitel{margin:0 0 14px;font-size:14px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mut);font-weight:600}
.aqs__bk2-dl{margin:0}
.aqs__bk2-zeile{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;
  padding:13px 0;border-top:1px solid var(--line,rgba(20,20,20,.14))}
.aqs__bk2-zeile:last-child{border-bottom:1px solid var(--line,rgba(20,20,20,.14))}
.aqs__bk2-zeile dt{margin:0;font-size:17px;color:var(--ink)}
.aqs__bk2-zeile dd{margin:0;font-size:17px;color:var(--txt);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.aqs__bk2-btn{margin-top:clamp(24px,2.6vw,36px)}
.aqs__bk2 .tp-btn-black.btn-green-light-bg .tp-btn-black-text,
.aqs__bk2 .tp-btn-black.btn-green-light-bg .tp-btn-black-circle{background-color:#4CA139}
.aqs__bk2 .tp-btn-black.btn-green-light-bg .tp-btn-black-text{color:#fff}
.aqs__bk2 .tp-btn-black.btn-green-light-bg .tp-btn-black-circle svg{color:#fff}

.aqs__bk2-band{grid-column:1/-1;position:relative;margin:0 !important;
  padding:0 !important;overflow:hidden;background:#ecedeb;
  aspect-ratio:32/9;border-radius:0 !important;
  margin-top:clamp(24px,2.8vw,44px) !important}
.aqs__bk2-band img{position:absolute;inset:0;width:100%;height:100%;
  max-width:none;object-fit:cover;display:block}

@media(max-width:900px){
  .aqs__bk2{grid-template-columns:1fr}
  .aqs__bk2-fig{min-height:0;aspect-ratio:4/3;height:auto}
  .aqs__bk2-band{aspect-ratio:16/9}
}


/* Wintergarten ab 11.08.2026: das Band eroeffnet den Abschnitt.
   Oben also Bilder, darunter Text und Hochformat. */
.aqs__wg--bandoben .aqs__wg-band{margin-top:0;margin-bottom:clamp(30px,3.2vw,52px);
  height:clamp(280px,30vw,480px)}
.aqs__wg--bandoben .aqs__wg-outer{margin-top:0}
@media(max-width:880px){
  .aqs__wg--bandoben .aqs__wg-band{height:auto}
}

/* ===================================================================
   Schaugarten-Video am Handy: der Abschnitt waechst mit seinem Inhalt
   -------------------------------------------------------------------
   Der Aufsatz liegt absolut im Video und wurde auf dessen Hoehe
   gequetscht. Gemessen am 25.08.2026:
       Fenster 364px   Abschnitt 273px, Inhalt braucht 344px  ->  71px weg
       Fenster 500px   Abschnitt 375px, Inhalt braucht 395px  ->  20px weg
   Abgeschnitten wurde oben die Ueberschrift und unten die Liste (Marcel
   mit Screenshot: "bei dem Video auf Schaugarten passen die Abstaende
   nicht"). Ab 880px passt es, deshalb greift das hier erst ab 640px.

   ⚠️ MUSS AM DATEIENDE STEHEN. Erst stand dieser Block direkt nach der
   4:3-Regel bei Zeile 100 - also VOR .aqs__videoover in Zeile 299. Bei
   gleicher Spezifitaet gewinnt die spaetere Regel, der Aufsatz blieb
   absolut, und mit aspect-ratio:auto fiel der Abschnitt auf 0px zusammen.
   Der Vorsatz .aqs haelt es zusaetzlich stabil, falls die Datei einmal
   umsortiert wird.
   =================================================================== */
@media(max-width:640px){
  .aqs .aqs__videosec{aspect-ratio:auto}
  .aqs .aqs__videoover{position:relative;inset:auto;
    padding-block:clamp(40px,10vw,64px)}
}