/* Feinkorrekturen fuer die Unternehmensseite. */

/* Neue Firmenansichten innerhalb der bestehenden quadratischen bzw.
   breitformatigen Hero-Rahmen wie in der Referenz ausrichten. */
body.rc-subpage.rc-editorial--unternehmen
  .rc-company-ref__hero-panel--primary img {
  object-position: 50% 50%;
}

body.rc-subpage.rc-editorial--unternehmen
  .rc-company-ref__hero-panel--secondary img {
  object-position: 50% 48%;
}

/* Bildfokus der neuen Werte-Motive: Arbeitsbereich, Schulungssituation und
   Mikroskop bleiben trotz des breiten Sliderformats klar erkennbar.

   Angesprochen wird jeder Wert ueber `data-company-value`, nicht ueber seine
   Position im DOM: Fuer den Endlos-Lauf fuegt das Skript Klone vor und nach
   den echten Slides ein. Damit verschiebt sich jeder nth-child-Index, die
   Regeln landeten auf den falschen Bildern, und Klon und Original desselben
   Motivs bekamen unterschiedliche Bildausschnitte - beim Umbruch vom dritten
   zum ersten Bild sprang das Motiv dadurch sichtbar nach oben. Ueber das
   Attribut erben die Klone denselben Ausschnitt wie ihr Original. */
body.rc-subpage.rc-editorial--unternehmen
  .rc-company-ref__value-slide[data-company-value="independence"] > img {
  object-position: 50% 48%;
}

body.rc-subpage.rc-editorial--unternehmen
  .rc-company-ref__value-slide[data-company-value="impartiality"] > img {
  object-position: 62% 50%;
}

body.rc-subpage.rc-editorial--unternehmen
  .rc-company-ref__value-slide[data-company-value="integrity"] > img {
  object-position: 50% 54%;
}

/* Das Motiv "Unabhaengigkeit" wird minimal nach links erweitert. So
   verschwindet die dunkle Quellbildkante, ohne dass sich die Kartengroesse
   veraendert. Auch hier zaehlt der Wert, nicht die DOM-Position. */
body.rc-subpage.rc-editorial--unternehmen
  .rc-company-ref__value-slide[data-company-value="independence"] > img {
  width: calc(100% + 12px);
  max-width: none;
}

/* Der Werte-Slider beginnt auf allen Viewports exakt an der Bildkante. */
body.rc-subpage.rc-editorial--unternehmen .rc-company-ref__slider-shell {
  --company-slider-gutter: 0px;
}

/* Die drei UUI-Karten verwenden unabhaengig von der Textlaenge dieselben
   Abmessungen. */
body.rc-subpage.rc-editorial--unternehmen .rc-company-ref__value-card {
  width: calc(33.333333% - 16px);
  height: 260px;
  min-height: 260px;
  box-sizing: border-box;
}

body.rc-subpage.rc-editorial--unternehmen .rc-company-ref__value-card p {
  min-width: 0;
  overflow-wrap: break-word;
}

/* Alle Sliderpunkte behalten exakt dieselbe Kreisform und Groesse. Der
   aktive Zustand unterscheidet sich ausschliesslich durch die Akzentfarbe. */
body.rc-subpage.rc-editorial--unternehmen
  .rc-company-ref__slider-dots button::before {
  width: 5px;
  height: 5px;
  aspect-ratio: 1;
  border-radius: 50%;
  box-sizing: border-box;
}

/* Standard-Button wie auf den anderen Unterseiten; nur Breite und Abstand
   werden an die Dokumentenspalte angepasst. */
body.rc-subpage.rc-editorial--unternehmen .rc-company-ref__documents-button {
  width: min(220px, 100%);
  margin-top: 42px;
  background-color: #f1f1f1 !important;
}

body.rc-subpage.rc-editorial--unternehmen
  .rc-company-ref__documents-button .button-hover-element {
  background-color: #e4e4e4 !important;
}

/* Eine eingescannte, ein Pixel breite Seitenkante soll in den
   Dokumentvorschauen nicht als zusaetzlicher grauer Rahmen erscheinen. */
body.rc-subpage.rc-editorial--unternehmen
  .rc-company-ref__document-preview img {
  clip-path: inset(1px);
}

@media screen and (max-width: 809px) {
  body.rc-subpage.rc-editorial--unternehmen .rc-company-ref__hero {
    padding-top: calc(var(--_navbar---navbar-height, 72px) + 16px);
    padding-bottom: 72px;
  }

  body.rc-subpage.rc-editorial--unternehmen .rc-company-ref__story {
    padding-top: 0;
  }

  /* Nur mobil laeuft das Qualitaetszitat ueber die volle Inhaltsbreite.
     Desktop behaelt wieder die urspruengliche Rasterbreite. */
  body.rc-subpage.rc-editorial--unternehmen .rc-company-ref__promise-title {
    width: 100%;
    max-width: none;
  }

  body.rc-subpage.rc-editorial--unternehmen .rc-company-ref__value-slide {
    flex-basis: 100vw;
  }

  body.rc-subpage.rc-editorial--unternehmen .rc-company-ref__value-card {
    right: auto;
    bottom: 16px;
    left: 16px;
    width: min(64%, 300px);
    height: 260px;
    min-height: 260px;
    max-width: calc(100% - 32px);
    box-sizing: border-box;
    padding: 20px;
    gap: 14px;
    color: #171717;
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(60px);
    backdrop-filter: blur(60px);
  }

  body.rc-subpage.rc-editorial--unternehmen .rc-company-ref__value-card h3 {
    color: #171717;
  }

  body.rc-subpage.rc-editorial--unternehmen .rc-company-ref__value-card p {
    color: #707070;
  }

  /* Die Bildbeschriftung bleibt dunkel, nutzt mobil aber fast die gesamte
     Bildbreite und behaelt rundum einen ruhigen Rand. */
  body.rc-subpage.rc-editorial--unternehmen
    .rc-company-ref__hero-panel figcaption {
    right: 12px;
    bottom: 12px;
    left: 12px;
    width: auto;
    min-height: 96px;
    padding: 24px 30px 28px;
    align-items: center;
    text-align: center;
  }

  body.rc-subpage.rc-editorial--unternehmen .rc-company-ref__documents-button {
    margin-top: 30px;
  }

  /* Titel vor beide Hero-Bilder setzen. */
  body.rc-subpage.rc-editorial--unternehmen .rc-company-ref__hero-title {
    order: -3;
    padding-top: 12px;
    padding-bottom: 22px;
  }

  body.rc-subpage.rc-editorial--unternehmen .rc-company-ref__hero-panel--secondary {
    order: -2;
  }

  body.rc-subpage.rc-editorial--unternehmen .rc-company-ref__hero-panel--primary {
    order: -1;
  }

  /* Mobile Zeitleiste: Marker und Text sind je Meilenstein fest miteinander
     verbunden. Dadurch sitzt der blaue Strich exakt auf der vertikalen Mitte
     des zugehoerigen Textblocks. */
  body.rc-subpage.rc-editorial--unternehmen .rc-company-ref__timeline {
    display: block;
  }

  body.rc-subpage.rc-editorial--unternehmen .rc-company-ref__timeline-ruler {
    display: none;
  }

  body.rc-subpage.rc-editorial--unternehmen .rc-company-ref__timeline-grid {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: 160px;
    gap: 24px;
    padding: 0;
  }

  /* Zwischen zwei blauen Jahresmarkierungen sitzen exakt drei gleichmaessig
     verteilte, sehr leichte Taktstriche. Das Muster folgt dem festen Abstand
     aus 160 px Zeilenhoehe und 24 px Rasterluecke. */
  body.rc-subpage.rc-editorial--unternehmen .rc-company-ref__timeline-grid::before {
    position: absolute;
    top: 80px;
    left: 0;
    width: 18px;
    height: 1px;
    content: "";
    background: transparent;
    box-shadow:
      0 46px 0 rgba(23, 23, 23, 0.12),
      0 92px 0 rgba(23, 23, 23, 0.12),
      0 138px 0 rgba(23, 23, 23, 0.12),
      0 230px 0 rgba(23, 23, 23, 0.12),
      0 276px 0 rgba(23, 23, 23, 0.12),
      0 322px 0 rgba(23, 23, 23, 0.12),
      0 414px 0 rgba(23, 23, 23, 0.12),
      0 460px 0 rgba(23, 23, 23, 0.12),
      0 506px 0 rgba(23, 23, 23, 0.12);
    pointer-events: none;
  }

  body.rc-subpage.rc-editorial--unternehmen .rc-company-ref__milestone {
    position: relative;
    min-height: 0;
    height: 160px;
    padding: 22px 0 22px 112px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  body.rc-subpage.rc-editorial--unternehmen .rc-company-ref__milestone::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 56px;
    height: 2px;
    content: "";
    background: linear-gradient(
      90deg,
      rgba(4, 156, 228, 0) 0%,
      rgba(4, 156, 228, 0.34) 32%,
      var(--_color---color-brand, #049ce4) 100%
    ), #fff;
    border: 0;
    box-shadow: none;
    transform: translateY(-50%);
  }

  body.rc-subpage.rc-editorial--unternehmen .rc-company-ref__milestone::after {
    position: absolute;
    top: calc(50% + 10px);
    left: 0;
    content: attr(data-company-year);
    color: #171717;
    font-family: var(--_typography---type-font-badges);
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
}

@media screen and (max-width: 359px) {
  body.rc-subpage.rc-editorial--unternehmen .rc-company-ref__value-card {
    height: 280px;
    min-height: 280px;
  }
}

/* Beim Sliden wandern die Motive kurz nach oben oder unten.
   Ursache: Aus `aspect-ratio: 1.77963` ergibt sich eine gebrochene Slidehoehe
   (bei 1180 px Breite z. B. 663.047 px). Die Spur ist eine eigene
   Compositing-Ebene, die waehrend der Bewegung auf gebrochenen x-Positionen
   steht. Der Browser rundet die Rasterung einer solchen Ebene auf ganze
   Geraetepixel; weil sich der gebrochene Anteil pro Frame aendert, springt
   dabei auch die gerundete Oberkante - sichtbar als kurzes vertikales
   Verschieben aller drei Bilder.

   Loesung: Die Hoehe wird nicht mehr aus dem Seitenverhaeltnis abgeleitet,
   sondern mit `round()` auf ganze Pixel gebracht. Das Seitenverhaeltnis bleibt
   erhalten, es gibt aber keinen gebrochenen Anteil mehr, der pro Frame anders
   gerundet werden koennte. Browser ohne `round()` behalten ueber den
   `aspect-ratio`-Fallback das bisherige Verhalten. */
@media screen and (min-width: 810px) {
  body.rc-subpage.rc-editorial--unternehmen .rc-company-ref__value-slide {
    flex-basis: round(down, min(86vw, 1180px), 1px);
    height: round(down, min(86vw, 1180px) / 1.77963, 1px);
    aspect-ratio: auto;
  }
}

/* Zusaetzlich bekommt jedes Bild eine eigene, stabile Ebene, damit es nicht
   gemeinsam mit der bewegten Spur neu abgetastet wird. */
body.rc-subpage.rc-editorial--unternehmen .rc-company-ref__value-slide > img {
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Das Motiv "Unabhaengigkeit" behaelt seine Linksverschiebung, ergaenzt sie
   aber um dieselbe stabile Ebene. Auch diese Regel haengt am Wert, damit Klon
   und Original identisch verschoben werden. */
body.rc-subpage.rc-editorial--unternehmen
  .rc-company-ref__value-slide[data-company-value="independence"] > img {
  transform: translate3d(-6px, 0, 0);
}