/* Grundfarben (aus deinem Branding) */
:root {
  --scb-blue: #0B4F6C;
  --scb-sand: #EDE2D0;
  --scb-turquoise: #6FB3B8;
  --scb-text: #222222;
  
  /* Bootstrap-Variablen überschreiben */
  --bs-primary: var(--scb-blue);
  --bs-primary-rgb: 11, 79, 108;	/* RGB von #0B4F6C */
  
  --bs-accordion-active-bg: var(--scb-sand);
}

body {
  color: var(--scb-text);
}

/* Hero */
.hero-section {
  margin-top: 4rem; /* Platz für fixed Navbar */
  background: linear-gradient(135deg, var(--scb-blue) 0%, #0e607f 40%, var(--scb-sand) 100%);
  color: #fff;
}

.hero-section .btn-outline-primary {
  color: #fff;
  border-color: #fff;
}

.hero-section .btn-outline-primary:hover {
  background-color: #fff;
  color: var(--scb-blue);
}

/* Hero-Bild-Platzhalter */
.hero-image-placeholder {
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
}

/* Section-Abstand bei Unterseiten (unterhalb Navbar) */
.section-top-padding {
  padding-top: 6rem;
}


/* Text */
.text-turquoise {
  color: var(--scb-turquoise);
}

/* Buttons */
.btn-primary {
  background-color: var(--scb-blue);
  border-color: var(--scb-blue);
}

.btn-primary:hover {
  background-color: #093c52;
  border-color: #093c52;
}

.btn-outline-primary {
  color: var(--scb-blue);
  border-color: var(--scb-blue);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--scb-blue);
  border-color: var(--scb-blue);
  color: #fff;
}


/* Accordion-Branding */
.accordion {
  --bs-accordion-bg: #ffffff;
  --bs-accordion-border-color: rgba(0, 0, 0, 0.125);

  /* Button/Textfarben */
  --bs-accordion-btn-color: var(--scb-blue);
  --bs-accordion-color: var(--scb-blue);

  /* Aktiver Zustand */
  --bs-accordion-active-bg: var(--scb-sand);
  --bs-accordion-active-color: var(--scb-blue);

  /* Optional: Fokus-Ring anpassen */
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(11, 79, 108, 0.25);
}

/* Header (Titelzeile) */
.accordion-button {
  color: var(--scb-blue);     /* kräftiger, Markenfarbe */
  font-weight: 600;           /* etwas fetter */
  font-size: 1rem;
}

/* Body (Inhaltsbereich) */
.accordion-body {
  color: var(--scb-text);     /* neutraler Text */
  font-size: 0.95rem;         /* etwas kleiner */
  line-height: 1.6;           /* besser lesbar */
}

.accordion-body {
  background-color: #ffffff;
  border-top: 1px solid rgba(0,0,0,0.05);
  padding-top: 0.75rem;
}


/* Bild-Platzhalter */
    .course-image-placeholder {
      width: 100%;
      min-height: 220px;
      border-radius: 1rem;
      border: 2px dashed rgba(0,0,0,0.15);
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(237, 226, 208, 0.3); /* leichtes Sand-Ton-Overlay */
      text-align: center;
      padding: 1rem;
      color: #666;
      font-size: 0.9rem;
    }

/* Footer */
footer a {
  text-decoration: none;
}
footer a:hover {
  text-decoration: underline;
}

/* Mobile Optimierungen */
@media (max-width: 767.98px) {
  .hero-section {
    text-align: center;
  }
}