:root {
      --primary: #717e62;
      --secondary: #93a47f;
      --danger: #dc3545;
      --success: #28a745;

      --bg: #ffffff;
      --text: #ecece4;
    }

    .primary {
      background: var(--primary);
      background-color: var(--primary);
      color: var(--text);
    
    }

.btn_primary {
  display: inline-block;
  padding: 0.35rem 0.8rem;
  border-radius: 0.375rem;      /* wie .btn */
  background: var(--primary);
  color: var(--text);
  text-decoration: none;
  font-size: 0.875rem;           /* btn-sm */
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.btn_primary:hover,
.btn_primary:focus {
  background-color: color-mix(in srgb, var(--primary) 85%, black);
  color: var(--text);
}

.btn_primary:active {
  background-color: color-mix(in srgb, var(--primary) 75%, black);
  transform: scale(0.97);
}



    .secondary {
      background: var(--secondary);
      background-color: var(--secondary);
      color: var(--text);
    }

    


    .hz_text {
      color: var(--text);
    }

    .hero-image {
      height: 350px;
      object-fit: cover;
      filter: brightness(0.7);
    }

    #hero-text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
      text-align: center;
      text-shadow: 0px 2px 6px rgba(0, 0, 0, 0.6);

    }

    .carousel-item img {
      height: 70vh;
      object-fit: cover;
      filter: brightness(0.75);
    }

    .carousel-caption {
      text-shadow: 0px 2px 6px rgba(0, 0, 0, 0.6);
    }

    footer {
      background-color: #dc3545;
      color: white;
      padding: 10px 0;
      margin-top: 40px;
    }

    .protected {
      display: none;
      padding: 2rem;
    }

    /* Timeline – mobil gestapelt, ab md nebeneinander */
    .timeline {
      position: relative;
    }


    /* Mobil: Zeiten oberhalb, klare Typo; Linie ausblenden für Ruhe */
    .timeline::before {
      content: "";
      display: none;
    }

    .timeline-item {
      position: relative;
      padding-left: 0;
      margin-bottom: 1.25rem;
    }

    .timeline-item .time {
      position: static;
      display: block;
      font-weight: 600;
      margin-bottom: .25rem;
    }


    /* Ab md: klassische Seitenanordnung mit Linie links */
    @media (min-width: 768px) {
      .timeline::before {
        display: block;
        position: absolute;
        left: 120px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: rgba(0, 0, 0, .1);
        content: "";
      }

      .timeline-item {
        padding-left: 8rem;
      }

      .timeline-item .time {
        position: absolute;
        left: 0;
        top: 0;
        width: 100px;
        text-align: right;
        padding-right: .75rem;
        margin-bottom: 0;
      }
    }