/* Über uns: die Chronologie als Zeitstrahl, das Team als Karten */

/* ---- Chronologie ---- */
/* Zwei Stationen nebeneinander lasen sich bisher wie zwei Textblöcke.
   Eine Linie mit Punkten macht die Reihenfolge sichtbar — hier trägt
   die Abfolge tatsächlich Information. */
.company-story{
  position:relative;
  padding-top:calc(var(--section-y) + var(--space-5))!important;
}
.company-story::before{
  content:"";
  position:absolute;
  top:var(--section-y);
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg,
    transparent,
    var(--line) 8%,
    var(--line) 92%,
    transparent);
}
[data-theme=dark] .company-story::before{
  background:linear-gradient(90deg,transparent,var(--line) 8%,var(--line) 92%,transparent);
}

.company-story > div{position:relative}
.company-story > div::before{
  content:"";
  position:absolute;
  top:calc(var(--space-5) * -1 - 4px);
  left:0;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 4px var(--canvas,#fffdf7);
}
[data-theme=dark] .company-story > div::before{box-shadow:0 0 0 4px #14170f}

.company-story .milestone{
  display:block;
  margin-bottom:var(--space-2);
  font-variant-numeric:tabular-nums;
}
.company-story h2{margin-top:0}

/* ---- Team ---- */
.team-grid{gap:var(--space-6) var(--space-4)!important}

.team-grid article{
  background:var(--surface,#fff);
  border:1px solid var(--line);
  border-radius:var(--radius-ui,12px);
  padding:var(--space-3) var(--space-3) var(--space-4);
  display:flex;
  flex-direction:column;
  transition:border-color 160ms var(--ease-out),
             box-shadow 160ms var(--ease-out),
             transform 160ms var(--ease-out);
}
[data-theme=dark] .team-grid article{background:var(--surface);border-color:var(--line)}

@media(hover:hover) and (pointer:fine){
  .team-grid article:hover{
    border-color:#e8c366;
    box-shadow:0 6px 20px #edaf261f;
    transform:translateY(-2px);
  }
}

.team-grid img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:360/380;
  object-fit:cover;
  border-radius:var(--radius-sm,8px);
  margin-bottom:var(--space-3);
  background:var(--sand,#f7f3e9);
}
[data-theme=dark] .team-grid img{background:var(--sand)}

/* Tin hat noch kein Foto: das Monogramm muss die Reihe trotzdem halten */
.team-grid .team-monogram{
  aspect-ratio:360/380;
  height:auto;
  border-radius:var(--radius-sm,8px);
  margin-bottom:var(--space-3);
}
[data-theme=dark] .team-grid .team-monogram{background:var(--sand);color:var(--muted)}

.team-grid h3{
  font-family:var(--font-display);
  font-size:16px;
  font-weight:700;
  letter-spacing:-.015em;
  margin:0 0 2px;
}
/* Die Namen erben sonst --ink und stehen im dunklen Modus auf dunklem Grund */
[data-theme=dark] .team-grid h3{color:var(--ink)}
.team-grid p{
  margin:0;
  font-size:12.5px;
  line-height:1.4;
  color:var(--muted);
}
[data-theme=dark] .team-grid p{color:var(--muted)}

@media(prefers-reduced-motion:reduce){
  .team-grid article,.team-grid article:hover{transform:none;transition:none}
}

@media(max-width:760px){
  /* Untereinander wird aus der Linie ein senkrechter Strahl */
  .company-story::before{
    top:var(--section-y);
    bottom:var(--space-6);
    left:var(--gutter);
    right:auto;
    width:1px;
    height:auto;
    background:linear-gradient(180deg,transparent,var(--line) 6%,var(--line) 94%,transparent);
  }
  [data-theme=dark] .company-story::before{
    background:linear-gradient(180deg,transparent,var(--line) 6%,var(--line) 94%,transparent);
  }
  .company-story{padding-left:calc(var(--gutter) + var(--space-5))!important}
  .company-story > div::before{
    top:7px;
    left:calc(var(--space-5) * -1 - 4px);
  }
  .team-grid{gap:var(--space-5) var(--space-3)!important}
  .team-grid h3{font-size:15px}
}