:root {
	  --bs-body-bg: #121212;
	  --bs-body-color: #e1e1e1;
	  --card-bg: #1e1e1e;
	  --card-color: #e1e1e1;
	  --list-bg: #1e1e1e;
	  --list-color: #e1e1e1;
	  --form-bg: #1e1e1e;
	  --form-color: #5f5f5f;
	  --link-color: #ffffff;
	  --nav-offset: 80px; 
	}
    body {
      background-color: var(--bs-body-bg);
      color: var(--bs-body-color);
      transition: background-color .3s, color .3s;
      font-family: 'Segoe UI', sans-serif;
    }
    .navbar, footer {
      background-color: rgba(18,18,18,0.85);
      transition: background-color .3s;
    }
    .section-title {
      margin-bottom: 2rem;
      font-weight: 600;
      color: var(--card-color);
    }
    .navbar-brand img {
      height: 40px;
      margin-right: .5rem;
      vertical-align: middle;
    }
    .header {
      background: url('../images/Banner2.png') no-repeat;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }
    .header::after {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.4);
    }
    .card {
      background-color: var(--card-bg);
      color: var(--card-color);
      transition: background-color .3s, color .3s;
	  transition: transform .2s, box-shadow .2s;
    }
    .card-title,
    .card-text {
      color: var(--card-color);
    }
    .list-group-item {
      background-color: var(--list-bg);
      color: var(--list-color);
      transition: background-color .3s, color .3s;
    }
    form .form-label {
      display: block;
      margin-bottom: .5rem;
      font-weight: 500;
    }
    form .form-control {
      background-color: var(--form-bg);
      color: var(--form-color);
      border: none;
      border-radius: .25rem;
      transition: background-color .3s, color .3s;
    }
    form .form-control:focus {
      outline: none;
      box-shadow: 0 0 0 .2rem var(--link-color);
    }
    a, .nav-link {
      color: var(--link-color);
    }
    a:hover, .nav-link:hover {
      text-decoration: underline;
    }
	.btn-primary {
	  background-color: var(--link-color);
	  border-color: var(--link-color);
	  color: #000000;
	}
	.btn-primary:hover,
	.btn-primary:focus {
	  background-color: var(--link-color);
	  border-color: var(--link-color);
	  opacity: 0.85;
	}

	.btn-outline-primary,
	.btn-outline-light {
	  color: var(--link-color);
	  border-color: var(--link-color);
	}
	.btn-outline-primary:hover,
	.btn-outline-light:hover,
	.btn-outline-primary:focus,
	.btn-outline-light:focus {
	  background-color: #000000;
	  color: #fff;
	}
	.navbar {
	  position: sticky;
	  top: 0;
	  background-color: rgba(18,18,18,0.85);
	  z-index: 10;
	}
	.header::after {
	  content: '';
	  position: absolute;
	  inset: 0;
	  background: rgba(0,0,0,0.4);
	}
	header,
	section {
	  scroll-margin-top: var(--nav-offset);
	  padding-top: calc( var(--nav-offset) + 2rem );
	  padding-bottom: 2rem;
	}
	.blog-post {
	  background-color: var(--card-bg);
	  color: var(--card-color);
	  padding: 2rem;
	  border-radius: .5rem;
	  box-shadow: 0 .5rem 1rem rgba(0,0,0,0.2);
	  margin-bottom: 2rem;
	  transition: background-color .3s, color .3s;
	}
	.blog-post .post-meta {
	  font-size: .9rem;
	  color: var(--list-color);
	  margin-bottom: 1rem;
	}
	.blog-post p + p {
	  margin-top: 1rem;
	}
	.team-card-link {
	  text-decoration: none;
	  color: inherit;
	  display: block;
	}
	.team-card-link:hover .card {
	  transform: translateY(-4px);
	  box-shadow: 0 .5rem 1rem rgba(0,0,0,0.2);
	}
	#preloader {
	  position: fixed;
	  inset: 0;
	  background-color: var(--bs-body-bg);
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  z-index: 9999;
	  transition: opacity .5s ease;
	}
	#preloader.hidden {
	  opacity: 0;
	  pointer-events: none;
	}
	.preloader-logo {
	  width: 220px;
	  animation: pulse 1.5s ease-in-out infinite;
	}
	@keyframes pulse {
	  0%, 100% { transform: scale(1); }
	  50%      { transform: scale(1.1); }
	}

/* Cards gleichmäßig aufziehen und Button ans Karten‐Ende schieben */
.card {
  display: flex;
  flex-direction: column;
}
.card-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.card-body .btn {
  margin-top: auto;
}

/* Mehr Abstand vor dem Footer-Block */
.card-body > .mt-auto {
  margin-top: 1.5rem;
}

/* Einheitliche Button- und Text-Ausrichtung */
.card-text small {
  display: block;
}