/* ============================================================
   Reinigung durch Roboter — Präfix igr-rob-
   /reinigung-durch-roboter/ (Entwurf 27.10.2026)
   Kopf nutzt das Startseiten-Hero (igr-hero, rundes Bild + Badge).
   Wird automatisch enqueued (functions.php, seiten/*.css)
   ============================================================ */

.igr-rob-link {
  color: #04549E;
  font-weight: 700;
  text-decoration: none;
}
.igr-rob-link:hover { text-decoration: underline; }

/* Merksatz unter den vier Problemstellen */
.igr-rob-merksatz {
  margin: 34px auto 0;
  max-width: 640px;
  text-align: center;
  font-family: 'Comfortaa', cursive;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5;
  color: #032863;
}

/* ---------- Boden-Check (navy, interaktiv) ---------- */
.igr-rob-check { text-align: center; }
.igr-rob-check h2 { color: #fff !important; margin: 10px 0 12px; }
.igr-rob-check-intro {
  color: #c3d0e8;
  font-size: 17px;
  line-height: 1.6;
  max-width: 560px;
  margin: 0 auto 30px;
}
.igr-rob-check-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  text-align: left;
}
.igr-rob-check-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 20px;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1.5px solid rgba(255,255,255,.16);
  color: #c3d0e8;
  font-size: 15.5px;
  line-height: 1.5;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.igr-rob-check-item:hover { background: rgba(255,255,255,.1); }
.igr-rob-check-item:has(input:checked) {
  background: rgba(35,155,48,.18);
  border-color: rgba(35,155,48,.75);
  color: #fff;
}
.igr-rob-check-item input {
  appearance: none;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin: 1px 0 0;
  border-radius: 8px;
  border: 2px solid #8fa2c4;
  background: transparent;
  display: grid;
  place-content: center;
  cursor: pointer;
}
.igr-rob-check-item input::after {
  content: "";
  width: 11px;
  height: 6px;
  border-left: 3px solid #fff;
  border-bottom: 3px solid #fff;
  transform: translateY(-2px) rotate(-45deg);
  opacity: 0;
}
.igr-rob-check-item input:checked { background: #239B30; border-color: #239B30; }
.igr-rob-check-item input:checked::after { opacity: 1; }
.igr-rob-check-item input:focus-visible { outline: 3px solid #0D9DE5; outline-offset: 2px; }
.igr-rob-check-titel {
  display: block;
  font-family: 'Comfortaa', cursive;
  font-weight: 700;
  font-size: 16.5px;
  color: #fff;
  margin-bottom: 4px;
}
.igr-rob-check-ergebnis {
  max-width: 720px;
  margin: 26px auto 0;
  background: #fff;
  border-radius: 20px;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  transition: box-shadow .2s;
}
.ist-auffaellig .igr-rob-check-ergebnis { box-shadow: 0 0 0 4px #239B30; }
.igr-rob-check-text {
  margin: 0;
  color: #032863;
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.6;
}
.igr-rob-check-ergebnis .igr-btn[hidden] { display: none; }

/* ---------- Whitepaper-Download ---------- */
.igr-rob-wp {
  display: grid;
  grid-template-columns: 330px 1fr;
  gap: 60px;
  align-items: start;
}
.igr-rob-wp-cover { position: relative; padding: 18px 8px 0; }
.igr-rob-wp-cover img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  transform: rotate(-3deg);
  box-shadow: 0 30px 50px -24px rgba(1,20,58,.55), 0 0 0 1px rgba(3,40,99,.08);
}
.igr-rob-wp-stempel {
  position: absolute;
  top: 30px;
  right: -8px;
  background: #239B30;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 40px;
  transform: rotate(6deg);
  box-shadow: 0 10px 20px -10px rgba(1,20,58,.5);
}
.igr-rob-wp-text h2 { margin: 8px 0 12px; }
.igr-rob-wp-text > p { color: #55617a; font-size: 16.5px; line-height: 1.7; margin: 0; }
.igr-formkarte.igr-rob-wp-form {
  max-width: none;
  margin: 24px 0 0;
  padding: 28px 30px;
  background: #eef2f7;
  box-shadow: none;
}
.igr-formkarte .igr-rob-wp-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.igr-rob-wp-check input { margin-top: 3px; flex: 0 0 16px; }

@media (max-width: 820px) {
  .igr-rob-check-grid { grid-template-columns: 1fr; }
  .igr-rob-wp { grid-template-columns: 1fr; gap: 28px; }
  .igr-rob-wp-cover { max-width: 230px; margin: 0 auto; }
  .igr-formkarte.igr-rob-wp-form { padding: 22px 18px; }
}