/* ---- Aquanatura Dein Garten ----
 *
 * 1:1 uebernommen aus der HTML-Fassung der Seite Dein Garten (50348, Stand
 * 28.07.2026). Beim Umbau auf das echte Elementor-Widget aqua_deingarten
 * wurde an den Regeln NICHTS geaendert, damit die Seite exakt gleich aussieht.
 */
/* ===================================================================
   Dein Garten. Gleiche visuelle Sprache wie 50015 und 50018
   (hell, scharfe Kanten, Eyebrow mit gruenem Punkt, Inter-Tight-
   Headline, duenne Linien, Gruen nur fuer Buttons). Der Fliesstext
   laeuft ueber die volle Breite in zwei Spalten, die Anordnung
   darunter wechselt je Abschnitt.
   =================================================================== */
.dg__wrap{width:100%;max-width:1510px;margin-inline:auto;padding-inline:clamp(20px,4vw,40px)}

.dg{--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:inherit;-webkit-font-smoothing:antialiased}
/* Der untere Innenabstand gilt nur am letzten Abschnitt. Seit der Aufteilung
   in Abschnitts-Widgets gibt es .dg siebenmal je Seite. */
.dg--schluss{padding-bottom:clamp(24px,3vw,48px)}
.dg :where(*){box-sizing:border-box}
.dg :where(p,h2,h3,dl,dd,dt,figure,ul,li,a){margin:0;padding:0}

.dg .dg__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}
.dg .dg__kdot{width:10px;height:10px;border-radius:50%;background:var(--green);flex:0 0 10px}
.dg .dg__kicker::after{content:"";height:1px;width:46px;flex:0 0 46px;margin-left:4px;background:rgba(20,20,20,.30)}
.dg .dg__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:20ch}
.dg .dg__p{font-size:19.5px;line-height:1.62;color:var(--txt);font-weight:400}
.dg .dg__p b{color:var(--ink);font-weight:600}

.dg__sec{padding:clamp(52px,6vw,96px) 0;border-top:1px solid var(--line)}
/* Der Frageblock bringt seine eigenen Linien mit - die Kante darueber war
   eine zu viel (Marcel, 04.08.2026). */
.dg .dg__sec--faq{border-top:0}
.dg__sec[id]{scroll-margin-top:120px}
.dg__open{padding:clamp(48px,5vw,84px) 0}

/* Fliesstext breit, zweispaltig */
.dg .dg__lead{margin-top:clamp(34px,3.2vw,48px);columns:2;column-gap:clamp(44px,5vw,96px)}
.dg .dg__lead .dg__p{margin:0 0 20px;break-inside:avoid;max-width:none}
.dg .dg__lead .dg__p:last-child{margin-bottom:0}

/* Beratung: Breitbild */
.dg .dg__wide{margin-top:clamp(48px,5vw,80px);position:relative;width:100%;aspect-ratio:21/9;
  overflow:hidden;background:#ecedeb}
.dg .dg__wideimg{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;display:block}

/* Auftakt mit Bild: Text links, Bild rechts (06.08.2026, Marcel: "das Bild
   soll rechte Seite sein"). Der Fliesstext braucht dafuer eine Spalte statt
   der zwei aus .dg__lead - sonst quetscht sich der Text in der halben Breite. */
.dg .dg__auftakt-split{margin-top:clamp(34px,3.2vw,48px);display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(44px,5vw,88px);align-items:center}
.dg .dg__auftakt-split .dg__lead{margin-top:clamp(20px,2vw,28px);columns:1}
/* Kein festes Seitenverhaeltnis: das Bild behaelt sein Originalformat,
   egal ob Hoch- oder Querformat (06.08.2026, Marcel: "an das Original-
   Groessenformat anpassen" - der feste 4:5-Ausschnitt hat ein Querfoto
   hoch beschnitten). */
.dg__auftakt-img{width:100%}
.dg .dg__auftakt-imgi{display:block;width:100%;height:auto}

/* Planung: Plan links, nummerierte Schritte rechts */
.dg .dg__plan{margin-top:clamp(48px,5vw,80px);display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(44px,5vw,88px);align-items:start}
.dg__planimg{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;background:#f4f5f3}
.dg .dg__planimgi{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain;display:block}
.dg__steps{border-top:1px solid var(--line)}
.dg__step{display:grid;grid-template-columns:64px minmax(0,1fr);gap:0 24px;
  padding:24px 0;border-bottom:1px solid var(--line)}
/* Die letzte Zeile ohne eigene Unterlinie: direkt darunter beginnt der
   naechste Abschnitt mit seiner border-top. Zwei Striche im Abstand von 53px
   mit nichts dazwischen sahen aus wie eine leere Zeile (Handy-Durchgang
   30.07.2026, dein-garten-05 und -10). Gilt genauso fuer die Fragenliste. */
.dg__step:last-child,
.dg__q:last-child{border-bottom:0}
.dg .dg__stepno{font-family:'Inter Tight',sans-serif;font-size:19px;line-height:1.25;font-weight:600;color:var(--green)}
.dg .dg__stept{font-size:21px;line-height:1.2;font-weight:600;color:var(--ink)}
.dg .dg__stepd{margin-top:8px;font-size:16.5px;line-height:1.6;color:var(--mut);max-width:46ch}

/* Umsetzung: drei Bilder mit Unterschrift */
.dg .dg__three{margin-top:clamp(48px,5vw,80px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(24px,3vw,44px)}

/* Moeglichkeiten (Ediths vier Beispiele). ZWEI Spalten statt vier
   (Marcel, 04.08.2026: "die Bilder sind viel zu klein, wir haben starke
   Bilder"): bei 1510px Inhaltsbreite sind das 735px je Bild statt 340px,
   also mehr als doppelt so gross. Format 4:3 statt 4:3-Kachel, damit das
   Motiv Luft hat; Titel und Text bleiben in der Sprache der Dreier-Reihe. */
.dg .dg__mgrid{margin-top:clamp(48px,5vw,80px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(48px,5vw,80px) clamp(28px,3vw,44px)}
.dg__mkarte{min-width:0}
.dg .dg__mkarte .dg__tframe{aspect-ratio:4/3}
.dg .dg__mkarte .dg__tt{margin-top:26px;font-size:clamp(24px,2.1vw,30px)}
.dg .dg__mkarte .dg__td{font-size:17.5px;max-width:46ch}

/* Ablauf (04.08.2026): der Verweis unter einem Schritt zur Leistungsseite. */
.dg .dg__steplink{display:inline-block;margin-top:12px;font-size:15.5px;font-weight:600;
  color:var(--ink);text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:var(--green);text-decoration-thickness:2px}
.dg .dg__steplink:hover{color:var(--green)}
.dg__tframe{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;background:#ecedeb}
.dg .dg__timg{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;display:block}
.dg .dg__tt{margin-top:22px;padding-top:14px;border-top:2px solid var(--ink);
  font-size:21px;line-height:1.2;font-weight:600;color:var(--ink)}
.dg .dg__td{margin-top:10px;font-size:16.5px;line-height:1.6;color:var(--mut)}

/* Pflege Redesign: 2-spaltige Kopfzeile (Titel links, Text rechts) + 3 exakt gleich große Bilder */
.dg__head-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(32px,4vw,72px);align-items:start}
.dg__head-left .dg__h{margin-top:20px;max-width:none}
.dg__head-right .dg__p{font-size:19.5px;line-height:1.65;color:var(--txt);margin-top:0}
.dg__head-right .dg__p + .dg__p{margin-top:16px}

.dg__pflege-gallery{margin-top:clamp(40px,5vw,72px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,24px);align-items:stretch}
.dg__pf-fig{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;background:#ecedeb;margin:0;border-radius:0 !important}
.dg__pf-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:880px){
  .dg__head-split{grid-template-columns:1fr;gap:24px}
  .dg__pflege-gallery{grid-template-columns:1fr;gap:16px}
}

/* FAQ */
.dg__faqgrid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,5vw,96px);align-items:start}
.dg__q{border-bottom:1px solid var(--line)}
.dg__q:first-child{border-top:1px solid var(--line)}
.dg__qbtn{width:100%;background:none;border:0;cursor:pointer;text-align:left;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:24px 0;font-family:'Inter',sans-serif;font-size:19px;font-weight:600;color:var(--ink)}
.dg__qbtn::after{content:"+";font-size:24px;font-weight:400;color:var(--green);flex:0 0 auto}
.dg__q.open .dg__qbtn::after{content:"\2013"}
/* Aufklapper: Raster statt max-height (29.07.2026).
   minmax(0,0fr) -> minmax(0,1fr) laesst den Browser die Zielhoehe selbst
   ausrechnen. Vorher stand hier max-height:0 und assets/js/aqua-aufklappen.js
   musste die Zielhoehe in Pixeln messen - bei jedem Schriftwechsel, jedem
   resize und ueber einen ResizeObserver erneut. Endzustand identisch, nur
   ohne Messerei.
   Das ausdrueckliche Minimum 0 ist Pflicht: das kurze '0fr' heisst
   minmax(auto, 0fr), und dieses auto laesst das padding-bottom:24px des
   Antwort-Absatzes stehen - geschlossen waere der Deckel dann 24px hoch
   statt 0 (nachgemessen). */
.dg__a{display:grid;grid-template-rows:minmax(0,0fr);overflow:hidden;transition:grid-template-rows .28s ease}
.dg__a > *{min-height:0;overflow:hidden}
@media (prefers-reduced-motion: reduce){.dg__a{transition:none}}
.dg__a p{padding:0 0 24px;font-size:16.5px;line-height:1.6;color:var(--txt);max-width:64ch}

/* CTA */
.dg__cta{border-top:1px solid var(--line);padding:clamp(64px,7vw,110px) 0;text-align:center}
.dg__cta .dg__kicker{justify-content:center}
.dg .dg__cta .dg__h{margin-inline:auto;max-width:18ch}
.dg .dg__ctalead{margin:24px auto 0;max-width:62ch;font-size:19px;line-height:1.62;color:var(--txt)}
.dg__ctabtns{margin-top:36px;display:flex;justify-content:center}
/* Website-Button: das Theme faerbt ihn nur unter .aqua-tp-header gruen,
   dieser Vorfahre fehlt im Content, deshalb hier scoped nachgebaut. */
.dg .tp-btn-black.btn-green-light-bg .tp-btn-black-text,
.dg .tp-btn-black.btn-green-light-bg .tp-btn-black-circle{background-color:#4CA139}
.dg .tp-btn-black.btn-green-light-bg .tp-btn-black-text{color:#fff}
.dg .tp-btn-black.btn-green-light-bg .tp-btn-black-circle svg{color:#fff}

@media(max-width:980px){
  .dg .dg__lead{columns:1}
  .dg .dg__h{max-width:none}
  .dg .dg__plan{grid-template-columns:1fr;gap:32px}
  .dg .dg__auftakt-split{grid-template-columns:1fr;gap:32px}
  .dg .dg__three{grid-template-columns:1fr;gap:36px}
  .dg .dg__split{grid-template-columns:1fr;gap:32px}
  .dg .dg__faqgrid{grid-template-columns:1fr;gap:24px}
  .dg .dg__wide{aspect-ratio:16/9}
  .dg__step{grid-template-columns:48px minmax(0,1fr);gap:0 16px}
}
@media(max-width:620px){
  .dg .dg__mgrid{grid-template-columns:1fr;gap:36px}
}

/* Eingangsanimation */
.dg.rv-on [data-rv]{opacity:0;transform:translateY(24px)}
.dg.rv-on [data-rv].rv-in{opacity:1;transform:none;
  transition:opacity .75s ease,transform .75s cubic-bezier(.22,.61,.36,1)}
@media(prefers-reduced-motion:reduce){.dg.rv-on [data-rv]{opacity:1;transform:none;transition:none}}


/* Moeglichkeiten ab 11.08.2026: Vierer-Raster statt 2x2.
   Marcel wollte "viel mehr Moeglichkeiten zeigen als nur vier". Die alten
   Kacheln waren so gross, dass vier Stueck den halben Bildschirm fuellten.
   Jetzt kompaktere Kacheln - acht passen auf zwei Reihen, und weitere
   koennen ohne Umbau dazu. */
.dg .dg__mgrid{grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(26px,2.8vw,44px) clamp(20px,2vw,32px);
  margin-top:clamp(36px,3.6vw,58px)}
/* Sechs Spalten als Grundraster, jede Karte spannt zwei - das ergibt drei
   Karten je Reihe mit rund 430 px Bildbreite bei 1440 px. Bleiben in der
   letzten Reihe nur zwei uebrig, spannen sie je drei Spalten und die Reihe
   laeuft nicht halb leer aus. */
.dg .dg__mkarte{grid-column:span 2}
.dg .dg__mkarte:nth-last-child(2):nth-child(3n+1),
.dg .dg__mkarte:nth-last-child(1):nth-child(3n+2){grid-column:span 3}
.dg .dg__mkarte .dg__tframe{aspect-ratio:4/3}
.dg .dg__mkarte .dg__tt{margin-top:20px;font-size:clamp(21px,1.6vw,26px);line-height:1.22}
.dg .dg__mkarte .dg__td{margin-top:9px;font-size:17px;line-height:1.55;max-width:42ch}
@media(max-width:1000px){
  .dg .dg__mgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dg .dg__mkarte,
  .dg .dg__mkarte:nth-last-child(2):nth-child(3n+1),
  .dg .dg__mkarte:nth-last-child(1):nth-child(3n+2){grid-column:span 1}
}
@media(max-width:560px){.dg .dg__mgrid{grid-template-columns:1fr}}


/* ===========================================================================
   Moeglichkeiten als WECHSLER (12.08.2026)
   Loest den Kachelraster ab. Links eine grosse Buehne, rechts die Liste
   aller Moeglichkeiten. Nur der aktive Eintrag zeigt seinen Satz - dadurch
   bleibt die Liste kurz, egal wie viele Eintraege dazukommen.
   Die alten .dg__mgrid-Regeln bleiben stehen: das Raster wird anderswo
   nicht mehr benutzt, aber Loeschen bringt hier nichts und birgt Risiko.
   ======================================================================== */
.dg .dgw{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,1fr);
  gap:clamp(28px,3vw,56px);align-items:stretch;
  margin-top:clamp(40px,4vw,66px)}

/* Buehne: alle Bilder liegen uebereinander, nur das aktive ist sichtbar.
   KEIN aspect-ratio auf einem gestreckten Rasterelement - der Browser
   rechnet daraus sonst die Breite. Hier ist die Buehne nicht gestreckt,
   also ist aspect-ratio sicher. */
.dg .dgw__buehne{position:relative;width:100%;height:100%;
  min-height:clamp(380px,40vw,680px);
  overflow:hidden;background:#ecedeb}
.dg .dgw__fig{position:absolute;inset:0;margin:0 !important;padding:0 !important;
  opacity:0;transition:opacity .45s ease;pointer-events:none}
.dg .dgw__fig.ist-aktiv{opacity:1;pointer-events:auto}
.dg .dgw__fig img{width:100%;height:100%;max-width:none;object-fit:cover;display:block}

/* Die ganze Zeile ist der Link. Gleiche Optik wie der fruehere Reiter-Knopf,
   damit sich am Rhythmus der Liste nichts aendert. */
.dg .dgw__zeile{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:0 18px;width:100%;padding:16px 0;background:none;border:0;
  text-align:left;cursor:pointer;color:inherit;font:inherit;
  align-items:baseline;text-decoration:none}
.dg .dgw__zeile:focus-visible{outline:2px solid #4CA139;outline-offset:3px}
.dg .dgw__zeile:hover .dgw__titel{color:#4CA139}

/* Der Pfeil steht IM Titel, direkt hinter dem Wort, mit einem kleinen
   Abstand. Er sitzt bewusst nicht am rechten Rand: Marcel wollte ihn
   "direkt neben dem Titel". Die inline-flex-Regel dazu steht weiter unten
   bei .dgw__titel, damit sie die alte block-Regel schlaegt. */
.dg .dgw__pfeil{display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;flex:0 0 auto;border-radius:999px;
  color:var(--ink,#111013);background:rgba(20,20,20,.07);
  transition:opacity .26s ease,transform .34s cubic-bezier(.23,1,.32,1),
             background .26s ease,color .26s ease}
.dg .dgw__zeile:hover .dgw__pfeil{background:#4CA139;color:#fff}
.dg .dgw__zeile:active .dgw__pfeil{transform:scale(.94)}

/* Erst beim Ueberfahren, aber NUR wo es ein Ueberfahren gibt. Am Handy
   (pointer:coarse) steht der Pfeil dauerhaft, sonst wuesste dort niemand,
   dass die Zeile irgendwohin fuehrt. Platz haelt er sich immer frei, sonst
   springt der Titel beim Ueberfahren. */
@media (hover:hover) and (pointer:fine){
  .dg .dgw__pfeil{opacity:0;transform:translateX(-5px)}
  .dg .dgw__eintrag:hover .dgw__pfeil,
  .dg .dgw__zeile:focus-visible .dgw__pfeil{opacity:1;transform:none}
}

/* Rechte Spalte: Liste oben, Knopf unten. margin-top:auto statt flex:1 auf
   der Liste - ein gestreckter Listenkasten faellt am Handy sonst auf 0 px
   zusammen, sobald das Raster einspaltig wird. */
.dg .dgw__rechts{display:flex;flex-direction:column;min-width:0}
.dg .dgw__aktion{margin-top:auto;padding-top:clamp(24px,2.4vw,36px);
  display:flex;justify-content:flex-start}

/* Liste */
.dg .dgw__liste{list-style:none;margin:0;padding:0;counter-reset:none}
.dg .dgw__eintrag{border-top:1px solid var(--line,rgba(20,20,20,.14))}
.dg .dgw__eintrag:last-child{border-bottom:1px solid var(--line,rgba(20,20,20,.14))}
/* .dgw__knopf ist am 24.08.2026 zu .dgw__zeile geworden, siehe weiter oben. */
.dg .dgw__nr{font-size:14px;letter-spacing:.06em;color:var(--mut,#636368);
  font-variant-numeric:tabular-nums;transition:color .25s ease}
/* inline-flex statt block: der Pfeil sitzt seit 24.08.2026 IM Titel, direkt
   hinter dem Wort. gap ist der kleine Abstand, den Marcel dazwischen wollte. */
.dg .dgw__titel{display:inline-flex;align-items:center;gap:10px;
  font-size:clamp(19px,1.5vw,23px);font-weight:600;
  line-height:1.25;color:var(--ink,#111013);transition:color .25s ease}

/* Der Erklaersatz steht seit 24.08.2026 bei JEDEM Eintrag, nicht mehr nur
   beim aktiven. Vorher fuhr er beim Umschalten auf und zu (grid-template-rows
   von 0fr auf 1fr). Das sah gut aus, hatte aber zur Folge, dass sieben von
   acht Eintraegen nur aus einem Wort bestanden, solange niemand ueberfuhr.
   Am Handy gibt es kein Ueberfahren, dort war die Liste damit stumm.
   Welcher Eintrag aktiv ist, zeigt jetzt allein die gruene Nummer und das
   Bild links. */
.dg .dgw__text{display:block;font-size:16.5px;line-height:1.55;
  color:var(--mut,#636368);margin-top:7px;
  transition:color .3s ease}
.dg .dgw__textin{display:block}
.dg .dgw__eintrag.ist-aktiv .dgw__text{color:var(--txt,#141414)}
.dg .dgw__eintrag.ist-aktiv .dgw__nr{color:#4CA139}

@media(prefers-reduced-motion:reduce){
  .dg .dgw__fig,.dg .dgw__text{transition:none}
}

/* Am Rechner gibt es das Bild am Eintrag nicht: dort steht die Buehne. */
.dg .dgw__mbild{display:none}

@media(max-width:900px){
  .dg .dgw{grid-template-columns:1fr;gap:24px}
  .dg .dgw__titel{font-size:19px}
  /* Einspaltig gibt es keinen freien Rest, den margin-top:auto fuellen
     koennte - der Abstand muss hier vom Innenabstand kommen. */
  .dg .dgw__aktion{margin-top:0;padding-top:28px}

  /* ---------------------------------------------------------------
     Handy: das Bild wandert zum Eintrag (Marcel, 24.08.2026)
     Vorher stand die Buehne ganz oben und die Liste darunter. Wer den
     fuenften Eintrag antippte, bekam ein Bild, das laengst ausserhalb
     des Bildschirms lag. Jetzt klappt das Bild UNTER dem angetippten
     Eintrag auf, die Buehne oben entfaellt.

     grid-template-rows 0fr -> 1fr statt max-height: das laesst sich
     weich bewegen und braucht keinen geratenen Hoechstwert.
     --------------------------------------------------------------- */
  .dg .dgw__buehne{display:none}
  .dg .dgw__mbild{display:grid;grid-template-rows:0fr;
    overflow:hidden;opacity:0;
    transition:grid-template-rows .5s cubic-bezier(.23,1,.32,1),
               opacity .35s ease,margin .5s cubic-bezier(.23,1,.32,1);
    margin:0}
  .dg .dgw__mbild img{min-height:0;width:100%;aspect-ratio:16/10;
    object-fit:cover;display:block}
  .dg .dgw__eintrag.ist-aktiv .dgw__mbild{grid-template-rows:1fr;opacity:1;
    margin:2px 0 18px}
  /* Der Zeigefinger bleibt: der erste Tipp klappt auf, der zweite geht
     zur Leistung. Das Skript regelt das, siehe aqua-dg-wechsler.js. */
  .dg .dgw__zeile{padding:18px 0 14px}
}

@media(max-width:900px) and (prefers-reduced-motion:reduce){
  .dg .dgw__mbild{transition:none}
}