/* ============================================================
   Waagerechter Zeitstrahl (Original nachgemessen, /opt/tooling/zeit2/3.mjs)
   ============================================================
   Der Vorgaenger hatte hier eine SENKRECHTE Liste - der groesste
   strukturelle Unterschied der Seite (sie war dadurch 1326px zu hoch).

   Das Original ist ein linksbuendiger Streifen (Sektion 147px hoch,
   Innenabstand links 96px, y=668..815), der ueber die rechte
   Viewportkante hinauslaeuft und dort abgeschnitten wird:
     - 17 Meilensteine im Abstand von 94px (Tick-x 100..1604)
     - je Meilenstein ein 2px/35px-Strich (y=691), darunter das
       Partnerlogo (Mitte y=752), bei 12 davon oben eine Jahreszahl
       (12px, y=668)
     - eine feine Rasterlinie als Achse
   Die im Original erst bei Interaktion sichtbaren Meilensteintexte
   liegen als sr-only im Markup (Inhalt bleibt zugaenglich, Optik wie
   der statische Originalzustand). Das scrollgetriggerte Karussell des
   Originals bauen wir bewusst nicht nach (vgl. /allianzen/). */
/* Saemtlicher Text dieser Seite laeuft im Original in POPPINS (per
   getComputedStyle nachgemessen: Einleitung, Jahreszahlen, Vorstand,
   Karriere inkl. "Jetzt bewerben", Stellenzeile, Impressionen - alles
   Poppins, nichts Inter). Unser Inter lief schmaler, brach spaeter um und
   liess die Seite 86px kuerzer werden - kumulative Drift, jede Zeile
   darunter stand im Differenzbild rot. Font-family erbt, daher genuegt
   der Sektions-Scope. */
.section--unternehmen-intro, .section--zeitstrahl, .section--vorstand,
.section--karriere, .section--impressionen { font-family: var(--font-heading); }

.section--zeitstrahl { padding: 0; }
/* KEIN padding-left: die Meilenstein-Koordinaten (left:100..1604) sind die
   am Original gemessenen ABSOLUTEN x-Werte. Das fruehere padding-left:96
   wurde dazu addiert - der ganze Streifen stand 96px (mobil 39px) zu weit
   rechts (Lauf 5 nachgemessen: Orig-Jahr 1989 zentriert auf x=101, bei uns
   auf x=196). */
.zeit {
  position: relative; height: 147px; overflow: hidden;
}
/* Tick-Kamm auf der Achse (Lauf 5 pixelgenau nachgemessen): 1px-Striche in
   #c9c9c9, 16px hoch (buendig mit der Strich-Oberkante y=691..706), Raster
   94/7 = 13,43px - 6 Zwischenticks je Meilenstein. Vorher: 2px hohe
   Punktlinie #d7d7d7 im 12px-Raster (falsche Form, Farbe und Teilung). */
.zeit__achse {
  /* 101,5: erster Zwischentick rendert dann auf x=115 wie im Original
     (115/128/141..., pixel-korreliert). */
  position: absolute; left: 101.5px; right: 0; top: 23px; height: 16px;
  background: repeating-linear-gradient(90deg, #c9c9c9 0 1px, transparent 1px 13.4286px);
}
.zeit__spur { position: relative; height: 100%; margin: 0; padding: 0; list-style: none; }
/* +1px: der Original-Strich liegt auf x=100/101, unserer stand auf 99/100
   (Pixel-Korrelation Lauf 5: ganzer Streifen dx=-1). */
.zeit__punkt { position: absolute; top: 0; transform: translateX(1px); }
/* Jahreszahl mittig ueber dem Strich. */
.zeit__jahr {
  position: absolute; top: 0; left: 0; transform: translateX(-50%);
  font-size: var(--fs-micro); line-height: 18px; white-space: nowrap;
  color: var(--color-text-muted);
}
.zeit__strich {
  position: absolute; top: 23px; left: 0; width: 2px; height: 35px;
  transform: translateX(-1px); background: var(--color-text-muted);
}
/* Logo mittig unter dem Strich, vertikal um y=752 (=84px) zentriert. */
.zeit__logo {
  position: absolute; top: 84px; left: 0; transform: translate(-50%, -50%);
  line-height: 0;
}
/* Die Logos sind 3x-Screenshots; die HTML-Attribute width/height tragen die
   Anzeigegroesse. */
.zeit__logo img { display: block; max-width: none; }

@media (max-width: 1199px) {
  /* Unterhalb 1200px laesst sich der 1600px breite Streifen nicht
     sinnvoll stauchen - horizontal scrollbar machen, damit nichts
     ueberlaeuft. Das Original behaelt mobil dieselben absoluten
     Koordinaten wie am Desktop (Lauf 5: Jahr 1989 auch @390 auf x=101). */
  .zeit { overflow-x: auto; overflow-y: hidden; }
  .zeit__spur { min-width: 1650px; }
}

/* Vorstand: drei 222px-Spalten mit rundem 123px-Portrait, als Gruppe
   zentriert (Original x=216/609/1002, Abstand 171px). */
.team-grid { display: flex; justify-content: center; gap: 171px; margin-top: 74px; }
.team-card { width: 222px; text-align: center; }
.team-card img {
  width: 123px; height: 123px; border-radius: 50%; object-fit: cover;
  margin: 0 auto 23px;
  /* Dezente Anhebung des Portraits beim Hover - dieselbe Bewegungssprache
     wie die Karten der Startseite, nur zurueckhaltender (kein Link). */
  transition: transform var(--duration-hover) var(--ease-smooth),
              box-shadow var(--duration-hover) var(--ease-smooth);
}
.team-card:hover img {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}
/* Name 15/700 rgb(129,129,129), Rolle 15/400 rgb(201,201,201) - beide
   heller als die vorherigen Standardwerte. */
.team-card h3 { margin: 0 0 10px; color: var(--color-text-muted); font-weight: var(--fw-bold); }
.team-card p { color: var(--color-text-faint); font-size: var(--fs-body); margin: 0; }

/* Die Intro-Absaetze unter den Sektions-H2 sind im Original 810px breit
   (nachgemessen: alle drei exakt 810), nicht 62ch - 62ch lief mit Poppins
   auf 558px und brach eine Zeile zu frueh um (Sektion je +23px). Abstand
   H2 -> Absatz im Original 21px (973->994), nicht --space-4. */
.section--vorstand .section-intro,
.section--karriere .section-intro,
.section--impressionen .section-intro {
  max-width: 810px; margin-left: auto; margin-right: auto;
}
/* Der 21px-Abstand H2 -> Absatz gilt im Original auf ALLEN Breiten
   (Lauf 5 @390: 1307+27,6+21 = 1355,6 -> Absatz y=1355). */
.section--vorstand > .container > h2,
.section--karriere > .container > h2,
.section--impressionen > .container > h2 { margin-bottom: 21px; }
/* Original @<=1199: die Sektions-H2 stehen wie die H1 linksbuendig
   (getComputedStyle @390: ta=left), nicht zentriert. */
@media (max-width: 1199px) {
  .section--vorstand > .container > h2,
  .section--karriere > .container > h2,
  .section--impressionen > .container > h2 { text-align: left; }
}

/* Zwei Spalten: links 309px (272 Inhalt + 37 rechts), rechts 699px
   (662 Inhalt + 37 links) - als 1008px-Gruppe zentriert, Beginn y=1680.
   Abstand Intro-Absatz (Ende 1607) -> Reihe = 73px. */
.karriere-reihe {
  display: flex; justify-content: center; margin-top: 48px;
}
/* Die 73px gelten fuer das @1440 vermessene Desktop-Layout; die Mobil-/
   Tablet-Kette (<1200) war zuvor separat abgeglichen und behaelt 48px. */
@media (min-width: 1200px) { .karriere-reihe { margin-top: 73px; } }
.karriere-init { width: 309px; flex: 0 0 309px; padding-right: 37px; text-align: left; }
.karriere-stellen { width: 699px; flex: 0 0 699px; padding-left: 37px; text-align: left; }
/* Spaltenkopf -> Inhalt: links 15px (1709->1724), rechts 23px (1709->1732),
   beides am Original gemessen. */
.karriere-init h2, .karriere-stellen h2 { text-align: left; margin: 0 0 15px; }
.karriere-stellen h2 { margin-bottom: 23px; }
.karriere-init p { color: var(--color-text-muted); margin: 0 0 22px; }
/* "Jetzt bewerben" ist im Original ein weisser, umrandeter Knopf 176x47
   (Radius 9, Rahmen 1px, Text 15/400 + Pfeil 20x12 rechts) - kein blanker
   Textlink. fas.css ist auf dieser Seite nicht geladen, der Knopf wird
   deshalb hier vollstaendig ausgestaltet. */
.karriere-btn {
  margin-top: 0;
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--color-border); border-radius: 9px;
  padding: 11px 12px; text-decoration: none;
  font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-regular);
  color: var(--color-text-muted);
}
.karriere-btn svg { flex: 0 0 auto; transition: transform var(--duration-hover) var(--ease-smooth); }
.karriere-btn:hover { border-color: var(--color-text-muted); }
.karriere-btn:hover svg { transform: translateX(3px); }

/* ---- Stellen-Akkordeon (Original: Klappzeile mit „+") -------------------
   Desktop @1440 zugeklappt: eine Zeile - Titel/Fachgebiet | Ort | Datum | +.
   Die drei Bloecke stehen im gemessenen 47px-Raster (Ort-Symbol x=776,
   Datum x=972), das „+" ganz rechts. Datum in Original-Grau rgb(201,201,201);
   wir nehmen die projektweit nachgedunkelte Variante (--color-text-faint) fuer
   WCAG. Attribut-Plaketten sind zugeklappt verborgen und erscheinen erst beim
   Aufklappen (bzw. @390 dauerhaft, s.u.). */
.job-card { margin: 0; }
.job-acc { }
.job-acc__row {
  display: flex; align-items: center; flex-wrap: wrap;
  column-gap: 47px; row-gap: 16px;
  padding: 0 0 22px; border-bottom: 1px solid var(--color-border);
  cursor: pointer; list-style: none;
}
.job-acc__row::-webkit-details-marker { display: none; }
.job-acc__row:focus-visible { outline: 2px solid var(--color-brand-blue-text); outline-offset: 4px; }
.job-acc__main { display: flex; flex-direction: column; gap: 6px; }
.job-acc__title {
  font-size: var(--fs-body); font-weight: var(--fw-bold); line-height: 22.5px;
  color: var(--color-text-muted);
}
.job-acc__row:hover .job-acc__title { text-decoration: underline; text-underline-offset: 3px; }
.job-acc__sub { font-size: var(--fs-micro); line-height: 18px; color: var(--color-text-muted); }
.job-acc__attr { display: flex; align-items: center; gap: 47px; }
.job-acc__loc { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-body); color: var(--color-text-muted); }
.job-acc__loc svg { flex: 0 0 auto; }
.job-acc__date { font-size: var(--fs-body); color: var(--color-text-faint); }
.job-acc__toggle {
  margin-left: auto; position: relative; flex: 0 0 auto;
  width: 18px; height: 18px; color: var(--color-text-muted);
}
.job-acc__toggle::before, .job-acc__toggle::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: currentColor; border-radius: 1px;
}
.job-acc__toggle::before { width: 16px; height: 2px; transform: translate(-50%, -50%); }
.job-acc__toggle::after  { width: 2px; height: 16px; transform: translate(-50%, -50%); transition: transform var(--duration-hover) var(--ease-smooth); }
.job-acc[open] .job-acc__toggle::after { transform: translate(-50%, -50%) scaleY(0); }

/* Attribut-Plaketten: eigene Zeile (basis 100% -> Umbruch), zugeklappt verborgen. */
.job-acc__pills { display: none; order: 5; flex-basis: 100%; flex-wrap: wrap; gap: 10px; }
.job-acc[open] .job-acc__pills { display: flex; }
.job-pill {
  font-size: var(--fs-micro); line-height: 18px; color: var(--color-text-muted);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  /* Seitliches Polster 8px, nicht 13px (Lauf 5: Pill-Text @390 auf x=55 bei
     Inhaltskante 46, @1440 auf x=571 bei Spaltenkante 562 - je 8px + Rahmen). */
  padding: 7px 8px; white-space: nowrap;
}

.job-acc__body { padding-top: 20px; }
.job-acc__body p { color: var(--color-text-muted); margin: 0 0 16px; }
@media (prefers-reduced-motion: no-preference) {
  .job-acc[open] .job-acc__body { animation: job-acc-fade var(--duration-hover) var(--ease-smooth); }
  @keyframes job-acc-fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
}
.link-arrow--dark { color: var(--color-brand-blue-text); font-weight: var(--fw-regular); display: inline-flex; align-items: center; gap: var(--space-2); }

@media (max-width: 809px) {
  /* Lauf-5-Kette @390 am Original: Intro-Ende 2640 -> "Initiativbewerbung"
     2691 = 51px; "Jetzt bewerben"-Ende 2843 -> "Offene Stellen" 2881 = 38px
     Spaltenabstand. */
  .karriere-reihe { flex-direction: column; align-items: stretch; gap: 39px; margin-top: 51px; }
  .karriere-init, .karriere-stellen { width: 100%; flex: 0 0 auto; padding: 0; }
  /* Absatz -> "Jetzt bewerben" @390 im Original 23px (2773 -> 2796);
     die 22px gelten nur am Desktop. */
  .karriere-init p { margin-bottom: 23px; }
  /* Original @<=809: die Karten laufen ueber die volle Breite und der Titel
     ist darin zentriert (getComputedStyle: card-title ta=center, w=344) -
     auf dem Desktop umschliesst die Box den Titel eng, dort bleibt er links. */
  .karriere-init h2, .karriere-stellen h2 { text-align: center; }

  /* Original @390: die Stelle ist eine gerundete, umrandete Karte. Reihenfolge
     darin: Titel, Fachgebiet, Attribut-Plaketten, dann Ort (links) + Datum
     (rechts). Kein „+" - die Zeile bleibt still. */
  /* Kartenmasse @390 am Original (Lauf 5): Innenpolster 22px rundum (Titel
     x=46 = 23 Container + 1 Rahmen + 22), Titel -> Fachgebiet 5px,
     Plakettenzeilen im 8/12px-Raster, Plaketten -> Ort/Datum 20px
     (row-gap 14 + 6 Zusatz). */
  .job-card { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 22px; }
  .job-acc__row { flex-direction: column; align-items: stretch; flex-wrap: nowrap; column-gap: 0; row-gap: 14px; border-bottom: none; padding: 0; cursor: default; }
  .job-acc__main { order: 1; gap: 5px; }
  .job-acc__pills { display: flex; order: 2; flex-basis: auto; margin: 0; gap: 8px 12px; }
  .job-acc__attr { order: 3; gap: 0; justify-content: space-between; margin-top: 6px; }
  .job-acc__toggle { display: none; }
  .job-acc__body { padding-top: 16px; }
}

/* Impressionen: mittiges Bild 903x508, seitliche Folien 749x422
   angeschnitten. Buehne volle Breite mit overflow:hidden. */
/* Abstand Intro-Absatz (Ende 2085) -> Bildreihe (2159, scroll-primed) = 74px
   am Desktop; unterhalb 1200 bleibt der zuvor abgeglichene Mobilwert 47px. */
.impressionen-buehne { margin-top: 47px; overflow: hidden; }
@media (min-width: 1200px) { .impressionen-buehne { margin-top: 74px; } }
.impressionen-reihe { display: flex; justify-content: center; align-items: center; gap: 74px; }
/* ACHTUNG Messfalle: beim statischen Load steht das Original-Karussell
   bei 899x506/x=251 - aber im scroll-geprimten Zustand (der Messbasis und
   dem, was Besucher nach dem Scrollen sehen) ist die mittlere Folie
   aktiviert: 903x508, exakt zentriert, Luecken 75/74. Genau so bauen wir
   den Ruhezustand. */
.impressionen-mitte {
  flex: 0 0 903px; width: 903px; height: 508px; object-fit: cover;
  border-radius: 18px;
}
.impressionen-seite {
  flex: 0 0 749px; width: 749px; height: 422px; object-fit: cover;
  border-radius: 18px;
  /* Die nicht-aktiven Folien liegen im Original auf opacity .69 (Framer-
     Wrapper der Seitenitems, Lauf 5 per getComputedStyle nachgemessen) -
     volle Deckkraft machte beide Anschnitte im Differenzbild komplett rot. */
  opacity: .69;
}
/* Die linke Folie sitzt im Original 1px weiter links als die rechte
   (Luecken 75/74 statt 74/74) - transform statt margin, damit die
   Zentrierung der Reihe unangetastet bleibt. */
.impressionen-seite:first-child { transform: translateX(-1px); }

@media (max-width: 809px) {
  /* Lauf-5-Kette @390 am Original: Intro-Ende 1468 -> erstes Portrait 1519
     = 51px, Kartenabstand 40px (Original 39,5/38,5 mit Framer-Bruchwerten;
     40 trifft die Portraits auf 1782/2068 und "Stellenangebote" auf 2411). */
  .team-grid { flex-direction: column; align-items: center; gap: 40px; margin-top: 51px; }
  /* Original @390: mittleres Motiv 747x420 randlos ueber die volle Breite
     (bleedet beidseitig), Seitenmotive laufen ausserhalb. Abstand
     Intro-Ende 3408 -> Bild 3459 = 51px (wie am Desktop-Verhaeltnis). */
  .impressionen-buehne { margin-top: 51px; }
  .impressionen-reihe { gap: var(--space-4); }
  /* max-width:none ist hier entscheidend: die sitewide img-Regel
     (max-width:100%) klemmte das 747px-Element auf 390px - object-fit:cover
     zeigte dann einen HERAUSGEZOOMTEN Ausschnitt des 1200x800-Assets
     (Lauf 5: Banner-Text ~25% kleiner, Ecken sichtbar). Das Original
     laesst die 747px stehen und schneidet per Viewport (x=-178). */
  .impressionen-mitte { flex: 0 0 747px; width: 747px; max-width: none; height: 420px; }
  .impressionen-seite { display: none; }
}

/* ---- Kopfbereich ----
   Am Original gemessen (1440px): h1 bei y=197 (Kopfzeile 74px + 123px),
   Titel 32/700, danach drei zentrierte Absaetze in einer 810px breiten
   Spalte bei x=315 (y=256 / 369 / 504). Zwischen den Absaetzen steht genau
   eine Leerzeile (22,5px) - wie auf den Rechtstextseiten arbeitet das
   Original auch hier ohne Margins.
   Die 810px stehen bewusst lokal statt in der sitewide .section-intro-Regel
   (62ch), weil sich sechs weitere Seiten diese Klasse teilen. */
/* Unteres Polster 74px (Original: Sektion endet y=668, letzter Absatz
   y=594) - die sitewide 96px machten den Kopf 22px zu hoch und schoben
   alles darunter mit. */
.section--unternehmen-intro { padding-top: 123px; padding-bottom: 74px; }
/* Vorstand-Kopf 123px unter dem Zeitstrahl (Original: H2 y=938, Strip
   endet 815). */
/* Untere Bloecke: Polster explizit gesetzt, damit die Abschnittskette
   dieselben y-Positionen wie das Original trifft (Vorstand 815..1483,
   Stellenangebote 1483.., Impressionen-Kopf y=1984). Die sitewide 96px
   der .section-Regel summierten sich hier auf ~255px Versatz. */
/* Unten 123px: Rollen enden 1360, "Stellenangebote" beginnt 1483 (die
   frueheren 107px stammten aus der Inter-Aera mit anderen Zeilenhoehen).
   Nur Desktop - die Mobilkette war separat abgeglichen. */
.section--vorstand { padding-top: 123px; padding-bottom: 107px; }
/* 125 statt 123: die Karriere-Sektion stand pixel-korreliert 2px zu hoch
   (Rundungsakkumulation der 22,5px-Zeilen darueber); Impressionen-pt
   gleicht die 2px unten wieder aus (126->124). */
@media (min-width: 1200px) { .section--vorstand { padding-bottom: 125px; } }
/* Original @390 (Lauf 5): Vorstand-Polster 96/96 (Sektion beginnt 1211,
   H2 auf 1307; letzte Rolle endet 2316, "Stellenangebote" auf 2411). */
@media (max-width: 809px) {
  /* pb 97 statt 96: die 22,5px-Zeilen darueber runden sich @390 auf -1px
     Versatz auf (Kette nachgemessen: "Stellenangebote" 2410 statt 2411). */
  .section--vorstand { padding-top: 96px; padding-bottom: 97px; }
}
.section--karriere { padding-top: 0; padding-bottom: 0; }
/* Impressionen-Kopf 123px unter dem Karriere-Ende (Original: Knopf endet
   1861, H2 bei 1984) - die 96px liessen alles darunter 27px zu hoch stehen.
   +3px: die Sektionen darueber enden bei uns in Summe 3px hoeher (Framer
   arbeitet mit Bruchwerten, die sich beim Runden aufsummieren); hier
   neutralisiert, damit H2, Absatz und vor allem die grossflaechigen Fotos
   dieser Sektion deckungsgleich mit dem Original liegen. */
.section--impressionen { padding-top: 96px; padding-bottom: 123px; }
@media (min-width: 1200px) { .section--impressionen { padding-top: 124px; } }
/* Original @390 (Lauf 5): unten 96 statt 123 - Bild endet 3879, Auge-Logo
   der CTA-Sektion beginnt 3998 (= 96 + 23 CTA-Polster). Steht NACH der
   Basisregel, damit der Override bei gleicher Spezifitaet greift. */
@media (max-width: 809px) { .section--impressionen { padding-top: 97px; padding-bottom: 96px; } }
.section--unternehmen-intro h1 { margin-bottom: 21px; }
.section--unternehmen-intro .section-intro {
  max-width: 810px; margin-left: auto; margin-right: auto; margin-bottom: 22.5px;
}
.section--unternehmen-intro .section-intro:last-child { margin-bottom: 0; }

/* Seitenrand unterhalb 1200px: 23px statt der sitewide 39px (am Original
   gemessen, /opt/tooling/cpad.mjs). */
/* Auf `main` statt auf `.container`: der Seitenrand wird auf dieser Seite
   teils an anderen Elementen (z.B. .fas-sec) angewendet - so erben ihn alle. */
@media (max-width: 1199px) { main { --container-pad: 23px; } }
/* Kopfabstand unter 1200px = 76px (Titel auf y=150), nicht 123px. Steht nach
   der Grundregel, damit es bei gleicher Spezifitaet gewinnt. */
@media (max-width: 1199px) {
  .section--unternehmen-intro { padding-top: 76px; padding-bottom: 51px; }
  /* Original @<=1199: Titel linksbuendig ueber die volle Spaltenbreite
     (getComputedStyle: h1 ta=left, x=23, w=1153) - nicht zentriert. */
  .section--unternehmen-intro h1 { text-align: left; }
}