/* Integration styles for the website and its responsive company scene. */

.page-unternehmen {
  --schrift: Sztos,Arial,sans-serif;
  --weiss: #fff;
  --dunkel: #0d0406;
  --grau: #f2f0f0;
  --dim: #cfcdcd;
  --lila: #7f27ff;
  --orange: #f2490c;
  --scrollszene-netz: url('/assets/media/start/hero-linien.svg');
  --scrollszene-landschaft: url('/assets/media/unternehmen/systemlandschaft.webp');
}

.page-unternehmen .wrap {
  max-width: 1270px;
  width: 100%;
  margin-inline: auto;
}

.page-unternehmen .hero-raster {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 0 150px;
  align-content: start;
}

/* Die Erklaerung steht unter der Ueberschrift, nicht rechts im Feld der
   animierten Chevrons (Call mit Mo 15.09.2026). Das Template bleibt, wie es
   ist — eine Aenderung daran sperrte den Vorlagenabgleich gespeicherter
   CMS-Entwuerfe. Deshalb loesen sich die beiden Spalten auf, und ihre Kinder
   reihen sich in der linken ein: Aussage, Erklaerung, Textlink, Knopf. Die
   rechte Spalte bleibt frei fuer die Szene. */
.page-unternehmen .hero-links,
.page-unternehmen .hero-rechts {
  display: contents;
}

.page-unternehmen .hero-titel,
.page-unternehmen .hero-absatz,
.page-unternehmen .hero-link,
.page-unternehmen .hero-links .btn-row {
  grid-column: 1;
}

.page-unternehmen .hero-titel { order: 1; }
.page-unternehmen .hero-absatz { order: 2; margin-top: 32px; max-width: 472px; }
.page-unternehmen .hero-link { order: 3; }
.page-unternehmen .hero-links .btn-row { order: 4; }

.page-unternehmen .hero-titel {
  font-size: 34px;
  line-height: 45px;
}

.page-unternehmen .hero-absatz {
  font-size: 16px;
  line-height: 22px;
}

.page-unternehmen .hero-link {
  display: block;
  color: var(--navy);
  font-weight: 700;
  margin-top: 24px;
}

.page-unternehmen .btn-row {
  margin-top: 44px;
}

.page-unternehmen .btn {
  display: inline-flex;
  gap: 16px;
  align-items: center;
  border: 2px solid var(--purple);
  padding: 10px 14px;
  background: white;
  color: var(--purple);
  font: 400 14px/20px var(--display);
  font-variation-settings: 'wdth' 200,'wght' 400;
}

.page-unternehmen .btn svg {
  width: 20px;
  height: 14px;
}

.scrollszene-schritt.schritt-eins {
  min-height: 624px;
  padding-top: 170px;
}

.scrollszene-schritt.schritt-zwei {
  min-height: 720px;
}

.scrollszene-panel h2 {
  color: #fff;
  background: none;
}

.scrollszene-panel .kicker {
  font-family: var(--display);
  font-variation-settings: 'wdth' 200,'wght' 400;
}

.company-method {
  padding: 90px 0;
}

.company-method h2 {
  color: #ff5100;
  background: none;
}

.method-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 48px;
  margin: 64px 0;
}

/* Same stepped reveal as the homepage (motion/method.js), on the purple band. */
.method-grid { position: relative; --route: 1; }
.method-grid .method-step { position: relative; isolation: isolate; --step: 1; }
.method-grid .method-step>div { margin-top: 34px; }
.method-grid .method-track { position: absolute; left: 22px; top: 21px; width: var(--track-length,66%); height: 2px; background: rgba(255,255,255,.22); }
.method-grid .method-track i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg,#ff5100,#fff); transform: scaleX(var(--route)); transform-origin: left; }
.method-grid .method-number { width: 44px; height: 44px; display: grid; place-items: center; position: relative; z-index: 2; background: var(--purple); border: 1px solid rgba(255,255,255,.45); border-radius: 50%; color: #fff; font-size: 11px; box-shadow: 0 0 0 8px var(--purple); }
.method-grid .method-number:after { content: ''; position: absolute; inset: -1px; border-radius: 50%; border: 2px solid #ff5100; opacity: var(--step); }
.method-grid .method-chevron { position: absolute; z-index: -1; pointer-events: none; }
.method-grid .method-step:last-child .method-chevron { display: none; }
.method-reveal .method-step { opacity: 0; transform: translateX(-24px); transition: opacity var(--method-duration,700ms) ease, transform var(--method-duration,700ms) cubic-bezier(.22,.61,.36,1); }
.method-reveal .method-step.is-method-visible { opacity: 1; transform: translateX(0); }
.method-reveal .method-track i { transition: transform var(--method-duration,700ms) cubic-bezier(.22,.61,.36,1); }
.method-reveal.method-reset .method-step,.method-reveal.method-reset .method-track i { transition: none; }
@media(max-width:600px) { .method-reveal .method-step { transform: translateX(-12px); } }
@media(prefers-reduced-motion:reduce) { .method-reveal .method-step,.method-reveal .method-track i { opacity: 1; transform: none; transition: none; } }

.method-grid h3 {
  margin-bottom: 16px;
}

.method-copy {
  max-width: 750px;
}

.method-copy .button {
  margin-top: 16px;
}

.company-team {
  padding: 124px 0 143px;
  background: #fff;
  isolation: isolate;
}

.company-team h2 {
  color: var(--purple);
  background: none;
  margin-bottom: 80px;
}

/* Die Reihe wickelt zentriert um, statt auf vier Spalten festgenagelt zu sein:
   die Zahl der Personen kommt seit dem 19.09.2026 aus dem CMS (TEAM_PLAETZE),
   und eine feste Spaltenzahl liesse den fuenften Eintrag allein und linksbuendig
   darunter stehen — derselbe Fehler, den das Logo-Band am 16.09. hatte. */
.people-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 56px;
}
.people-grid>figure {
  flex: 0 1 calc((100% - 3*56px)/4);
  min-width: 200px;
  margin: 0;
}

.person-image {
  width: 100%;
  aspect-ratio: 540/612;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}
/* Kein Ausschnitt je Position mehr. Die Portraits unter
   `unternehmen/portrait-*.webp` sind auf 540 x 612 geschnitten, also genau auf
   das Verhaeltnis der Kachel; `cover` faengt ab, wenn jemand ein anders
   geschnittenes Bild einsetzt. Die frueheren Prozentwerte gehoerten zu EINEM
   Gruppenfoto und schoben jedes andere Bild aus dem Bild. */
.person-image img {
  position: absolute;
  inset: 0;
  max-width: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.people-grid h3 {
  font-family: var(--display);
  font-variation-settings: 'wdth' 200,'wght' 500;
  font-size: 18px;
  line-height: 24px;
  margin-top: 18px;
  color: var(--navy);
}

.people-grid p {
  font: 400 18px/24px var(--display);
  font-variation-settings: 'wdth' 200,'wght' 400;
  margin-top: 5px;
  color: var(--navy);
}

.person-social {
  display: flex;
  gap: 12px;
  align-items: center;
  font: 400 18px/24px var(--display);
  font-variation-settings: 'wdth' 200,'wght' 400;
  color: var(--purple);
  margin-top: 35px;
}
.person-social img { width: 18px; height: 18px; filter: brightness(0) saturate(100%) invert(24%) sepia(100%) saturate(5070%) hue-rotate(258deg); }

.company-copy {
  max-width: 850px;
  margin: 187px 0 0 86px;
  font: 400 22px/29px var(--display);
  font-variation-settings: 'wdth' 200,'wght' 400;
  color: var(--navy);
}

/* The orange square grid belongs to the engineering-team copy. */
.company-team .company-copy {
  position: relative;
  isolation: isolate;
}

.company-team .company-copy::before {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: 300px;
  height: 300px;
  left: -86px;
  top: -96px;
  background: url('/assets/media/start/raster-team.svg') top left/360px 360px repeat;
  opacity: .55;
}

@media (max-width: 899px) {
  .company-team .company-copy::before {
    width: 180px;
    height: 180px;
    left: -12px;
    top: -24px;
    opacity: .4;
  }
}

.company-roots {
  padding: 69px 0 117px;
  overflow: hidden;
}

.company-roots h2 {
  color: #cfcdcd;
  background: none;
  margin-bottom: 55px;
  max-width: 613px;
}

.company-roots .company-copy {
  color: #cfcdcd;
  margin: 56px 0 0;
  max-width: 874px;
  font-size: 18px;
  line-height: 24px;
}
.company-images { display: flex; gap: 24px; overflow-x: auto; margin-right: calc((1270px - 100vw)/2); }
.company-images figure { flex: 0 0 628px; scroll-snap-align: start; }
.company-images img { width: 628px; height: 358px; object-fit: cover; border-radius: 5px; }
@media(min-width:900px) {
  .company-team { min-height: 1248px; }
  .people-grid>figure { min-height: 437px; }
  .company-roots { min-height: 910px; }
  .company-team>.container { width: calc(100% - 192px); max-width: 1248px; }
  .company-team h2 { margin-left: 68px; line-height: 45px; }
  .company-roots>.container { width: calc(100% - 170px); max-width: 1270px; }
  .company-method { min-height: 881px; padding: 128px 0 96px; }
  .company-method h2 { line-height: 45px; }
  .method-grid { margin: 104px 0 120px; gap: 72px; }
  .method-grid .method-chevron { width: 197px; height: 225px; right: -40px; top: 30px; }
  .method-grid h3 { font: 500 18px/24px var(--display); font-variation-settings: 'wdth' 200,'wght' 500; margin-bottom: 0; }
  .method-grid p { font: 400 18px/24px var(--display); font-variation-settings: 'wdth' 200,'wght' 400; }
  .method-copy { max-width: 686px; font: 400 22px/29px var(--display); font-variation-settings: 'wdth' 200,'wght' 400; color: #cfcdcd; }
  .method-copy .button-row { margin-top: 43px; }
  .method-copy .button { margin: 0; }
}

@media(max-width:899px) {
  .page-unternehmen .hero-raster {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .page-unternehmen .hero-absatz { margin-top: 24px; max-width: none; }
  .page-unternehmen .hero-titel {
    font-size: 26px;
    line-height: 34px;
  }
  .page-unternehmen .hero-links .btn-row {
    margin-top: 32px;
  }
  .scrollszene-schritt.schritt-eins {
    padding: 40px 24px 56px;
    min-height: 0;
  }
  .scrollszene-schritt.schritt-zwei {
    padding: 80px 24px;
    min-height: 600px;
  }
  .scrollszene-panel {
    padding: 28px 24px;
  }
  .scrollszene-ausklang-inhalt {
    margin: 0;
    max-width: none;
  }
  .page .sec.scrollszene-ausklang {
    padding: 80px 24px 48px;
  }
  .company-method,.company-team,.company-roots {
    padding: 72px 0;
  }
  .method-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    margin: 40px 0;
  }
  .people-grid {
    display: flex;
    overflow-x: auto;
    gap: 16px;
    margin-inline: -24px;
    padding-inline: 24px;
    scroll-padding-inline: 24px;
  }
  .people-grid>figure { flex: 0 0 260px; scroll-snap-align: start; }
  .person-image { height: 295px; aspect-ratio: auto; }
  .people-grid h3 { font-size: 20px; line-height: 26px; margin-top: 16px; }
  .people-grid p { font-size: 18px; line-height: 24px; margin-top: 4px; }
  .person-social { margin-top: 16px; }
  .person-social img { display: none; }
  .company-copy {
    margin: 75px 24px 0;
    font-size: 16px;
    line-height: 26px;
  }
  .company-team { min-height: 1249px; }
  .company-team .slider-dots,.company-roots .slider-dots { margin-top: 40px; gap: 8px; }
  .company-team .slider-dots button,.company-roots .slider-dots button { width: 8px; height: 8px; }
  .company-team .slider-dots button { background: #cfcdcd; }
  .company-team .slider-dots button[aria-current=true] { background: var(--purple); }
  .company-team h2,.company-roots h2 {
    margin-bottom: 40px;
  }
  .company-images { gap: 16px; margin-inline: -24px; padding-inline: 24px; scroll-padding-inline: 24px; }
  .company-images figure { flex-basis: 300px; }
  .company-images img { width: 300px; height: 171px; }
  .company-roots .company-copy { font: 400 16px/24px var(--display); font-variation-settings: 'wdth' 200,'wght' 400; margin-top: 40px; }
  .company-method h3 { font: 500 18px/26px var(--display); font-variation-settings: 'wdth' 200,'wght' 500; margin: 0 0 8px; }
  .company-method .method-grid p { font: 400 18px/24px var(--display); font-variation-settings: 'wdth' 200,'wght' 400; }
  .method-grid { gap: 144px; }
  .method-grid .method-step { display: grid; grid-template-columns: 44px 1fr; gap: 22px; }
  .method-grid .method-step>div { margin-top: 0; padding-top: 10px; }
  .method-grid .method-chevron { width: 96px; height: 110px; left: calc(50% - 48px); top: calc(100% + 17px); rotate: 90deg; }
  .method-grid .method-track { left: 21px; top: 22px; width: 2px; height: var(--track-length,70%); }
  .method-grid .method-track i { transform: scaleY(var(--route)); transform-origin: top; background: linear-gradient(#ff5100,#fff); }
  .method-copy { font: 400 18px/26px var(--display); font-variation-settings: 'wdth' 200,'wght' 400; }
  .method-copy .button-row { margin-top: 40px; }
  .method-copy .button { margin: 0; white-space: normal; width: 100%; min-height: 62px; }
}

/* Mobile scene from 7724d54, adapted to this site's fixed header and wrappers. */
@media(max-width:899px) {
  .js-scrollszene .scrollszene-schritt {
    min-height: 0;
    padding: 112px 24px 40px;
  }
  .js-scrollszene .scrollszene-panel { padding: 24px; }
  .js-scrollszene .page .sec.scrollszene-ausklang {
    padding: 64px 24px calc(48px + var(--ausklang-nachlauf, 0px));
  }
}
@media(max-width:899px) and (min-aspect-ratio:85/100) {
  .js-scrollszene .scrollszene-schritt { padding-top: 100px; padding-bottom: 24px; }
  .js-scrollszene .page-unternehmen .hero-raster {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px;
  }
  /* Quer auf dem Handy ist die Szene nur eine Bildschirmhoehe hoch: vier
     Zeilen untereinander passen nicht. Die Erklaerung bleibt unter der
     Aussage, Knopf und Textlink nehmen die freie rechte Spalte. Die
     Raster-Klasse hebt die Schrift ueber die 18/26 aus tablet.css, die hier
     sonst gewinnt. */
  .js-scrollszene .page-unternehmen .hero-raster .hero-absatz { margin-top: 8px; font-size: 14px; line-height: 19px; }
  .js-scrollszene .page-unternehmen .hero-links .btn-row { grid-column: 2; grid-row: 1; align-self: end; }
  .js-scrollszene .page-unternehmen .hero-link { grid-column: 2; grid-row: 2; align-self: start; }
  .js-scrollszene .page-unternehmen .hero-titel { font-size: 22px; line-height: 28px; }
  .js-scrollszene .page-unternehmen .hero-absatz { font-size: 14px; line-height: 19px; }
  .js-scrollszene .page-unternehmen .hero-links .btn-row { margin-top: 20px; }
  .js-scrollszene .page-unternehmen .hero-link { margin-top: 16px; }
  .js-scrollszene .scrollszene-panel { max-width: 52%; padding: 16px 20px; }
  .js-scrollszene .scrollszene-panel h2 { font-size: 20px; line-height: 26px; margin: 8px 0; }
  .js-scrollszene .scrollszene-panel p { font-size: 13px; line-height: 18px; }
}