/* =========================================================
   Steuratech – Unterseiten (OEM-Laborgeräte, Laborautomation, …)
   ========================================================= */

.page-sub {
  /* skaliert mit der Fensterbreite – auch über 1440px (nur für den Hintergrund) */
  --v: calc(100vw / 1440);
  --sub-edge: max(16px, calc(36 * var(--u)), calc((100% - 1440px) / 2 + 36 * var(--u)));
  --sub-pl: max(16px, calc(53 * var(--u)));
  --sub-pr: max(16px, calc(55 * var(--u)));
}

.subpage {
  position: relative;
  isolation: isolate;
  overflow-x: clip; /* Verlauf und graue Fläche ragen seitlich heraus */
}

/* Farbverlauf an den Seitenrändern (Figma: farbverlauf_steuratech-02, vertikal gespiegelt) */
.subpage__bg {
  position: absolute;
  z-index: -1;
  top: calc(-4 * var(--v));
  left: calc(var(--bg-x, -474) * var(--v));
  width: calc(1920 * var(--v));
  height: calc(1080 * var(--v));
  overflow: hidden;
  transform: scaleY(-1);
  pointer-events: none;
  background: #e3ecdf;
}
.subpage__bg img {
  position: absolute;
  max-width: none;
  left: -1.41%;
  top: -3.06%;
  width: 105.21%;
  height: 106.12%;
}

/* ---------- graues Panel ---------- */
.sub-panel {
  margin: 0 var(--sub-edge);
  padding:
    max(32px, calc(63 * var(--u)))
    var(--sub-pr)
    max(56px, calc(138 * var(--u)))
    var(--sub-pl);
  background: var(--panel);
}

/* Claim oben rechts + Stufenpfeile */
.sub-head {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  gap: calc(19 * var(--u));
}
.sub-head__claim {
  margin: 0;
  text-align: right;
  font-size: var(--fs-40);
  font-weight: 500;
  line-height: 1;
}

.sub-head .step-arrows { margin-top: calc(14 * var(--u)); }

/* Seitentitel */
.sub-title {
  margin: calc(27 * var(--u)) 0 0 calc(-12 * var(--u));
  color: var(--green-dark);
  font-size: var(--fs-128);
  font-weight: 500;
  line-height: 1;
  overflow-wrap: anywhere;
}

/* Bild + Text */
.sub-intro {
  display: grid;
  grid-template-columns: 738fr 469fr;
  gap: max(24px, calc(53 * var(--u)));
  margin-top: max(28px, calc(78 * var(--u)));
}
.sub-intro__img {
  position: relative;
  margin: 0;
  aspect-ratio: 738 / 495;
  overflow: hidden;
  background: #d9dadc;
  align-self: start;
}
.sub-intro__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;          /* jedes Foto füllt den Rahmen automatisch */
  object-position: 50% 45%;
}

.sub-intro__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: var(--fs-18);
  line-height: 1.21;
}
.sub-intro__text p { margin: 0 0 1.21em; }
.sub-intro__text p:last-of-type { margin-bottom: 16px; }

.more-link--cta {
  margin-top: auto;
  margin-bottom: calc(-14.66 * var(--u));
  color: var(--navy);
}

/* ---------- unterer Bereich: Trennlinie + Akkordeon ---------- */
.sub-lower {
  position: relative;
  margin-top: max(40px, calc(72 * var(--u)));
}
/* graue Fläche über die volle Fensterbreite (deckt den Verlauf an den Rändern ab) */
.sub-lower::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(-1 * max(40px, calc(72 * var(--u))));
  bottom: calc(-1 * max(56px, calc(138 * var(--u))));
  left: -100vw;
  right: -100vw;
  background: var(--panel);
}

.sub-divider {
  height: 3px;
  margin: 0;
  border: 0;
  background: var(--green-bright);
}

.sub-services__title {
  margin: max(40px, calc(82 * var(--u))) 0 max(32px, calc(62 * var(--u)));
  font-size: var(--fs-40);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

/* Akkordeon (native <details>: funktioniert ohne JavaScript, per Tastatur bedienbar) */
.accordion {
  border-top: 2px solid var(--navy);
}
.accordion__item {
  border-bottom: 2px solid var(--navy);
}
.accordion__item > summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  min-height: max(64px, calc(88 * var(--u)));
  padding: calc(10 * var(--u)) calc(10 * var(--u)) 12px 0;
  font-size: var(--fs-30);
  font-weight: 400;
  line-height: 1.21;
  list-style: none;
  cursor: pointer;
  transition: color .2s ease;
}
.accordion__item > summary::-webkit-details-marker { display: none; }

.accordion__icon {
  flex: none;
  width: 32px;
  height: 32px;
  margin-top: calc(10 * var(--u));
  transition: transform .3s ease;
}
.accordion__item[open] .accordion__icon { transform: rotate(180deg); }

.accordion__body {
  max-width: 62ch;
  padding: 0 0 28px;
  font-size: var(--fs-18);
  line-height: 1.45;
}
.accordion__body p { margin: 0; }

/* weiches Auf- und Zuklappen in Browsern, die es unterstützen */
.accordion__item::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size .3s ease, content-visibility .3s allow-discrete;
}
.accordion__item[open]::details-content { block-size: auto; }

/* Seitenspezifische Lage des Verlaufs (Figma) */
.page-labor { --bg-x: 0; }

/* ---------- Inhalte im Akkordeon ---------- */
.accordion__body p + p { margin-top: 1em; }

.accordion__body--case { max-width: 75ch; }
.case__lead {
  font-size: var(--fs-24);
  font-weight: 500;
  line-height: 1.2;
}
.accordion__body .case__sublead {
  margin-top: .4em;
  margin-bottom: 1.4em;
  color: var(--green-dark);
  font-weight: 800;
}
.case__heading {
  margin: 1.6em 0 .6em;
  font-size: var(--fs-18);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.case__list {
  margin: 0;
  padding-left: 1.2em;
}
.case__list li + li { margin-top: .35em; }
.case__list li::marker { color: var(--green-bright); }

/* =========================================================
   Tablet / Mobil (Feinschliff folgt mit den Figma-Versionen)
   ========================================================= */
@media (max-width: 900px) {
  .subpage__bg { display: none; }
  .subpage { background: var(--panel); }

  .sub-head { gap: 12px; }
  .sub-head__claim { font-size: clamp(20px, 5vw, 30px); }

  .sub-title {
    margin-left: 0;
    font-size: clamp(36px, 11vw, 80px);
  }

  .sub-intro { grid-template-columns: 1fr; }
  .more-link--cta { margin-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .accordion__item::details-content { transition: none; }
}

/* =========================================================
   Phone (bis 600px) – nach Figma „Phone_OemLaborgeräte“ (393px)
   ========================================================= */
@media (max-width: 600px) {
  /* schmaler Farbverlauf-Rand links und rechts, darunter grau */
  .subpage { background: var(--panel); }
  .subpage__bg {
    display: block;
    top: -6px;
    left: 0;
    width: 734px;
    height: 551px;
  }

  .sub-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0 10px;
    padding: 15px 10px 88px;
  }

  /* Titel zuerst, darunter der Claim (linksbündig) mit den Stufenpfeilen */
  .sub-title {
    order: -1;
    margin: 0 54px 0 -4px;                 /* Platz für die Stufenpfeile rechts */
    font-size: clamp(24px, 8.9vw, 45px);   /* Titel bleibt neben den Pfeilen einzeilig */
    white-space: nowrap;
    line-height: 1;
    overflow-wrap: normal;
    hyphens: auto;
  }
  .sub-head {
    justify-content: space-between;
    gap: 10px;
    margin-top: 16px;
  }
  .sub-head__claim {
    text-align: left;
    font-size: 28px;
    line-height: 1;
  }
  .sub-head__claim br { display: none; }
  /* Stufenpfeile auf Höhe des Seitentitels */
  .sub-head .step-arrows {
    position: absolute;
    top: 11px;
    right: 10px;
    width: 44px;
    margin: 0;
  }

  .sub-intro {
    gap: 25px;
    margin-top: 25px;
  }
  .sub-intro__img { aspect-ratio: 353 / 237; }
  .sub-intro__text { font-size: 16px; padding: 0 0 0 -2px; }
  .sub-intro__text p:last-of-type { margin-bottom: 20px; }

  /* unterer Bereich (Abstände nach Figma „Phone_Laborautomation“) */
  .sub-lower { margin-top: 30px; }
  .sub-services__title {
    margin: 35px 0 46px;
    font-size: 28px;
    line-height: 40px;
  }

  .accordion__item > summary {
    min-height: 67px;
    padding: 4px 10px 12px 0;
    font-size: 24px;
    line-height: 30px;
    gap: 24px;
  }
  .accordion__icon { margin-top: 8px; }
  .accordion__body { font-size: 16px; }
  .case__lead { font-size: 20px; }
  .case__heading { font-size: 16px; }
}