/* ==========================================================================
   IT-Souveraenitaets-Selbstcheck (Basix C1, 2026-08-23)
   Ergaenzt assets/basix-c1.css. Nutzt ausschliesslich die vorhandenen
   Design-Tokens des Themes. Primaer-CTA bleibt Blau (--eu-blue).
   ========================================================================== */

/* Das hidden-Attribut muss die Layout-Regeln dieser Datei schlagen. */
.basix-c1-page .sc-section [hidden] { display: none !important; }

/* Umschaltung mit und ohne JavaScript ------------------------------------ */
.basix-c1-page .sc-app { display: none; }
.basix-c1-page .sc-fallback { display: block; }
html.sc-js .basix-c1-page .sc-app { display: block; }
html.sc-js .basix-c1-page .sc-fallback { display: none; }

.basix-c1-page .sc-status { max-width: 780px; margin: 0 auto; }
.basix-c1-page .sc-status:empty { display: none; }

.basix-c1-page .sc-fallback {
  max-width: 780px;
  margin: 0 auto;
  padding: 28px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.basix-c1-page .sc-fallback ul { margin: 0 0 1.1rem; padding-left: 1.2rem; }
.basix-c1-page .sc-fallback li { margin-bottom: .35rem; }

/* Rahmen des Fragebogens -------------------------------------------------- */
.basix-c1-page .sc-app {
  max-width: 780px;
  margin: 0 auto;
}

/* Fortschritt ------------------------------------------------------------- */
.basix-c1-page .sc-fortschritt { margin-bottom: 18px; }
.basix-c1-page .sc-fortschritt-text {
  margin: 0 0 8px;
  font-family: var(--f-mono);
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--low-on-light);
}
.basix-c1-page .sc-fortschritt-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--paper-2);
  border: 1px solid var(--line-soft);
  overflow: hidden;
}
.basix-c1-page .sc-fortschritt-fill {
  display: block;
  height: 100%;
  background: var(--eu-blue);
  transition: width .25s ease;
}
@media (prefers-reduced-motion: reduce) {
  .basix-c1-page .sc-fortschritt-fill { transition: none; }
}

/* Fragen ------------------------------------------------------------------ */
.basix-c1-page .sc-fragen {
  list-style: none;
  margin: 0;
  padding: 0;
}
.basix-c1-page .sc-frage { display: none; }
html.sc-js .basix-c1-page .sc-frage.is-aktiv { display: block; }

/* Der Kasten liegt bewusst auf dem li, nicht auf dem fieldset: eine legend
   unterbricht sonst die Rahmenlinie des fieldset. */
.basix-c1-page .sc-frage {
  padding: 28px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.basix-c1-page .sc-fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  /* fieldset hat als Standard min-width:min-content, das sprengt sonst
     schmale Ansichten. */
  min-width: 0;
}
.basix-c1-page .sc-legend {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0 0 18px;
}
.basix-c1-page .sc-bereich {
  display: block;
  margin-bottom: 10px;
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--eu-blue-deep);
}
.basix-c1-page .sc-bereich-titel {
  display: block;
  margin-top: 5px;
  font-family: var(--f-body);
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mid-on-light);
}
.basix-c1-page .sc-frage-text {
  display: block;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.12rem, 2.1vw, 1.42rem);
  line-height: 1.35;
  color: var(--ink-on-light);
}

/* Antwortoptionen --------------------------------------------------------- */
.basix-c1-page .sc-optionen { display: grid; gap: 10px; }
.basix-c1-page .sc-option {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-3);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.basix-c1-page .sc-option:hover { border-color: var(--eu-blue-bright); background: var(--white); }
.basix-c1-page .sc-option input[type="radio"] {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--eu-blue);
  flex: none;
}
.basix-c1-page .sc-option-text {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink-on-light);
}
/* Sichtbarer Fokus auf der ganzen Option, nicht nur auf dem Kreis. */
.basix-c1-page .sc-option:focus-within {
  outline: 2px solid var(--eu-blue-bright);
  outline-offset: 2px;
  border-color: var(--eu-blue);
}
/* Ausgewaehlte Option. Die Klasse setzt das Skript, :has() ist die
   Absicherung fuer den Fall, dass das Skript spaeter greift. */
.basix-c1-page .sc-option.is-gewaehlt,
.basix-c1-page .sc-option:has(input:checked) {
  border-color: var(--eu-blue);
  background: #EEF3FE;
  box-shadow: inset 0 0 0 1px var(--eu-blue);
}

.basix-c1-page .sc-fehler {
  margin: 14px 0 0;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: #FBEAE9;
  border: 1px solid #EFB4B0;
  color: #8C1D18;
  font-size: .95rem;
}

/* Navigation -------------------------------------------------------------- */
.basix-c1-page .sc-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  margin-top: 18px;
}
.basix-c1-page .sc-nav .sc-weiter { margin-left: auto; }
.basix-c1-page .sc-nav .btn:focus-visible {
  outline: 2px solid var(--eu-blue-bright);
  outline-offset: 2px;
}

/* Ergebnis ---------------------------------------------------------------- */
.basix-c1-page .sc-ergebnis {
  margin-top: 6px;
  padding: 28px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.basix-c1-page .sc-ergebnis:focus-visible { outline: 2px solid var(--eu-blue-bright); outline-offset: 3px; }
.basix-c1-page .sc-ergebnis-titel {
  margin: 0 0 10px;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
}
.basix-c1-page .sc-gesamt {
  margin: 0 0 22px;
  font-size: 1.06rem;
  line-height: 1.6;
  color: var(--ink-on-light);
}

.basix-c1-page .sc-ampeln {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  gap: 12px;
}
.basix-c1-page .sc-ampel {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-left-width: 5px;
  border-radius: var(--radius);
  background: var(--paper-3);
}
.basix-c1-page .sc-ampel-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 6px;
}
.basix-c1-page .sc-ampel-punkt {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: none;
  align-self: center;
}
.basix-c1-page .sc-ampel-marke {
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
}
.basix-c1-page .sc-ampel-titel {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.04rem;
  color: var(--ink-on-light);
}
.basix-c1-page .sc-ampel-text {
  margin: 0 0 6px;
  font-size: .98rem;
  line-height: 1.55;
  color: var(--mid-on-light);
}
.basix-c1-page .sc-ampel-punkte {
  margin: 0;
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--low-on-light);
}

/* Ampelfarben: zusaetzlich zur Farbe steht immer das Wort Gruen, Gelb, Rot. */
.basix-c1-page .sc-ampel-gruen { border-color: #9BD9BC; border-left-color: #0E876F; background: #F2FBF7; }
.basix-c1-page .sc-ampel-gruen .sc-ampel-punkt { background: #0E876F; }
.basix-c1-page .sc-ampel-gruen .sc-ampel-marke { color: #0B5F3B; }

.basix-c1-page .sc-ampel-gelb { border-color: #E9C88C; border-left-color: #C98A12; background: #FDF7EC; }
.basix-c1-page .sc-ampel-gelb .sc-ampel-punkt { background: #C98A12; }
.basix-c1-page .sc-ampel-gelb .sc-ampel-marke { color: #7A4E00; }

.basix-c1-page .sc-ampel-rot { border-color: #EFB4B0; border-left-color: #B3261E; background: #FDF2F1; }
.basix-c1-page .sc-ampel-rot .sc-ampel-punkt { background: #B3261E; }
.basix-c1-page .sc-ampel-rot .sc-ampel-marke { color: #8C1D18; }

.basix-c1-page .sc-disclaimer {
  margin: 0 0 20px;
  font-size: .88rem;
  line-height: 1.55;
  color: var(--low-on-light);
}
.basix-c1-page .sc-cta { margin: 0 0 12px; }
.basix-c1-page .sc-neustart { margin: 0 0 28px; }
.basix-c1-page .sc-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: .92rem;
  color: var(--eu-blue-deep);
  text-decoration: underline;
  cursor: pointer;
}
.basix-c1-page .sc-link:focus-visible { outline: 2px solid var(--eu-blue-bright); outline-offset: 2px; }

/* Lead-Block -------------------------------------------------------------- */
.basix-c1-page .sc-lead {
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.basix-c1-page .sc-lead h3 {
  margin: 0 0 8px;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
}
.basix-c1-page .sc-lead > p {
  margin: 0 0 18px;
  color: var(--mid-on-light);
}
.basix-c1-page .sc-lead .basix-form { max-width: none; padding: 0; border: 0; background: none; }

/* Mobil ------------------------------------------------------------------- */
@media (max-width: 720px) {
  .basix-c1-page .sc-frage,
  .basix-c1-page .sc-ergebnis,
  .basix-c1-page .sc-fallback { padding: 20px; }
  .basix-c1-page .sc-nav { flex-direction: column-reverse; }
  .basix-c1-page .sc-nav .btn { width: 100%; justify-content: center; }
  .basix-c1-page .sc-nav .sc-weiter { margin-left: 0; }
  .basix-c1-page .sc-option { padding: 13px 14px; }
}
@media (max-width: 380px) {
  .basix-c1-page .sc-frage,
  .basix-c1-page .sc-ergebnis,
  .basix-c1-page .sc-fallback { padding: 16px; }
  .basix-c1-page .sc-ampel { padding: 14px; }
}