*, *::before, *::after {
  box-sizing: border-box !important;
}

.timeline {
      position: relative;
      padding: 0rem 0;
	  padding-bottom: 0;
	  overflow-y: visible; /* Erlaubt der Linie, nach unten zu ragen */
    }

.timeline::before {
  content: "";
  position: absolute;
  top: -2rem;
  bottom: -3rem; /* Lange Linie für PC */
  width: 4px;
  background: var(--bs-gray-300);
  left: 50%;
  transform: translateX(-50%);
    }

    /* Einzelner Eintrag */
    .timeline-item {
      position: relative;
      margin-bottom: 3rem;
    }

    /* Kreis‑Marker */
    .timeline-item::before {
      content: "";
      position: absolute;
      width: 1.5rem;
      height: 1.5rem;
      border-radius: 50%;
      background: var(--bs-primary);
      border: 4px solid var(--bs-body-bg);
      left: 50%;
      transform: translateX(-50%);
      top: 0.25rem;
      z-index: 1;
    }

    /* Inhalt (Card) – rechts bzw. links vom Marker */
    .timeline-content {
      width: calc(50% - 2rem);
      padding: 1rem 1.5rem;
    }

    /* Rechts (Standard) */
    .timeline-item.right .timeline-content {
      margin-left: auto;
      text-align: left;
    }

    /* Links (abwechselnd) */
    .timeline-item.left .timeline-content {
      margin-right: auto;
      text-align: right;
    }

/* 1. Globaler Schutz für die gesamte Seite (sehr wichtig!) */
html, body {
  overflow-x: hidden; /* Verhindert das seitliche Wackeln der kompletten Website */
  width: 100%;
  margin: 0;
  padding: 0;
}

@media (max-width: 768px) {
  /* 2. Den Timeline-Container absolut "zahm" machen */
  .timeline {
    display: block !important;
    width: 100% !important;
    max-width: 100vw !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow-x: hidden !important;
  }

	.timeline::before {
		top: 0 !important; 
		/* Wir setzen bottom auf 0, damit die Linie NICHT mehr rausragt */
		bottom: 0 !important; 
		left: 20px !important;
		transform: none !important;
		/* Optional: Falls die Linie am Ende zu abrupt aufhört, 
		   kannst du die Höhe auf 100% fixieren */
		height: 100% !important; 
	  }

  /* 4. Die Artikel-Container (Reset der Desktop-Breite) */
  .timeline-item {
    display: block !important;
    width: 100% !important;
    margin-bottom: 2rem !important;
    padding: 0 !important;
    left: 0 !important;
  }

  /* 5. Die Punkte (Marker) */
  .timeline-item::before {
    left: 20px !important;
    transform: translateX(-50%) !important;
    z-index: 2;
  }

  /* 6. DER ENTSCHEIDENDE TEIL: Karten-Reset */
  .timeline-item.left .timeline-content,
  .timeline-item.right .timeline-content {
    /* Alle Desktop-Werte gnadenlos überschreiben */
    width: auto !important;
    max-width: calc(100% - 60px) !important; /* Garantiert Platz rechts */
    margin-left: 45px !important; /* Abstand zur Linie */
    margin-right: 15px !important; /* Sicherheitsabstand zum rechten Rand */
    
    left: 0 !important;
    right: auto !important; /* Hebelt das "Einrücken" der linken Karten aus */
    float: none !important;
    text-align: left !important;
    
    /* Box-Modell korrigieren */
    box-sizing: border-box !important;
    display: block !important;
  }
}

    /* Dark‑Mode‑Anpassungen (falls data-bs-theme="dark") */
    [data-bs-theme="dark"] .timeline::before {
      background: var(--bs-gray-700);
    }
    [data-bs-theme="dark"] .timeline-item::before {
      background: var(--bs-primary);
      border-color: var(--bs-dark);
    }