#textrahmen31 {
 padding-bottom: 3rem;
}




/* =========================================================
   TG TIMELINE (DESKTOP + RESPONSIVE)
========================================================= */

.tgTimeline{
  --line-w: 15px;                         /* Strich-Dicke */
  --item-max: 750px;                      /* max Blockbreite */
  --space: clamp(4rem, 6vw, 6rem);        /* normaler Abstand zwischen Blöcken */
  --lift: clamp(9rem, 15vw, 10rem);       /* kleiner Lift (nur ein bisschen) */
  --label-lead: 100px;                    /* Blau-Vorlauf im Label */

  /* ✅ Gap / Überlappung zum Balken (damit kein weißer Spalt blitzt) */
  --line-overlap: 2px;                    /* 1–4px je nach Bedarf */

  position: relative;
  display: block;
  padding-block: 5rem;

  /* Stacking Context */
  z-index: 0;
}

/* =========================
   Mittelstrich (dick)
========================= */
.tgTimeline::before{
  content:"";
  position:absolute;
  left:50%;
  top: 1.5rem;
  bottom:0;

  width: var(--line-w);
  transform: translateX(-50%);

  background: var(--color-blue);
  border-radius: 0;

  /* ✅ soll über allem liegen */
  z-index: 50;
  pointer-events: none;
}

/* =========================================================
   ITEM BASIS
========================================================= */
.tgTimeline__item{
  position: relative;

  /* ✅ ein bisschen in den Balken reinziehen,
     damit zwischen Balken und Block nix weiß „blitzt“ */
  width: min(
    var(--item-max),
    calc(50% - (var(--line-w) / 2) + var(--line-overlap))
  );

  padding-top: 3rem;
  margin-bottom: var(--space);
}

/* AB DEM 2. BLOCK */
.tgTimeline__item + .tgTimeline__item{
  margin-top: calc(var(--lift) * -1);
}

/* Rechts (1.,3.,5...) – an rechter Strichkante andocken */
.tgTimeline__item:nth-child(odd){
  margin-left: calc(50% + (var(--line-w) / 2) - var(--line-overlap));
}

/* Links (2.,4.,6...) – an linker Strichkante andocken + leicht hoch */
.tgTimeline__item:nth-child(even){
  margin-right: calc(50% + (var(--line-w) / 2) - var(--line-overlap));
  margin-left: auto;

  /* nur ein bisschen „ineinander“ schieben */
  margin-top: calc(var(--lift) * -1);
}

/* =========================================================
   BILD
========================================================= */
.tgTimeline__media{
  margin: 0;
  position: relative;
  z-index: 1;            /* unter Balken */
  aspect-ratio: 16 / 9;
  overflow: hidden;      /* wichtig */
}

.tgTimeline__media img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================================
   LABEL – halb auf Bildkante + größer
   + mehr Blau vor Text (Richtung Strich)
========================================================= */
.tgTimeline__date{
  position: absolute;

  /* exakt mittig auf Bildoberkante */
  top: 3rem;                 /* MUSS = padding-top vom Item sein */
  transform: translateY(-50%);

  background: var(--color-blue);
  color: var(--color-sand);

  font-size: clamp(1.6rem, 2vw, 2.05rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1;

  padding: .4rem 0.7rem .55rem 0.8rem;
  border-radius: 0;
  white-space: nowrap;

  z-index: 3;               /* unter Balken (Balken ist 50) */
}

/* Rechts-Item: Strich links -> links mehr Blau vor Text */
.tgTimeline__item:nth-child(odd) .tgTimeline__date{
  left: 0;
  padding-left: var(--label-lead);
}

/* Links-Item: Strich rechts -> rechts mehr Blau vor Text */
.tgTimeline__item:nth-child(even) .tgTimeline__date{
  right: 0;
  padding-right: var(--label-lead);
}

/* =========================================================
   TEXT UNTER BILD
========================================================= */
.tgTimeline__content{
  margin-top: 2.5rem;
  text-align: center;
  max-width: 60ch;
  margin-inline: auto;

  padding-inline: clamp(3rem, 4vw, 4rem);
  position: relative;
  z-index: 1; /* unter Balken */
}

.tgTimeline__item:first-child .tgTimeline__content{
  max-width: 62ch;
}

/* =========================================================
   TG TIMELINE – RESPONSIVE (Balken links, alles rechts)
========================================================= */

@media (max-width: 900px){

  /* ✅ Gesamte Timeline prozentual begrenzen */
  .tgTimeline{
      /* z.B. 85–92% */
    margin-inline: auto !important;
     --space: clamp(3rem, 5vw, 4rem);
     
    padding-top: 0;
    padding-bottom: clamp(3rem, 6vw, 5rem);
    --line-overlap: 2px;
      --label-lead: 60px;                    /* Blau-Vorlauf im Label */

  }

  /* ✅ Strich von Mitte nach links */
  .tgTimeline::before{
    left: var(--line-x) !important;
    transform: none !important;
  }

  /* ✅ Alle Items: volle verfügbare Breite rechts vom Strich */
  .tgTimeline__item{
    width: calc(100% - var(--line-x) - (var(--line-w) / 2) + var(--line-overlap)) !important;
    margin-bottom: clamp(5rem, 8vw, 8rem) !important;            
    padding-top: 2.5rem;
    margin-bottom: var(--space);
  }

.tgTimeline__item:last-child{
  margin-bottom: clamp(2.5rem, 6vw, 6rem) !important;
}
  /* Lift/Overlap aus */
  .tgTimeline__item + .tgTimeline__item{
    margin-top: 2.5rem !important;
  }

  /* ✅ odd/even neutralisieren (Desktop-Docking raus) */
  .tgTimeline__item:nth-child(odd),
  .tgTimeline__item:nth-child(even){
    margin-left: calc(var(--line-x) + (var(--line-w) / 2) - var(--line-overlap)) !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
  }

  /* ✅ Label immer links am Item */
  .tgTimeline__date{
    left: 0 !important;
    right: auto !important;

    padding-left: var(--label-lead);
    padding-right: 0.7rem;

    top: 2.5rem;                 /* MUSS = padding-top vom Item sein */
  }

  .tgTimeline__item:nth-child(even) .tgTimeline__date,
  .tgTimeline__item:nth-child(odd)  .tgTimeline__date{
    left: 0 !important;
    right: auto !important;
    padding-left: var(--label-lead);
    padding-right: 0.7rem;
  }

  /* ✅ Text bleibt zentriert */
  .tgTimeline__content{
    padding-left: clamp(3rem, 6vw, 5rem);
    padding-right: clamp(2rem, 6vw, 4rem);
    margin-top: 2rem;
    text-align: center;
  }
  
  .tgTimeline__item:first-child .tgTimeline__content{
  max-width: 50ch;
}
}