/* About: eigener Hintergrund */
.page-about {
  background: #e9eef1;
}

/* Portraits nebeneinander */
.page-about .about-portraits {
  display: flex;
  justify-content: center;
  gap: 3rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.page-about .portrait {
  text-align: center;
}

.page-about .avatar--round {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 auto 0.5rem;
}

.page-about .about-sublead {
  text-align: center;
  max-width: 56rem;
  margin: 1.5rem auto 0;
}

/* ============================================================
   TIMELINE  –  Finale Version
   ============================================================ */
.timeline-section {
  max-width: 960px;        /* Breite begrenzen */
  margin: 4rem auto;       /* zentriert + Abstand nach oben/unten */
  padding: 0 1.5rem;       /* links/rechts Luft geben, v.a. auf iPad/Mobile */
}

/* Optional, falls der graue Kasten selbst noch eingerahmt werden soll */
.timeline {
  background: #f4f5f7;
  padding: 2rem 2rem 3rem;
  border-radius: 16px;
}

/* Überschriften */
.page-about .timeline-heading {
  font-size: 1.4rem;
  margin: 3rem auto 1 rem;
  max-width: 1000px;
}

/* Außenrahmen */
.page-about .timeline-wrapper {
  max-width: 1000px;
  margin: 0 auto 2rem;
  padding: 0 1rem;
}

/* Container für alle Zeilen + Mittellinie */
.page-about .timeline {
  position: relative;
}

/* Mittellinie */
.page-about .timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: #999; /* vorher #ccc */
  transform: translateX(-50%);
  z-index: 0;
}

/* jede Zeile */
.page-about .timeline-row {
  display: flex;
  align-items: center;    /* sorgt dafür, das Inhalt vertikal zentriert ist */
  position: relative;
  margin: 2.5rem 0;
  z-index: 1;
}

/* Die beiden Spalten (linke & rechte Seite) */
.page-about .timeline-col {
  flex: 1;
  min-height: 60px;
  display: flex;            /* wichtig für die Ausrichtung an der Mittellinie */
}

/* Linke Seite: Box an Mittellinie andrücken */
.page-about .timeline-col--left {
  justify-content: flex-end;
}

/* Rechte Seite: Box Richtung Mittellinie schieben */
.page-about .timeline-col--right {
  justify-content: flex-start;
}

/* Die Boxen selbst */
.page-about .timeline-box {
  background: #fff;
  border-radius: 10px;
  padding: 1rem 1.4rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  margin: 0;                    /* GANZ wichtig: keine Abstände mer */
}

/* Punkt in der Mitte jeder Zeile */
.page-about .timeline-dot {
  position: absolute;
  top: 50%;                /* vertikal zentriert */
  left: 50%;               /* horizontal zentriert */
  width: 14px;
  height: 14px;
  background: var(--brand, #003366);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

/* Mobile Ansicht */
@media (max-width: 750px) {
  .page-about .timeline::before {
    left: 14px;
  }
  .page-about .timeline-row {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .page-about .timeline-col--left
  .page-about .timeline-col--right {
    justify-content: flex-start;
  }

  .page-about .timeline-box {
    margin-left: 2.5rem;
    text-align: left;
  }
  
  .page-about .timeline-dot {
    left: 14px;
  }
}

/* Button Persönlichkeit rechts unten */
.fab-personality {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 999px;
  padding: 0.4rem 1.2rem;
  text-decoration: none;
  color: #333;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  z-index: 100;
}

/* Arbeitsprobe vor der Timeline */
.about-work-sample {
  padding: 2rem 1.5rem 0;
  text-align: center;
}

.work-sample-label {
  margin: 0 0 0.75rem;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.work-sample-button {
  display: inline-block;
  max-width: 720px;
  padding: 0.9rem 1.4rem;
  background: var(--brand);
  color: #fff;
  border-radius: 999px;
  font-weight: 600;
  line-height: 1.4;
  box-shadow: var(--shadow-1);
}

.work-sample-button:hover {
  color: #fff;
  background: var(--brand-600);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}

@media (max-width: 600px) {
  .work-sample-button {
    width: 100%;
    border-radius: 14px;
  }
}