/* =============================================================================
   Führerscheinklassen – Ergänzungen zur Vorschau
   Bewusst eigene Datei, style.css bleibt unangetastet.
   ============================================================================= */

/* --- Gestapelte Klassenblöcke --------------------------------------------- */
/* .course-details ist im Theme auf eine Sektion pro Seite ausgelegt
   (130px oben / 95px unten). Bei 20 Blöcken untereinander viel zu luftig. */
.course-details-stacked {
  padding: 55px 0 45px;
  scroll-margin-top: 120px; /* Sprungziel nicht unter den Sticky-Header schieben */
}

.course-details-stacked + .course-details-stacked {
  border-top: 1px solid rgba(0, 0, 0, 0.10);
}

.course-details-stacked h2 {
  margin-bottom: 20px;
}

/* Textspalte ohne Bild über die volle Breite */
.course-details .text-col.col-lg-12 {
  padding-left: 15px;
  padding-right: 15px;
}

/* --- Inhaltsverzeichnis ---------------------------------------------------- */
.klassen-toc {
  padding: 70px 0 40px;
}

.klassen-toc h2 {
  margin-bottom: 15px;
}

/* --- Kachelraster (Sprungmarken) ---------------------------------------- */
/* Nach Wireframe „Welche Klasse brauchst du?“: fünf Kacheln pro Reihe,
   zeilenweise gefüllt. Jede Kachel springt zum Abschnitt der Klasse. */
.klassen-karten {
  margin: 30px 0 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.klassen-karte > a {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 18px 18px 16px;
  border: 1px solid #e0e2e4;
  border-radius: 4px;
  background: #ffffff;
  transition: all 0.3s ease;
}

.klassen-karte > a:hover,
.klassen-karte > a:focus-visible {
  border-color: #FF8F1F;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  outline: none;
}

.klassen-karte .kuerzel {
  color: #FF8F1F;
  font-family: 'Roboto', sans-serif;
  font-weight: 800;
  font-size: 26px;
  line-height: 1.2;
}

.klassen-karte .text {
  margin: 6px 0 12px;
  color: #777777;
  font-size: 14px;
  line-height: 21px;
}

/* „Details“ sitzt immer unten, auch wenn der Text unterschiedlich lang ist */
.klassen-karte .mehr {
  margin-top: auto;
  color: #111111;
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
  font-size: 13px;
  line-height: 20px;
}

.klassen-karte .mehr i {
  margin-left: 6px;
  color: #FF8F1F;
  transition: transform 0.3s ease;
}

.klassen-karte > a:hover .mehr i {
  transform: translateX(4px);
}

@media only screen and (max-width: 1199px) {
  .klassen-karten {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media only screen and (max-width: 991px) {
  .klassen-karten {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media only screen and (max-width: 599px) {
  .klassen-karten {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Sanftes Scrollen zu den Sprungmarken, außer bei reduzierter Bewegung */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* --- Fahrzeugblöcke im Fuhrpark ------------------------------------------- */
/* Die Blöcke nutzen .wel-block-three aus dem Theme. Dessen Regeln in style.css
   sind auf .welcome-three beschränkt (Zeile 5708 ff.) und greifen hier nicht –
   deshalb dieselben Werte noch einmal, scoped auf .course-details.
   style.css bleibt unangetastet. */
.course-details .wel-block-three {
  position: relative;
  margin-bottom: 35px;
}

.course-details .wel-block-three .inner-box {
  position: relative;
  display: block;
  padding-left: 50px;
}

.course-details .wel-block-three .icon {
  position: absolute;
  left: 0;
  top: -4px;
  line-height: 1em;
  color: #FF8F1F;
  font-size: 32px;
}

.course-details .wel-block-three h6 {
  position: relative;
  color: #111111;
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 12px;
}

.course-details .wel-block-three .text {
  line-height: 1.75em;
}