/* ========================================
   SECTIONS — Layout-Hoehen fuer Multi-Section-Seiten
   (about.html, career.html). Wird NACH style.css eingebunden.
   index.html bindet diese Datei bewusst NICHT ein.
   ======================================== */
body {
  height: auto;
  overflow-y: auto;
}

.page-section {
  height: 100dvh;
}

/* Timeline: Flow-Section — passt sich an Inhalt an (min-height statt height).
   Damit bleibt die Section mindestens einen Viewport hoch, wächst aber
   wenn der Content mehr Platz braucht. */
.timeline.page-section {
  height: auto;
  min-height: 100dvh;
  overflow: visible;
}

@media (max-width: 900px) {
  /* Timeline wird auf Tablet/Mobile zur Flow-Section (kein Snap), behaelt
     aber min-height: 100dvh. height:auto laesst laengere Timelines
     (Bewerbungsprozess, 5 Steps) nach unten wachsen; die min-height sorgt
     dafuer, dass kurze Timelines (Our History, 3 Steps) den Viewport voll
     ausfuellen statt als halbhohe Section zu enden.
     Muss hier stehen, da sections.css nach style.css geladen wird und
     somit .page-section { height: 100dvh; } ansonsten die Media-Query
     in style.css überschreiben würde. */
  .timeline.page-section {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
    scroll-snap-align: none;
  }

  /* Grid auf 1 Spalte zwingen (überschreibt eventuelle style.css-Regeln). */
  .timeline__steps {
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }
  /* Steps müssen volle Breite haben und nicht fit-content. */
  .timeline__step {
    width: 100% !important;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-04);
    background: var(--color-surface);
    padding: var(--spacing-05) var(--spacing-06);
    border-radius: var(--radius-2xl);
  }

  .timeline__badge {
    width: 52px;
    height: 52px;
    min-width: 52px;
  }

  .timeline__icon {
    width: 26px;
    height: 26px;
  }

  .timeline__card {
    margin-left: 0;
    margin-top: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    flex: 1;
  }

  .timeline__card::before {
    display: none;
  }

  .timeline__step-title {
    font-size: var(--type-quote-small);
  }

  .timeline__step-text {
    font-size: 0.9rem;
  }

  .timeline__note {
    margin-top: var(--spacing-06);
  }
}

.page-section--flow {
  height: auto;
  min-height: auto;
}

/* Job-Detail-Seite: trotz Flow-Layout mindestens einen Viewport hoch,
   damit der Footer auf großen Screens nicht zu früh sichtbar wird.
   jobs-overview--standalone hat min-height NICHT, damit Overview + Footer
   zusammen keinen übermäßigen Scroll-Leerraum erzeugen. */
.job-detail.page-section--flow {
  min-height: 100dvh;
}

/* ========================================
   TIMELINE — Zeitstrahl (.timeline--axis) auf Tablet/Mobile
   ----------------------------------------
   Waagrecht haben drei Spalten unter 900px keinen Platz mehr; die Achse kippt
   auf senkrecht: Punkte links untereinander, Jahr und Text rechts daneben.
   Steht hier statt in style.css, weil sections.css spaeter geladen wird und
   die dortigen Regeln (teils !important) sonst gewinnen wuerden.

   --punkt ist die Groesse des Punktes. Die Linie leitet ihren Anfang davon ab
   (halbe Punkthoehe = Mitte), damit sie bei kleineren Punkten auf schmalen
   Geraeten nicht daneben ansetzt.
   ======================================== */
@media (max-width: 900px) {
  .timeline--axis {
    --punkt: 52px;
  }

  .timeline--axis .timeline__steps {
    grid-auto-flow: row;
    gap: var(--spacing-06);
  }

  .timeline--axis .timeline__step {
    grid-row: auto;
    grid-template-rows: auto auto;
    row-gap: var(--spacing-02);
    grid-template-columns: var(--punkt) 1fr;
    column-gap: var(--spacing-05);
    row-gap: var(--spacing-02);
    align-items: start;
  }

  .timeline--axis .timeline__badge {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
  }

  .timeline--axis .timeline__year {
    grid-column: 2;
    grid-row: 1;
    font-size: var(--type-mono-large);
    line-height: var(--type-mono-large-lh);
  }

  /* Senkrecht traegt die Achse die Ordnung; die Karte darf wieder fliessen. */
  .timeline--axis .timeline__card {
    display: flex;
    grid-column: 2;
    grid-row: 2;
    gap: var(--spacing-02);
  }

  /* Vom eigenen Punkt bis zum naechsten: die negative Untermarge ueberbrueckt
     den Abstand zwischen den Schritten. */
  .timeline--axis .timeline__step::after {
    grid-column: 1;
    grid-row: 1 / -1;
    justify-self: center;
    align-self: stretch;
    width: 1px;
    height: auto;
    margin: calc(var(--punkt) / 2) 0 calc(var(--spacing-06) * -1);
  }

  /* Letzter Schritt: nur noch das Stueck vom Rand bis zum Punkt, sonst liefe
     die Achse ins Leere. */
  .timeline--axis .timeline__step:last-child::after {
    align-self: start;
    height: calc(var(--punkt) / 2);
    margin: 0;
  }
}

@media (max-width: 393px) {
  .timeline--axis {
    --punkt: 48px;
  }
}