/* Ruhige Motion für Sektionen unter dem Hero
 * (Für wen wir arbeiten, So arbeiten wir, Mulchtechnik, Kontakt).
 * Die Einblendungen selbst steuert js/home-motion.js über die Web Animations API.
 * Hier: Ausgangszustand vor dem Einblenden, Verbindungslinien im Ablauf, Hover. */

:root {
  --mo-ease: cubic-bezier(.22, 1, .36, 1);
}

/* Vor dem Einblenden – wird nur per JS gesetzt (nie ohne JS, nie bei reduzierter Bewegung) */
.mo-arm {
  opacity: 0;
}

/* ---------- Für wen wir arbeiten ---------- */

/* Nur transform überblenden (statt „all“), damit das Einblenden nicht mit einer
   Opacity-Transition kollidiert; Hover-Anhebung bleibt, nur ruhiger. */
.partners .partner-card {
  transition: transform 600ms var(--mo-ease);
}

/* Beschriftungen: lesbare Größe und ein Kasten, in den „Windkraftanlagen“ ganz passt.
   Die Karten haben weder Hintergrund noch Rahmen – das seitliche Padding war nur
   unsichtbarer Platzverlust. Falls es doch einmal eng wird (kleine Smartphones),
   trennt die Silbentrennung nur sinnvoll: „Windkraft-/anlagen“ statt „Windkraftanla-/gen“. */
.partners .partner-card h3 {
  -webkit-hyphenate-limit-before: 5;
  -webkit-hyphenate-limit-after: 6;
  hyphenate-limit-chars: auto 5 6;
}

@media (min-width: 981px) {
  .partners .partner-card {
    padding-inline: 0;
  }
  .partners .partner-card h3 {
    font-size: clamp(12px, 1.1vw, 16px);
  }
}

@media (min-width: 561px) and (max-width: 980px) {
  .partners .partner-card h3 {
    font-size: 13px;
  }
}

@media (max-width: 560px) {
  .partners .partners__track {
    column-gap: 8px;
  }
  .partners .partner-card {
    padding-inline: 0;
  }
  .partners .partner-card h3 {
    font-size: 12px;
  }
}

/* ---------- Überschriften: ausgeglichene Zeilen, keine einzelnen Wörter ---------- */

.cta__title,
.spezial__title,
.why .process__head .section__title {
  text-wrap: balance;
}

/* Sehr schmale Smartphones: „und schwieriges Gelände.“ bleibt in einer Zeile */
@media (max-width: 374px) {
  .spezial .spezial__title {
    font-size: 20px;
  }
}

/* ---------- So arbeiten wir: Verbindungslinien zwischen den Schritten ---------- */

/* Der Schritt selbst hebt sich beim Hover nicht mehr an (nur noch das Icon),
   damit die Linien sauber an den Icons ausgerichtet bleiben. */
.process__step:hover,
.process__step.reveal-ready.is-visible:hover {
  transform: none;
}

.process > .process__step:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: 0;
  display: block;
  pointer-events: none;
  background: #d3dccd;
  transform-origin: 0 50%;
}

/* Desktop: vier Spalten, Linie quer von Icon zu Icon (14px Abstand zu beiden Kreisen) */
@media (min-width: 981px) {
  .process > .process__step:not(:last-child)::after {
    top: 45.5px;
    left: calc(50% + 60px);
    width: calc(100% - 88px);
    height: 1px;
  }
}

/* Tablet: zwei Spalten, Linie jeweils innerhalb einer Reihe (1 → 2, 3 → 4) */
@media (min-width: 561px) and (max-width: 980px) {
  .process > .process__step:not(:last-child)::after {
    display: block;
    top: 45.5px;
    left: calc(50% + 60px);
    width: calc(100% - 92px);
    height: 1px;
  }
  .process > .process__step:nth-child(even)::after {
    display: none;
  }
}

/* Smartphone: eine Spalte, kurze Linie nach unten zum nächsten Schritt */
@media (max-width: 560px) {
  .process > .process__step:not(:last-child)::after {
    display: block;
    top: calc(100% + 6px);
    left: 50%;
    width: 1px;
    height: 20px;
    margin-left: -.5px;
    transform-origin: 50% 0;
  }
}

/* ---------- Kontakt: feine Hover-Zustände ---------- */

.cta__item > span:last-child {
  position: relative;
}

.cta__item > span:last-child::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1px;
  background: currentColor;
  opacity: .5;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 600ms var(--mo-ease);
  pointer-events: none;
}

.cta__item:focus-visible > span:last-child::after {
  transform: scaleX(1);
}

.cta__ic {
  transition: transform 600ms var(--mo-ease);
}

.cta .cta__info > .btn {
  transition: transform 600ms var(--mo-ease), background-color 600ms var(--mo-ease);
}

@media (hover: hover) and (pointer: fine) {
  .cta__item:hover > span:last-child::after {
    transform: scaleX(1);
  }
  .cta__item:hover .cta__ic {
    transform: translateY(-2px);
  }
}

/* Touch-Ziel des WhatsApp-Buttons auf Tablet/Smartphone mindestens 44px hoch */
@media (max-width: 980px) {
  .cta .cta__info > .btn {
    min-height: 44px;
    justify-content: center;
  }
}

/* Ab Tablet: WhatsApp-Button in lesbarer Größe (14px, 44px hoch) */
@media (min-width: 561px) {
  .cta .cta__info > .btn {
    min-height: 44px;
    padding: 15px 26px;
    font-size: 14px;
    justify-content: center;
  }
}

/* Desktop: Titelspalte breiter, damit „Ist Ihre Fläche zu steil,“ in eine Zeile passt
   und rechts keine leere Spalte stehen bleibt. */
@media (min-width: 1180px) {
  .cta .cta__panel {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }
}

/* Kleiner Desktop: Titel bekommt mehr Platz (drei Zeilen statt vier),
   die Kontaktwege stehen dafür untereinander. */
@media (min-width: 981px) and (max-width: 1179px) {
  .cta .cta__panel {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  }
}

/* Smartphone: etwas schmaleres Innenpolster, damit der Titel ohne Einzelwort-Zeilen umbricht
   (z. B. 360px: „… / bewachsen oder / schwer erreichbar?“ statt „… / schwer / erreichbar?“). */
@media (max-width: 480px) {
  .cta .cta__panel {
    padding-inline: 24px;
  }
}

/* ---------- Mulchtechnik: Kennzahlen lesbar ---------- */

@media (min-width: 981px) {
  /* Glas-Panel etwas dichter, Beschriftung etwas heller: Kontrast auch über hellem Laub */
  .spezial .spezial__stats {
    background: rgba(15, 36, 23, .6);
  }
  .spezial .stat__label {
    color: #c3d1ad;
  }
}

@media (max-width: 980px) {
  /* Oben ausrichten: bricht eine Beschriftung zweizeilig um, bleiben Icons und Werte auf einer Linie */
  .spezial .spezial__stats .stat {
    align-content: start;
  }
  .spezial .spezial__stats .stat__value {
    font-size: 14px;
  }
  .spezial .spezial__stats .stat__label {
    font-size: 12px;
    line-height: 1.3;
  }
}

@media (max-width: 560px) {
  .spezial .spezial__stats {
    padding: 12px 10px;
    gap: 8px;
  }
  .spezial .spezial__stats .stat__value {
    font-size: 13px;
    letter-spacing: -.01em;
  }
  .spezial .spezial__stats .stat__label {
    font-size: 11px;
  }
}

/* ---------- Sicherheitsnetze ---------- */

@media (prefers-reduced-motion: reduce) {
  .mo-arm {
    opacity: 1 !important;
  }
  .cta__item > span:last-child::after,
  .cta__ic,
  .cta .cta__info > .btn {
    transition: none !important;
  }
}

@media print {
  .mo-arm {
    opacity: 1 !important;
  }
}