/* Über uns – Haltung und Kennzahlen (Paper: „Haltung + Kennzahlen“, Maße nach Template „impact-section“)
   Navy: Aussage mit Buttons, vier Kennzahlen, laufendes Bildband, Logozeile */
.dao-ueber-impact {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 100px;
  margin: 0;
  padding: var(--dao-section-space) 0;
  overflow: hidden;
  background: var(--dao-navy);
}

/* Hilfslinien 10 px vor dem Seitenrand */
.dao-ueber-impact::before,
.dao-ueber-impact::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--dao-weiss-08);
  pointer-events: none;
}

.dao-ueber-impact::before {
  left: calc(var(--dao-gutter) - 10px);
}

.dao-ueber-impact::after {
  right: calc(var(--dao-gutter) - 10px);
}

.dao-ueber-impact__top {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 100px;
  padding-inline: var(--dao-gutter);
}

/* Aussage: Kennzeichnung links, Text und Buttons rechts */
.dao-ueber-impact__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.dao-ueber-impact__eyebrow {
  margin: 0;
  font-family: var(--dao-font-mono);
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--dao-weiss-70);
}

.dao-ueber-impact__statement {
  display: flex;
  flex-direction: column;
  gap: 35px;
  width: 100%;
  max-width: 760px;
}

.dao-ueber-impact__title {
  color: var(--dao-weiss);
}

.dao-ueber-impact__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Kennzahlen: vier gleich breite Spalten mit Trennlinie links, über die volle Breite von Hilfslinie zu Hilfslinie.
   Das Raster steht 10 px über den Seitenrand hinaus, so fallen die äußeren Spaltenränder auf die Hilfslinien
   (keine Doppellinie) und die Beschriftungen stehen bündig mit dem übrigen Inhalt.
   Linien oben und unten schließen das Band zwischen den Hilfslinien ab */
.dao-ueber-impact__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0 -10px;
  padding: 0;
  border-block: 1px solid var(--dao-weiss-08);
  list-style: none;
}

.dao-ueber-impact__stat {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 15px;
  min-height: 220px;
  padding: 30px 20px 30px 9px; /* 1 px Linie + 9 px = Text bündig am Seitenrand */
  border-left: 1px solid var(--dao-weiss-15);
}

.dao-ueber-impact__stat:nth-child(4n + 1) {
  border-left-color: transparent;
}

.dao-ueber-impact__stat-label {
  margin: 0;
  font-family: var(--dao-font-mono);
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--dao-weiss);
}

.dao-ueber-impact__stat-value {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dao-ueber-impact__stat-number {
  margin: 0;
  font-family: var(--dao-font);
  font-size: 80px;
  font-weight: 500;
  line-height: 64px;
  letter-spacing: -0.05em;
  color: var(--dao-hellblau);
}

.dao-ueber-impact__stat-text {
  margin: 0;
  font-family: var(--dao-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  color: var(--dao-weiss-60);
}

/* Unterer Bereich: Bildband und Logozeile */
.dao-ueber-impact__bottom {
  display: flex;
  flex-direction: column;
  gap: 70px;
}

.dao-ueber-impact__ticker {
  display: flex;
  gap: 0;
  overflow: hidden;
}

/* Zwei gleiche Bildreihen nebeneinander; das Band verschiebt sich um genau eine Reihe */
.dao-ueber-impact__track {
  display: flex;
  flex-shrink: 0;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: dao-ueber-laufen 60s linear infinite;
}

.dao-ueber-impact__ticker:hover .dao-ueber-impact__track {
  animation-play-state: paused;
}

@keyframes dao-ueber-laufen {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dao-ueber-impact__track {
    animation: none;
  }
}

.dao-ueber-impact__image {
  --dao-bild-breite: 460px;
  position: relative;
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: var(--dao-bild-breite);
  aspect-ratio: 460 / 560;
  margin-right: 10px;
  overflow: hidden;
  border-radius: 8px;
  background: url("../assets/ueber-bildflaeche.svg") center / cover no-repeat;
}

/* Alle Bilder im Laufband mit Aussparungen oben links und unten rechts */
.dao-ueber-impact__image--notch {
  border-radius: 0 8px;
}

.dao-ueber-impact__shape {
  position: absolute;
  display: block;
  color: var(--dao-navy);
  pointer-events: none;
}

.dao-ueber-impact__shape--top {
  top: -1px;
  left: -1px;
  width: calc(var(--dao-bild-breite) * 64 / 460);
}

.dao-ueber-impact__shape--bottom {
  right: -1px;
  bottom: -1px;
  width: calc(var(--dao-bild-breite) * 160 / 460);
  transform: rotate(180deg);
}

/* Foto mit Verlauf in Nachtblau von unten und feinem Muster (wie die übrigen Fotos auf Über uns) */
.dao-ueber-impact__image--foto {
  isolation: isolate;
  background: var(--dao-nachtblau);
}

.dao-ueber-impact__image--foto img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% center;
}

.dao-ueber-impact__image--foto::before,
.dao-ueber-impact__image--foto::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
}

.dao-ueber-impact__image--foto::before {
  height: 75%;
  background: linear-gradient(in oklab 0deg,
    color-mix(in srgb, var(--dao-nachtblau) 62%, transparent) 0%,
    color-mix(in srgb, var(--dao-nachtblau) 22%, transparent) 55%,
    transparent 100%);
}

/* Aussparungen liegen über Foto, Verlauf und Muster */
.dao-ueber-impact__image--foto .dao-ueber-impact__shape {
  z-index: 2;
}

.dao-ueber-impact__image--foto::after {
  height: 60%;
  background: url("../assets/beratung-hero-muster.svg") center bottom / auto 100% no-repeat;
}

.dao-ueber-impact__image-label {
  font-family: var(--dao-font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dao-weiss);
}

.dao-ueber-impact__image-text {
  font-family: var(--dao-font);
  font-size: 14px;
  line-height: 21px;
  text-align: center;
  color: var(--dao-weiss-70);
}

.dao-ueber-impact__logos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.dao-ueber-impact__logos-hint {
  margin: 0;
  padding-inline: var(--dao-gutter);
  font-family: var(--dao-font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
  color: var(--dao-weiss-70);
}

.dao-ueber-impact__logo-row {
  display: flex;
  justify-content: center;
  gap: 56px;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 25%, #000 75%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 25%, #000 75%, transparent 100%);
}

.dao-ueber-impact__logo {
  flex-shrink: 0;
  font-family: var(--dao-font);
  font-size: 22px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -0.02em;
  color: var(--dao-weiss);
}

/* Desktop: Abstand oben/unten wie Template (100 statt 140 px) */
@media (min-width: 1200px) {
  .dao-ueber-impact {
    padding-block: 100px;
  }
}

/* Tablet: Aussage untereinander, kleinere Bilder */
@media (max-width: 1199px) {
  .dao-ueber-impact,
  .dao-ueber-impact__top {
    gap: 60px;
  }

  .dao-ueber-impact__head {
    flex-direction: column;
  }

  .dao-ueber-impact__statement {
    gap: 30px;
    max-width: none;
  }

  .dao-ueber-impact__stat {
    min-height: 200px;
    padding-block: 25px;
    padding-right: 12px;
  }

  .dao-ueber-impact__stat-label {
    font-size: 12px;
    line-height: 14px;
  }

  .dao-ueber-impact__stat-number {
    font-size: 56px;
    line-height: 50px;
  }

  .dao-ueber-impact__stat-text {
    font-size: 14px;
    line-height: 20px;
  }

  .dao-ueber-impact__bottom {
    gap: 50px;
  }

  .dao-ueber-impact__image {
    --dao-bild-breite: 260px;
  }

  .dao-ueber-impact__logo-row {
    gap: 40px;
  }

  .dao-ueber-impact__logo {
    font-size: 19px;
    line-height: 24px;
  }
}

/* Mobil: Kennzahlen 2 × 2 */
@media (max-width: 767px) {
  .dao-ueber-impact,
  .dao-ueber-impact__top {
    gap: 40px;
  }

  .dao-ueber-impact__head {
    gap: 15px;
  }

  .dao-ueber-impact__statement {
    gap: 25px;
  }

  .dao-ueber-impact__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
  }

  /* Trennlinie zwischen den beiden Reihen */
  .dao-ueber-impact__stat:nth-child(n + 3) {
    border-top: 1px solid var(--dao-weiss-08);
  }

  .dao-ueber-impact__stat:nth-child(odd) {
    border-left-color: transparent;
  }

  .dao-ueber-impact__stat:nth-child(even) {
    border-left-color: var(--dao-weiss-15);
  }

  .dao-ueber-impact__stat {
    min-height: 150px;
    padding: 20px 10px 20px 9px;
  }

  .dao-ueber-impact__stat-number {
    font-size: 40px;
    line-height: 40px;
  }

  .dao-ueber-impact__bottom {
    gap: 40px;
  }

  .dao-ueber-impact__image {
    --dao-bild-breite: 180px;
    margin-right: 8px;
  }

  .dao-ueber-impact__image-text {
    font-size: 12px;
    line-height: 16px;
  }

  .dao-ueber-impact__logos {
    gap: 20px;
  }

  .dao-ueber-impact__logo-row {
    gap: 32px;
  }
}

/* Kundenlogos als Laufband (weiße SVG in assets/logos/*-weiss.svg), gleiche Höhe mit optischem Ausgleich */
.dao-ueber-impact__logo-ticker {
  --dao-ticker-width: 1080px;
  --dao-ticker-gap: 72px;
}

.dao-ueber-impact__logo-ticker .dao-ticker__track {
  align-items: center;
  animation-duration: 40s;
}

.dao-ueber-impact__logo-ticker .dao-ueber-impact__logo {
  display: flex;
  align-items: center;
}

.dao-ueber-impact__logo-ticker img {
  display: block;
  width: auto;
  height: 40px;
  opacity: 0.85;
}

.dao-ueber-impact__logo-ticker img[src*="physio-baumann"],
.dao-ueber-impact__logo-ticker img[src*="dental-suite"] {
  height: 50px;
}

.dao-ueber-impact__logo-ticker img[src*="liketomove"] {
  height: 56px;
}

.dao-ueber-impact__logo-ticker img[src*="robin-gut"] {
  height: 36px;
}

@media (max-width: 1199px) {
  .dao-ueber-impact__logo-ticker {
    --dao-ticker-gap: 56px;
  }
}

@media (max-width: 767px) {
  .dao-ueber-impact__logo-ticker {
    --dao-ticker-gap: 40px;
  }

  .dao-ueber-impact__logo-ticker img {
    height: 32px;
  }

  .dao-ueber-impact__logo-ticker img[src*="physio-baumann"],
  .dao-ueber-impact__logo-ticker img[src*="dental-suite"] {
    height: 40px;
  }

  .dao-ueber-impact__logo-ticker img[src*="liketomove"] {
    height: 44px;
  }

  .dao-ueber-impact__logo-ticker img[src*="robin-gut"] {
    height: 30px;
  }
}