/* ============================================================
   Seite: Themen (/themen/) — Präfix igr-th-
   Wird automatisch enqueued (functions.php, seiten/*.css)
   ============================================================ */

/* Seitenkopf: Intro breiter als Standard (600 statt 560) */
.igr-pagehead-inner .igr-intro.igr-th-intro { max-width: 600px; }

/* ---------- Sprungnavigation ---------- */
.et_pb_section.igr-sec.igr-th-sprungnav { padding: 40px 40px 8px !important; }

.igr-th-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.igr-th-pill {
  display: inline-block;
  font-weight: 700;
  font-size: 14px;
  color: #032863 !important;
  background: #fff;
  border: 1px solid #e2e8f1;
  padding: 11px 20px;
  border-radius: 40px;
  text-decoration: none;
  transition: background .16s ease, color .16s ease;
}
.igr-th-pill:hover {
  background: #032863;
  color: #fff !important;
}

/* ---------- Themen-Block: Kopf-Grid (Text + Bild) ---------- */
.igr-th-kopf {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: center;
  margin-bottom: 34px;
}
.igr-th-thema {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.igr-th-blob { width: 48px; height: 48px; }        /* Radius + Verlauf via igr-blob-a…d + igr-grad-… */
.igr-th-label {
  font-family: 'Comfortaa', cursive;
  font-weight: 700;
  font-size: 15px;
  color: #0D9DE5;
}
.igr-th-kopf h2 { margin: 0 0 14px; }
.igr-th-lead {
  font-size: 16px;
  line-height: 1.7;
  color: #55617a;
  margin: 0;
}
.igr-th-bild {
  min-height: 280px;
  border-radius: 20px;
  overflow: hidden;
}
.igr-th-bild--links { order: -1; }                 /* Thema 02 + 04: Bild links */

/* ---------- Detail-Karte ---------- */
.igr-th-detail { border-radius: 24px; padding: 40px 44px; }
.igr-th-detail--weiss   { background: #fff; }      /* auf heller Section */
.igr-th-detail--flaeche { background: #eef2f7; }   /* auf weißer Section */

.igr-th-detail h3 {
  font-family: 'Comfortaa', cursive;
  font-weight: 700;
  font-size: 20px;
  color: #032863;
  margin: 0 0 12px;
}
.igr-th-detail p {
  font-size: 15.5px;
  line-height: 1.75;
  color: #55617a;
  margin: 0 0 14px;
}
.igr-th-detail p:last-child { margin-bottom: 0; }

/* 3-Spalten-Mini-Grid (Thema 01 + 04) */
.igr-th-minigrid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 18px;
  margin-top: 10px;
}
.igr-th-minititel {
  font-family: 'Comfortaa', cursive;
  font-weight: 700;
  font-size: 16px;
  color: #032863;
  margin-bottom: 6px;
}
.igr-th-minigrid p {
  font-size: 14px;
  line-height: 1.55;
  color: #55617a;
  margin: 0;
}
.igr-th-regelkarte {                                /* weiße Karten WHG/PFAS/REACH */
  background: #fff;
  border-radius: 16px;
  padding: 22px 24px;
}

/* 2-Spalten-Gegenüberstellung (Thema 03) */
.igr-th-vergleich {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 10px;
}
.igr-th-vgl-box {
  background: #eef2f7;
  border-radius: 16px;
  padding: 22px 24px;
}
.igr-th-vgl-titel {
  font-family: 'Comfortaa', cursive;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 8px;
}
.igr-th-vgl-titel--gruen { color: #239B30; }
.igr-th-vgl-titel--blau  { color: #04549E; }
.igr-th-vgl-box p {
  font-size: 14.5px;
  line-height: 1.6;
  color: #55617a;
  margin: 0;
}

/* Link „Mehr in Regulatorik & Fachgrundlagen" (Thema 04) */
.igr-th-mehr { margin-top: 26px; }
.igr-th-mehr a {
  font-weight: 700;
  font-size: 15px;
  color: #239B30 !important;
  text-decoration: none;
}

/* ---------- CTA-Section ---------- */
.et_pb_section.igr-sec.igr-th-cta { padding: 20px 40px 72px !important; }

/* ---------- Mobil ---------- */
@media (max-width: 820px) {
  .et_pb_section.igr-sec.igr-th-sprungnav { padding: 28px 20px 6px !important; }
  .et_pb_section.igr-sec.igr-th-cta { padding: 14px 20px 44px !important; }
  .igr-th-kopf { grid-template-columns: 1fr; gap: 24px; }
  .igr-th-bild--links { order: 0; }
  .igr-th-bild { min-height: 220px; }
  .igr-th-detail { padding: 26px 22px; }
  .igr-th-minigrid,
  .igr-th-vergleich { grid-template-columns: 1fr; }
}