/* ============================================================
   Seite: Startseite (/) — Präfix igr-start-
   Ergänzt igr-layout.css (dort: igr-hero, igr-start-mission …).
   Wird automatisch enqueued (functions.php, seiten/*.css)
   ============================================================ */

/* ---------- Hero: Buttons unter dem Einstiegstext ---------- */
.igr-start-herobtns {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

/* ---------- Mission: Fließtext unter dem Statement ---------- */
.igr-start-missiontext {
  max-width: 760px;
  margin: 26px auto 0;
}
.igr-start-missiontext p {
  font-size: 16px;
  line-height: 1.75;
  color: #55617a;
  margin: 0 0 16px;
}
.igr-start-missiontext p:last-child { margin-bottom: 0; }

/* ---------- Bereiche: Link am Ende einer Splitkarte ---------- */
.igr-splitkarte .igr-start-bereichlink {
  display: inline-block;
  margin-top: 18px;
  font-weight: 700;
  font-size: 15px;
  color: #0D9DE5 !important;
  text-decoration: none;
}
.igr-splitkarte .igr-start-bereichlink:hover { text-decoration: underline; }

/* ---------- Bereiche: drei gleich große Karten (Claas 07.09.2026) ----------
   Vorher richtete sich die Kartenhöhe nach der Textlänge, Bereich 01 und 03
   waren deutlich höher als 02. Grid mit gleichen Zeilen: alle drei bekommen
   die Höhe der höchsten Karte, der Text bleibt vertikal zentriert. */
.igr-start-bereiche .igr-bereiche {
  display: grid;
  grid-auto-rows: 1fr;
}
.igr-start-bereiche .igr-split-bild { min-height: 300px; }
@media (max-width: 820px) {
  .igr-start-bereiche .igr-bereiche { grid-auto-rows: auto; }
  .igr-start-bereiche .igr-split-bild { min-height: 200px; }
}

/* ---------- Abschluss-CTA (ersetzt die Newsletter-Attrappe, 24.08.2026) ---------- */
.igr-start-abschlussbtns {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

/* ---------- Mitglied-/Sponsor-Karten (Claas 31.08.2026) ----------
   Der Bodenfläche-Banner steht jetzt darüber und ist der wichtigere Weg.
   Die beiden Karten werden deshalb flach: Text und Button nebeneinander
   statt untereinander, das halbiert die Höhe. */
.igr-start-cta .igr-cta-karte {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 26px;
  padding: 22px 26px;
}
.igr-start-cta .igr-cta-karte-text { min-width: 0; }
.igr-start-cta .igr-cta-karte h3 {
  font-size: 20px;
  margin: 0 0 6px;
}
.igr-start-cta .igr-cta-karte p {
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0;
}
.igr-start-cta .igr-cta-karte .igr-btn {
  white-space: nowrap;
  padding: 12px 22px;
  font-size: 14.5px;
}

@media (max-width: 980px) {
  .igr-start-cta .igr-cta-karte {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .igr-start-cta .igr-cta-karte .igr-btn { justify-self: start; }
}