/* =========================================================
   Steuratech – Seite „Unternehmen“
   ========================================================= */

.page-about {
  --v: calc(100vw / 1440);
  --about-edge: max(16px, calc(36 * var(--u)), calc((100% - 1440px) / 2 + 36 * var(--u)));
}

/* ================= HERO mit Farbverlauf ================= */
.about-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--green-dark); /* füllt den Übergang zum grünen Bereich */
  padding:
    max(28px, calc(47 * var(--u)))
    var(--about-edge)
    0;                          /* Foto sitzt direkt auf der dunkelgrünen Kante */
}

/* Figma: farbverlauf_steuratech-03 */
.about-hero__bg {
  position: absolute;
  z-index: -1;
  top: calc(-247 * var(--v));
  left: calc(-174 * var(--v));
  width: calc(2020 * var(--v));
  height: calc(1146 * var(--v));
  pointer-events: none;
}
.about-hero__bg img {
  width: 100%;
  height: 100%;
}
/* weicher Auslauf ins Dunkelgrün */
.about-hero__bg::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 14%;
  background: linear-gradient(to bottom, rgba(0, 73, 57, 0), var(--green-dark));
}

.about-hero__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.about-title {
  margin: 0 0 0 calc(-10 * var(--u));
  font-size: var(--fs-128);
  font-weight: 500;
  line-height: 1;
}
.about-hero__top .step-arrows { margin: calc(31 * var(--u)) calc(8 * var(--u)) 0 0; } /* bündig mit „Kontakt“ im Header */

.about-tagline {
  max-width: 16.2em;
  margin: max(16px, calc(35 * var(--u))) 0 0 auto;
  text-align: right;
  font-size: var(--fs-40);
  font-weight: 500;
  line-height: 1;
}

.about-photo-wrap {
  position: relative;
  margin-top: max(24px, calc(34 * var(--u)));
}
.about-photo {
  position: relative;
  margin: 0;
  aspect-ratio: 1368 / 700;
  overflow: hidden;
  background: #3a4a52;
}
.about-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;          /* jedes Foto füllt den Rahmen automatisch */
  object-position: 50% 35%;
}
.more-link--photo {
  position: absolute;
  right: calc(52 * var(--u));
  bottom: calc(24 * var(--u));
  color: var(--green-bright);
}

/* ================= Kartenbereich (dunkelgrün) ================= */
.about-values {
  background: var(--green-dark);
  padding:
    max(24px, calc(34 * var(--u)))
    var(--about-edge)
    max(64px, calc(221 * var(--u)));
}

.about-grid {
  display: grid;
  grid-template-columns: 630fr 708fr;
  gap: max(16px, calc(30 * var(--u)));
  align-items: start;
}

.about-card {
  border-radius: 10px;
  background: var(--panel);
  color: var(--green-dark);
  padding:
    max(24px, calc(34 * var(--u)))
    max(20px, calc(36 * var(--u)))
    max(24px, calc(34 * var(--u)));
}
.about-card--r1 { min-height: calc(283 * var(--u)); }
.about-card--r2 { min-height: calc(399 * var(--u)); }
.about-card--r3 { min-height: calc(321 * var(--u)); }

.about-card__title {
  margin: 0 0 max(16px, calc(23 * var(--u)));
  font-size: var(--fs-40);
  font-weight: 500;
  line-height: 1;
}
.about-card p,
.about-card li {
  font-size: var(--fs-18);
  line-height: 1.21;
}
.about-card p { margin: 0; max-width: 34em; }

.dash-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.dash-list li {
  position: relative;
  padding-left: 1.05em;
}
.dash-list li::before {
  content: "–";
  position: absolute;
  left: 0;
}

/* Logos in den Karten */
.about-card__iso {
  width: max(200px, calc(268 * var(--u)));
  height: auto;
  aspect-ratio: 1670 / 738;
  margin-top: max(20px, calc(29 * var(--u)));
}
.about-card__clients {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: max(20px, calc(52 * var(--u)));
  margin-top: max(16px, calc(19 * var(--u)));
}
.about-card__clients .logo-bayer { width: max(110px, calc(160 * var(--u))); height: auto; aspect-ratio: 1; }
.about-card__clients .logo-orontec { width: max(170px, calc(240 * var(--u))); height: auto; aspect-ratio: 240 / 59; }

/* Karte „ausgezeichnet“ mit Preis */
.about-card--award {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  padding-top: max(20px, calc(24 * var(--u)));
  padding-right: max(20px, calc(47 * var(--u)));
}
.about-card--award .about-card__title { margin-top: calc(12 * var(--u)); margin-bottom: max(16px, calc(39 * var(--u))); }
.award {
  margin: 0;
  align-self: start;
  width: max(170px, calc(230.4 * var(--u)));
  aspect-ratio: 230.4 / 261;
  padding: calc(25 * var(--u)) calc(19.7 * var(--u)) 0;
  border-radius: 10px;
  background: #fff;
}
.award img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 10px;
  object-fit: contain;
}

/* Kontakt unten links */
.about-contact {
  align-self: end;
  display: flex;
  align-items: flex-start;
  gap: calc(14 * var(--u));
  margin-bottom: calc(45 * var(--u));
  font-size: var(--fs-40);
  font-weight: 500;
  line-height: .95;
}
.about-contact .step-arrows { margin-top: calc(8 * var(--u)); }
.about-contact p { margin: 0; text-align: right; }
.about-contact span { display: block; color: var(--panel); }
.about-contact a {
  color: var(--green-bright);
  text-decoration: none;
}
.about-contact a:hover { text-decoration: underline; text-decoration-thickness: 2px; }


/* =========================================================
   Tablet / Mobil (Feinschliff folgt mit den Figma-Versionen)
   ========================================================= */
@media (max-width: 900px) {
  .about-hero__bg { inset: 0; width: auto; height: auto; }
  .about-hero__bg img { object-fit: cover; object-position: 30% 40%; }

  .about-title { margin-left: 0; font-size: clamp(48px, 15vw, 96px); }
  .about-tagline { font-size: clamp(20px, 5.5vw, 30px); }
  .about-hero { padding-bottom: 32px; }
  .about-photo { aspect-ratio: 4 / 3; }
  .more-link--photo {
    position: relative;
    right: auto;
    bottom: auto;
    margin-top: 12px;
    color: var(--green-bright);
  }

  .about-grid { grid-template-columns: 1fr; }
  .about-card--r1,
  .about-card--r2,
  .about-card--r3 { min-height: 0; }
  .about-card--award { grid-template-columns: 1fr; }
  .about-contact {
    order: 99;
    margin: 16px 0 0;
    font-size: clamp(22px, 6vw, 32px);
  }
  .about-contact p { text-align: left; }
}

/* =========================================================
   Phone (bis 600px) – nach Figma „Phone_About“ (393px)
   ========================================================= */
@media (max-width: 600px) {
  .about-hero {
    padding: 15px 0 0;
  }
  .about-hero__bg { inset: 0 0 auto 0; height: 420px; }
  .about-hero__bg img { object-position: 40% 30%; }

  .about-hero__top {
    align-items: flex-start;
    padding: 0 10px 0 12px;
  }
  .about-title {
    font-size: 45px;
    line-height: 1;
  }
  .about-hero__top .step-arrows {
    width: 44px;
    margin: 2px 10px 0 0;
  }
  .about-tagline {
    max-width: 321px;
    margin: 19px 18px 0 auto;
    font-size: 28px;
    line-height: 1;
  }

  .about-photo-wrap {
    margin: 17px 8px 0 10px;
  }
  .about-photo { aspect-ratio: 375 / 190; }
  .more-link--photo { display: none; }

  /* Karten in der Reihenfolge des Phone-Entwurfs */
  .about-values { padding: 16px 10px 28px; }
  .about-grid { gap: 26px; }
  .about-grid > :nth-child(2) { order: 1; }   /* fokussiert */
  .about-grid > :nth-child(1) { order: 2; }   /* Werte */
  .about-grid > :nth-child(3) { order: 3; }   /* zertifiziert */
  .about-grid > :nth-child(4) { order: 4; }   /* gemeinsam erfolgreich */
  .about-grid > :nth-child(6) { order: 5; }   /* ausgezeichnet */
  .about-grid > :nth-child(5) { order: 6; }   /* Kontakt */

  .about-card {
    padding: 10px 10px 22px;
  }
  .about-card__title {
    margin: 0 0 8px;
    font-size: 24px;
    line-height: 32px;
  }
  .about-card p,
  .about-card li { font-size: 16px; }

  .about-card__iso {
    width: 206px;
    margin-top: 16px;
  }
  .about-card__clients {
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 6px;
    padding-right: 23px;
  }
  .about-card__clients .logo-bayer { width: 92px; }
  .about-card__clients .logo-orontec { width: 134px; }

  .about-card--award {
    grid-template-columns: 1fr 118px;
    column-gap: 8px;
    padding: 10px 10px 18px;
  }
  .about-card--award .about-card__title {
    grid-column: 1 / -1;
    margin: 0 0 7px;
  }
  .about-card--award .about-card__title br { display: none; }
  .about-card--award > div { display: contents; }
  .about-card--award p { align-self: start; }
  .award {
    width: 118px;
    padding: 12px 10px 0;
  }

  .about-contact {
    justify-self: end;
    align-items: center;
    gap: 14px;
    margin: -8px 0 0;
    font-size: 28px;
    line-height: 1;
  }
  .about-contact p { text-align: right; }
  .about-contact .step-arrows { width: 55px; margin: 0; }
}