/* ===============================
   Layout / Struktur
   (Grids, Abstände, Flexbox etc.)
   =============================== */

/* Hero-Layout (Startseite, Experience, Training) */
.hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

.hero__left {
  flex: 1 1 auto;
  min-width: 260px;
}

.hero__img {
  flex: 0 0 auto;
  margin: 0;
}

.hero__img img {
  display: block;
  max-width: 180px;
  height: auto;
  border-radius: 12px;
}

/* Buttons im Hero */
.hero__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* Training-Seite: Button mittig unter dem Titel */
/* Experience-Seite: Button mittig unter dem Titel */
.page-experience .hero__actions {
  justify-content: center;
  margin-top: 1.4rem;
}

.page-training .hero__actions {
  justify-content: center;
  margin-top: 1.4rem;
}

/* Spezielle Abstände für "Alle Tätigkeiten" */
.page-experience .hero {
  margin-bottom: 2rem;          /* Abstand Button → erste Card */
}

.page-experience .card-row {
  row-gap: 2rem;                /* mehr Abstand zwischen den Cards */
}

/* Spezielle Abstände für die Training-Seite */
.page-training .hero {
  margin-bottom: 2rem;  /* Abstand Button → Cards */
}

/* Training-Seite: Hero zentriert (kein Bild) */
.page-training .hero {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.training-subtitle {
  font-size: 1.15rem;       /* kleiner als das H1, aber gut lesbar */
  font-weight: 500;         /* weniger dominant */
  margin-top: 0.5rem;       /* etwas Abstand zur H1 */
  color: var(--c1);         /* bleibt dein schönes Blau */
  text-align: center;
  line-height: 1.4;         /* angenehme Lesbarkeit */
}

/* Sections / Layout utils */
hr {
  border: 0;
  height: 1px;
  background: var(--border);
  margin: 14px 0;
}

/* Card-Grids (Index, Experience, Training) */
.card-row {
  display: grid;
  gap: 14px;
}

@media (min-width: 720px) {
  .card-row {
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 1.6rem;
  }
}

/* 2-Spalten-Variante für lange Texte (Alle Tätigkeiten) */
.card-row--two {
  /* mobile: 1 Spalte, übernimmt grid + gap von .card-row */
}

@media (min-width: 720px) {
  .card-row--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mehr Luft zwischen den Tätigkeits-Cards auf der experience-Seite */
#grid {
  gap: 1.8rem;              /* mobile + kleinere Screens */
}

@media (min-width: 720px) {
  #grid {
    gap: 2.5rem;            /* Desktop: mehr Abstand */
  }
}

/* Download-Karten komplett klickbar (Index-Seite) */
.card-row .dl {
  display: block;
  text-decoration: none;
}