/* ============================================================
   Kostenloser IT-Sicherheits-Check (/sicherheits-check/)
   Hero: lp-* aus leistung-shared.css, hier nur Feinwerte.
   Werkzeug/Ergebnis: weiße Karten auf dem Seitenverlauf (wie Terminassistent).
   Farben: Türkis #32b4a2, Dunkelblau #004270 / Petrol #223a4f.
   Ampel: ok #1f9d6b, Warnung #d99a00, kritisch #d64541, Hinweis #5b7a93.
   ============================================================ */

.sc-hero,
.sc-body {
  --sc-ok: #1f9d6b;
  --sc-warn: #d99a00;
  --sc-crit: #d64541;
  --sc-info: #5b7a93;
  --sc-ink: #223a4f;
  --sc-ink-soft: #4a5f71;
  --sc-line: #dde5eb;
}

/* ---------------- Hero ---------------- */
.sc-hero .lp-intro-content {
  margin-right: 0;
  max-width: 640px;
}

.sc-hero .sc-headline {
  margin-right: 0;
}

@media (min-width: 1400px) {
  .sc-hero .sc-headline {
    font-size: 76px;
  }

  .sc-hero .lp-intro-col-content {
    padding-top: 170px;
  }
}

.sc-intro-text {
  font-size: 22px;
}

.sc-form {
  width: 100%;
  margin-top: 10px;
}

.sc-label {
  display: block;
  color: #fdfeff;
  font-size: 18px;
  margin-bottom: 8px;
}

.sc-form-row {
  display: flex;
  gap: 12px;
  width: 100%;
}

.sc-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 58px;
  padding: 12px 18px;
  border: 2px solid transparent;
  border-radius: 15px;
  background: #fff;
  color: var(--sc-ink);
  font-family: "CocogooseProNarrow", sans-serif;
  font-size: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.sc-input:focus {
  outline: none;
  border-color: #32b4a2;
}

.sc-input[aria-invalid="true"] {
  border-color: var(--sc-crit);
}

.btn-xl-primary.sc-submit {
  margin-top: 0;
  flex: none;
  min-height: 58px;
  padding: 15px 28px;
  background: #004270;
  border-color: #004270;
  color: #fff;
  cursor: pointer;
  font-size: 1.111rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.btn-xl-primary.sc-submit:hover:not(:disabled),
.btn-xl-primary.sc-submit:focus-visible {
  background: var(--sc-ink);
  border-color: #fdfeff;
}

.btn-xl-primary.sc-submit:disabled {
  opacity: .6;
  cursor: progress;
}

.sc-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  color: #fdfeff;
  font-size: 17px;
  line-height: 1.4;
  cursor: pointer;
}

.sc-check input,
.sc-fcheck input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: #32b4a2;
}

.sc-form-error {
  margin: 12px 0 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: #fff;
  color: var(--sc-crit);
  font-family: "CocogooseProNarrow Semilight", sans-serif;
  font-size: 16px;
}

.sc-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  color: #fdfeff;
  font-size: 16px;
}

.sc-facts li {
  position: relative;
  padding-left: 22px;
}

.sc-facts li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 5px;
  width: 11px;
  height: 6px;
  border-left: 2px solid #fdfeff;
  border-bottom: 2px solid #fdfeff;
  transform: rotate(-45deg);
}

/* Honeypot: für Menschen unsichtbar */
.sc-hp {
  position: absolute !important;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------------- Werkzeug ---------------- */
.sc-tool {
  position: relative;
  z-index: 2;
}

.sc-inner {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 40px 20px 20px;
}

.sc-card {
  background: #fff;
  color: var(--sc-ink);
  border-radius: 18px;
  padding: 32px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
  font-family: "CocogooseProNarrow", sans-serif;
  font-size: 17px;
  line-height: 1.5;
}

.sc-card a {
  color: var(--sc-ink);
  text-decoration: underline;
}

.sc-card-title {
  font-size: 28px;
  line-height: 1.2;
  margin: 0 0 8px;
  color: var(--sc-ink);
  hyphens: manual;
}

.sc-card-sub {
  margin: 0 0 20px;
  color: var(--sc-ink-soft);
}

.sc-progress-domain,
.sc-summary-domain {
  color: #32b4a2;
  word-break: break-all;
}

/* Fortschritt */
.sc-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.sc-steps li {
  position: relative;
  padding-left: 38px;
  min-height: 26px;
  color: #93a3b0;
  transition: color .2s;
}

.sc-steps li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #cfd9e0;
  box-sizing: border-box;
}

.sc-steps li.is-active {
  color: var(--sc-ink);
  font-family: "CocogooseProNarrow Semilight", sans-serif;
}

.sc-steps li.is-active::before {
  border-color: #32b4a2;
  border-right-color: transparent;
  animation: sc-spin .8s linear infinite;
}

.sc-steps li.is-done {
  color: var(--sc-ink);
}

.sc-steps li.is-done::before {
  border-color: #32b4a2;
  background: #32b4a2;
}

.sc-steps li.is-done::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 5px;
  width: 8px;
  height: 4px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}

@keyframes sc-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .sc-steps li.is-active::before {
    animation: none;
    border-right-color: #32b4a2;
  }
}

.sc-progress.is-failed .sc-steps,
.sc-progress.is-failed .sc-card-sub {
  display: none;
}

.sc-progress.is-failed .sc-progress-error {
  margin-top: 10px;
  padding-top: 0;
  border-top: 0;
}

.sc-progress-error {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--sc-line);
}

.sc-progress-error-text {
  margin: 0 0 14px;
  color: var(--sc-crit);
  font-family: "CocogooseProNarrow Semilight", sans-serif;
}

/* Knöpfe */
.sc-btn {
  display: inline-block;
  min-height: 54px;
  padding: 14px 26px;
  border: 0;
  border-radius: 15px;
  background: var(--sc-ink);
  color: #fff;
  font-size: 18px;
  line-height: 1.2;
  cursor: pointer;
  transition: background .15s;
}

.sc-btn:hover:not(:disabled) {
  background: #32b4a2;
}

.sc-btn:disabled {
  background: #a9b5bf;
  cursor: progress;
}

.sc-btn--ghost {
  background: transparent;
  color: var(--sc-ink);
  border: 1px solid var(--sc-ink);
}

.sc-btn--ghost:hover:not(:disabled) {
  color: #fff;
  border-color: #32b4a2;
}

.sc-link {
  border: 0;
  padding: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* ---------------- Ergebnis ---------------- */
.sc-summary {
  display: flex;
  align-items: center;
  gap: 32px;
}

.sc-grade {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: var(--sc-grade, var(--sc-info));
  color: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.sc-grade-letter {
  font-family: "CocogoosePro", sans-serif;
  font-size: 76px;
  line-height: 1;
}

.sc-grade--A { --sc-grade: #1f9d6b; }
.sc-grade--B { --sc-grade: #32b4a2; }
.sc-grade--C { --sc-grade: #d99a00; }
.sc-grade--D { --sc-grade: #e07b39; }
.sc-grade--E { --sc-grade: #d64541; }
.sc-grade--F { --sc-grade: #b3262a; }

.sc-summary-body {
  min-width: 0;
}

.sc-summary-kicker {
  margin: 0;
  font-size: 18px;
  color: var(--sc-ink-soft);
}

.sc-summary-score {
  margin: 2px 0 8px;
  font-family: "CocogoosePro", sans-serif;
  font-size: 40px;
  line-height: 1.15;
  color: #004270;
}

.sc-score-max {
  font-family: "CocogooseProNarrow", sans-serif;
  font-size: 22px;
  color: var(--sc-ink-soft);
}

.sc-summary-text {
  margin: 0 0 14px;
  font-size: 19px;
}

.sc-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sc-counts li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 20px;
  background: #f1f5f7;
  font-size: 15px;
}

.sc-counts li::before,
.sc-badge::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.sc-counts .is-ok { color: var(--sc-ok); }
.sc-counts .is-warnung { color: var(--sc-warn); }
.sc-counts .is-kritisch { color: var(--sc-crit); }
.sc-counts .is-info { color: var(--sc-info); }
.sc-counts li span { color: var(--sc-ink); }

/* Kategorien */
.sc-cats {
  display: grid;
  gap: 28px;
  margin-top: 36px;
}

.sc-cat-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
  color: #fdfeff;
}

.sc-cat-title {
  margin: 0;
  font-family: "CocogoosePro", sans-serif;
  font-size: 30px;
  line-height: 1.2;
  color: #fdfeff;
}

.sc-cat-meta {
  font-family: "CocogooseProNarrow", sans-serif;
  font-size: 16px;
  white-space: nowrap;
}

.sc-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.sc-item {
  position: relative;
  padding: 22px 24px 22px 28px;
  border-radius: 16px;
  background: #fff;
  color: var(--sc-ink);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.12);
  font-family: "CocogooseProNarrow", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  overflow: hidden;
}

.sc-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: var(--sc-c, var(--sc-info));
}

.sc-item--ok { --sc-c: var(--sc-ok); }
.sc-item--warnung { --sc-c: var(--sc-warn); }
.sc-item--kritisch { --sc-c: var(--sc-crit); }
.sc-item--info { --sc-c: var(--sc-info); }

.sc-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: "CocogooseProNarrow Semilight", sans-serif;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--sc-c);
}

.sc-item-title {
  margin: 6px 0 6px;
  font-family: "CocogooseProNarrow Semilight", sans-serif;
  font-size: 20px;
  line-height: 1.25;
  color: var(--sc-ink);
  hyphens: manual;
}

.sc-item-text {
  margin: 0;
  color: var(--sc-ink-soft);
  overflow-wrap: anywhere;
}

.sc-item-rec {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f1f5f7;
  color: var(--sc-ink);
  overflow-wrap: anywhere;
}

.sc-item-rec strong {
  font-family: "CocogooseProNarrow Semilight", sans-serif;
  font-weight: normal;
}

.sc-disclaimer {
  margin: 22px 0 0;
  color: #fdfeff;
  font-size: 15px;
}

/* Nächste Schritte */
.sc-next {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 20px;
  margin-top: 36px;
  align-items: start;
}

.sc-next-expert {
  background: var(--sc-ink);
  color: #fdfeff;
}

.sc-next-expert .sc-card-title,
.sc-next-expert a {
  color: #fdfeff;
}

.sc-next-expert p {
  margin: 0 0 6px;
}

.sc-next-expert .btn-xl-primary.sc-expert-btn {
  display: inline-block;
  color: #fff;
  text-decoration: none;
  margin: 18px 0 14px;
}

.sc-next-phone {
  font-size: 16px;
  color: #d6e2ea;
}

.sc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}

.sc-field {
  min-width: 0;
}

.sc-flabel {
  display: block;
  margin: 0 0 6px;
  font-family: "CocogooseProNarrow Semilight", sans-serif;
  font-size: 16px;
}

.sc-optional {
  font-family: "CocogooseProNarrow", sans-serif;
  color: var(--sc-ink-soft);
}

.sc-finput {
  width: 100%;
  min-height: 50px;
  padding: 10px 14px;
  border: 1px solid #c7d0d8;
  border-radius: 12px;
  background: #fff;
  color: var(--sc-ink);
  font: inherit;
  box-sizing: border-box;
}

.sc-finput:focus {
  outline: none;
  border-color: #32b4a2;
  box-shadow: 0 0 0 3px rgba(50, 180, 162, .2);
}

.sc-finput[aria-invalid="true"] {
  border-color: var(--sc-crit);
}

.sc-fcheck {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 18px 0 16px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--sc-ink-soft);
  cursor: pointer;
}

.sc-report-error {
  margin: 0 0 14px;
  color: var(--sc-crit);
  font-family: "CocogooseProNarrow Semilight", sans-serif;
}

.sc-report-done-title {
  margin: 8px 0 4px;
  font-size: 22px;
  color: var(--sc-ok);
}

.sc-report-done-text {
  margin: 0;
}

/* ---------------- Was wir prüfen ---------------- */
/* Hero-Inhalt (Text, Formular, Bild) über dem eigenen Blur-Ausläufer: nur der Hintergrund läuft weich aus,
   das Bild bleibt voll sichtbar (wie Startseite). Der Hero ist hier kurz, sonst läge das halbe Bild im Schleier. */
.sc-hero > .section-inner {
  position: relative;
  z-index: 3;
}

/* Verlauf wie Startseite: Die Blur-Überblendung beginnt 950px über dem Hero-Ende. Der Hero ist hier nur
   ~900px hoch, dadurch lag der ganze Kopf im Türkis. Hero nach unten verlängern und den folgenden Inhalt
   (Werkzeug, „Was wir prüfen“) per negativem Abstand in diesen Bereich hochziehen – so bleibt oben der
   volle Blau→Türkis-Verlauf sichtbar, die Inhalte stehen an derselben Stelle wie vorher. */
.sc-hero {
  padding-bottom: 900px;
}

.sc-body {
  margin-top: -900px;
}

/* über dem Blur-Ausläufer der Hero-Sektion (.has-blured-end:after, z-index 2) – sonst liegt „Was wir prüfen“ im Schleier */
.sc-about {
  position: relative;
  z-index: 2;
}

.sc-about .sc-inner {
  padding-top: 70px;
  padding-bottom: 90px;
}

.sc-about-headline {
  margin: 0 0 30px;
  color: #fdfeff;
  text-align: center;
}

.sc-about-headline span {
  color: #004270;
}

.sc-about-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.sc-about-col,
.sc-rules {
  padding: 26px 28px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fdfeff;
  font-size: 17px;
  line-height: 1.5;
}

.sc-about-title {
  margin: 0 0 10px;
  font-size: 22px;
  color: #fdfeff;
}

.sc-about-col ul {
  margin: 0;
  padding-left: 20px;
}

.sc-about-col li + li {
  margin-top: 6px;
}

.sc-rules {
  margin-top: 20px;
}

.sc-rules p {
  margin: 0 0 12px;
}

.sc-rules p:last-child {
  margin-bottom: 0;
}

.sc-rules a {
  color: #fdfeff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------------- Responsiv ---------------- */
@media (max-width: 1399px) {
  .sc-hero .lp-intro-content {
    margin-right: 0;
  }
}

@media (max-width: 991px) {
  .sc-items,
  .sc-next,
  .sc-about-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  /* Werkzeugseite: Formular zuerst — Foto auf dem Handy ausblenden */
  .sc-hero .lp-intro-col-visual {
    display: none;
  }

  .sc-hero .lp-intro-content {
    margin-top: 0;
    align-items: stretch;
  }

  .sc-hero .sc-headline {
    text-align: left;
  }

  .sc-intro-text {
    font-size: 18px;
    text-align: left;
  }

  .sc-hero .lp-intro {
    min-height: 0;
    padding-bottom: 30px;
  }

  .sc-form-row {
    flex-direction: column;
  }

  .btn-xl-primary.sc-submit {
    width: 100%;
  }

  .sc-card {
    padding: 24px 20px;
  }

  .sc-summary {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .sc-grade {
    width: 96px;
    height: 96px;
  }

  .sc-grade-letter {
    font-size: 54px;
  }

  .sc-summary-score {
    font-size: 30px;
  }

  .sc-cat-title {
    font-size: 24px;
  }

  .sc-item {
    padding: 18px 18px 18px 22px;
  }

  .sc-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .sc-next-expert .btn-xl-primary.sc-expert-btn {
    width: 100%;
    text-align: center;
  }

  .sc-btn {
    width: 100%;
  }

  .sc-about .sc-inner {
    padding-top: 40px;
    padding-bottom: 60px;
  }

  .sc-about-col,
  .sc-rules {
    padding: 22px 20px;
  }
}