/* Aquanatura Process / Timeline widget - self-contained, variable driven */
.aqua-process{
  --aqua-green:#4CA139;
  --aqua-ink:#15151c;
  --aqua-desc:#636368;
  --aqua-circle:#ffffff;
  --aqua-circle-border-color:#d9ddd6;
  --aqua-circle-size:96px;
  --aqua-circle-border:2px;
  --aqua-circle-border-style:solid;
  --aqua-num:#15151c;
  --aqua-line:#d9ddd6;
  --aqua-line-width:2px;
  --aqua-line-style:dashed;
  --aqua-gap:28px;
  --aqua-item-space:64px;
  --aqua-active-bg:var(--aqua-green);
  --aqua-active-border:var(--aqua-green);
  --aqua-active-line:var(--aqua-green);
  --aqua-active-num:#ffffff;
  --aqua-desc-space:8px;
  --aqua-desc-maxw:46ch;
  width:100%
}
.aqua-process__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.aqua-process__item{position:relative;display:flex;align-items:center;gap:var(--aqua-gap);padding-bottom:var(--aqua-item-space)}
.aqua-process__item:last-child{padding-bottom:0}
/* connecting line */
.aqua-process__item:not(:last-child)::before{content:"";position:absolute;left:calc(var(--aqua-circle-size) / 2);top:var(--aqua-circle-size);bottom:0;width:0;border-left:var(--aqua-line-width) var(--aqua-line-style) var(--aqua-line);transform:translateX(calc(var(--aqua-line-width) / -2))}
.aqua-process__num{position:relative;z-index:1;flex:0 0 auto;width:var(--aqua-circle-size);height:var(--aqua-circle-size);border-radius:50%;background:var(--aqua-circle);border:var(--aqua-circle-border) var(--aqua-circle-border-style) var(--aqua-circle-border-color);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:600;color:var(--aqua-num);transition:all .3s ease}
.aqua-process__title{margin:0;font-size:34px;line-height:1.15;font-weight:600;color:var(--aqua-ink)}
.aqua-process__desc{margin:var(--aqua-desc-space) 0 0;font-size:16px;line-height:1.6;color:var(--aqua-desc);max-width:var(--aqua-desc-maxw)}
/* active step */
.aqua-process__item.is-active .aqua-process__num{background:var(--aqua-active-bg);border-color:var(--aqua-active-border);color:var(--aqua-active-num)}
.aqua-process__item.is-active::before{border-left-color:var(--aqua-active-line)}
.aqua-process--glow .aqua-process__item.is-active .aqua-process__num{box-shadow:0 10px 26px rgba(76,161,57,.32)}
/* hover lift */
.aqua-process--hover .aqua-process__item:hover .aqua-process__num{border-color:var(--aqua-active-border);color:var(--aqua-active-bg)}
.aqua-process--hover .aqua-process__item.is-active:hover .aqua-process__num{color:var(--aqua-active-num)}
/* responsive fallbacks (overridden by Elementor responsive controls) */
@media(max-width:767px){
  .aqua-process{--aqua-circle-size:68px;--aqua-gap:18px;--aqua-item-space:44px}
  .aqua-process__num{font-size:17px}
  .aqua-process__title{font-size:24px}
}


/* Rasenpflege (11.08.2026): die vier Schritte stehen dort ueber die volle
   Breite. Als senkrechte Liste bliebe rechts die halbe Seite leer - also
   eine Reihe, genau wie die Schrittreihe im Rasenanlage-Abschnitt darueber.
   Bewusst NUR fuer dieses Element: auf /leistungen/planung-gestaltung/
   bleibt die Liste senkrecht. */
.elementor-element-f87cc8e .aqua-process__list{
  flex-direction:row;flex-wrap:wrap;gap:clamp(24px,2.6vw,44px);
  align-items:flex-start}
.elementor-element-f87cc8e .aqua-process__item{
  flex:1 1 clamp(220px,22%,300px);min-width:0;align-items:flex-start}
/* Ohne align-items:flex-start haengen die vier Titel auf verschiedenen
   Hoehen, weil die Nummernkreise unterschiedlich hohe Textbloecke
   begleiten. Und die Verbindungslinie gehoert in der Reihe weg. */
.elementor-element-f87cc8e .aqua-process__item::before,
.elementor-element-f87cc8e .aqua-process__item::after{display:none !important}
@media(max-width:900px){
  .elementor-element-f87cc8e .aqua-process__list{flex-direction:column}
}