/* ── /sichtbarkeits-check ─────────────────────────────────────────────────── */
.sc-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr); gap: 48px; align-items: start; }

.sc-list { list-style: none; display: grid; gap: 18px; margin: 8px 0 28px; }
.sc-list li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; }
.sc-num {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--color-navy); color: #fff; font-weight: 700; font-size: 16px;
}
.sc-list h3 { font-size: 17px; color: var(--color-navy); margin: 2px 0 4px; }
.sc-list p { font-size: 15px; line-height: 1.6; color: var(--color-tinte); }

.sc-result { padding: 20px 22px; border-radius: 14px; background: var(--color-eisblau); }
.sc-result h3 { font-size: 17px; color: var(--color-navy); margin-bottom: 6px; }
.sc-result p { font-size: 15px; line-height: 1.6; color: var(--color-tinte); }

.sc-card {
  position: sticky; top: 96px; padding: 28px; border-radius: 18px; background: #fff;
  border: 1.5px solid var(--border); box-shadow: 0 2px 6px rgba(26, 46, 87, 0.05), 0 16px 40px rgba(26, 46, 87, 0.10);
  scroll-margin-top: 96px;
}
.sc-card__title { font-size: 22px; color: var(--color-navy); margin-bottom: 4px; }
.sc-card__sub { font-size: 14px; color: var(--color-stahlgrau-ink); margin-bottom: 20px; }
.sc-field { margin-bottom: 16px; }
.sc-field label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 700; color: var(--color-navy); }
.sc-field input {
  display: block; width: 100%; padding: 12px 14px; font: inherit; font-size: 16px; color: var(--color-tinte);
  border: 1.5px solid #D5DFEA; border-radius: 12px; background: #fff; transition: border-color 0.15s, box-shadow 0.15s;
}
.sc-field input:focus { outline: none; border-color: var(--color-sky); box-shadow: 0 0 0 4px rgba(64, 126, 209, 0.16); }
.sc-field input[aria-invalid="true"] { border-color: #C62828; }
.sc-submit { width: 100%; justify-content: center; border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.sc-submit:disabled { opacity: 0.7; cursor: default; }
.sc-error { margin-top: 12px; font-size: 14px; font-weight: 600; color: #B42318; }
.sc-legal { margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--color-stahlgrau-ink); }
.sc-legal a { color: var(--color-sky-ink); font-weight: 600; }
.sc-done { text-align: center; padding: 12px 0; outline: none; }
.sc-done__icon { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%; background: var(--color-eisblau); color: var(--color-sky-ink); font-size: 26px; font-weight: 700; }
.sc-done h3 { font-size: 20px; color: var(--color-navy); margin-bottom: 8px; }
.sc-done p { font-size: 15px; line-height: 1.6; color: var(--color-tinte); }

.sc-steps { list-style: none; counter-reset: sc; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 8px; }
.sc-steps li { counter-increment: sc; padding: 20px; border-radius: 14px; background: #fff; border: 1px solid var(--border); }
.sc-steps li::before { content: counter(sc); display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 10px; border-radius: 50%; background: var(--color-navy); color: #fff; font-weight: 700; }
.sc-steps strong { display: block; color: var(--color-navy); font-size: 16px; margin-bottom: 4px; }
.sc-steps span { font-size: 14px; line-height: 1.55; color: var(--color-tinte); }

/* Hinweis auf anderen Seiten */
.sc-teaser {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  margin-top: 28px; padding: 20px 24px; border-radius: 16px; background: var(--color-eisblau); border: 1px solid var(--border);
}
.sc-teaser p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--color-tinte); max-width: 640px; }
.sc-teaser strong { color: var(--color-navy); }
.sc-teaser a.lp-btn { white-space: nowrap; }

@media (max-width: 900px) {
  .sc-grid { grid-template-columns: 1fr; gap: 32px; }
  .sc-card { position: static; }
  .sc-steps { grid-template-columns: 1fr; }
}
