/* Dunkle Darstellung wird von theme.js nur bei dunklem Seitenhintergrund aktiviert. */
.cito-check.cito-dark { color: #fff; }

.cito-check.cito-dark .cito-hero,
.cito-check.cito-dark .cito-form,
.cito-check.cito-dark .cito-result {
  background: transparent;
  box-shadow: none;
}

.cito-check.cito-dark .cito-step-label { color: #d4d4d4; }
.cito-check.cito-dark .cito-progress,
.cito-check.cito-dark .cito-bar { background: #333; }

.cito-check.cito-dark .cito-options span {
  background: #171717;
  border-color: #555;
  color: #fff;
}

.cito-check.cito-dark .cito-options input:checked + span {
  border-color: var(--cito-brand);
  background: color-mix(in srgb, var(--cito-brand) 28%, #171717);
}

.cito-check.cito-dark .cito-options input:focus-visible + span { outline-color: #fff; }

.cito-check.cito-dark .cito-grid-3 input,
.cito-check.cito-dark .cito-mailbox input[type="text"],
.cito-check.cito-dark .cito-mailbox input[type="email"] {
  background: #fff;
  border-color: #ddd;
  color: #20242a;
}

.cito-check.cito-dark .cito-mailbox,
.cito-check.cito-dark .cito-metrics > div,
.cito-check.cito-dark .cito-focus section,
.cito-check.cito-dark .cito-disclaimer,
.cito-check.cito-dark .cito-notice {
  background: #171717;
  color: #fff;
}

.cito-check.cito-dark .cito-secondary {
  background: #444;
  color: #fff !important;
}

.cito-check.cito-dark .cito-restart { color: var(--cito-brand) !important; }
.cito-traffic { display:flex; align-items:center; gap:7px; margin:7px 0 10px; }
.cito-light { width:36px; height:36px; flex:0 0 36px; border-radius:50%; background:#c8ccd0; border:2px solid rgba(0,0,0,.12); opacity:.4; }
.cito-light.is-active { opacity:1; box-shadow:0 0 0 3px rgba(0,0,0,.1); }
.cito-light-green.is-active { background:#3e9b4f; }
.cito-light-orange.is-active { background:#e58a1f; }
.cito-light-red.is-active { background:#cf3f3f; }
.cito-traffic b { margin-left:3px; font-size:.95rem; }

.cito-check.cito-dark .cito-light { background:#666; border-color:rgba(255,255,255,.22); }
.cito-check.cito-dark .cito-light.is-active { box-shadow:0 0 0 3px rgba(255,255,255,.15); }
.cito-check.cito-dark .cito-light-green.is-active { background:#45ad58; }
.cito-check.cito-dark .cito-light-orange.is-active { background:#f09a2f; }
.cito-check.cito-dark .cito-light-red.is-active { background:#e04b4b; }