/* ===== Design-Tokens (lokal für dieses Quiz) ============================== */
:root{
  --pf-font: system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --pf-fg: #0b132b;
  --pf-bg: #ffffff;
  --pf-muted: #71717a;

  --pf-accent: #1e90ff;  /* Primary (Blau) */
  --pf-accent-2: #ffd100;/* Secondary (Gelb) */

  --pf-ok: #2e7d32;
  --pf-err: #c1121f;

  --pf-radius: 14px;
  --pf-gap: 16px;
  --pf-shadow: 0 10px 24px rgba(0,0,0,.08);

  --pf-border: #e5e7eb;
  --pf-bar-bg: #f1f5f9;
  --pf-feedback-bg: #f8fafc;
}
@media (prefers-color-scheme: dark){
  :root{
    --pf-fg:#e5e7eb; --pf-bg:#0f172a; --pf-muted:#94a3b8;
    --pf-border:#334155; --pf-bar-bg:#0b1220; --pf-feedback-bg:#0b1220;
    --pf-shadow: 0 10px 24px rgba(0,0,0,.35);
  }
}

/* ===== Container ========================================================== */
.dcs-quiz{
  font-family: var(--pf-font);
  color: var(--pf-fg);
  background: var(--pf-bg);
  max-width: 740px;
  margin: 0 auto;
  padding: clamp(12px, 3vw, 24px);
}

/* ===== Fortschritt ======================================================== */
.dcs-progress{ margin-bottom: 12px; }
.dcs-progress-line{
  height: 10px;
  background: var(--pf-bar-bg);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--pf-border);
}
.dcs-progress-bar{
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--pf-accent) 0%, var(--pf-accent-2) 100%);
  transition: width .35s ease;
}
.dcs-progress-count{
  margin-top: 8px;
  font-size: .95rem;
  color: var(--pf-muted);
}

/* ===== Aussage-Karte ====================================================== */
.dcs-statement{
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  line-height: 1.5;
  background: var(--pf-bg);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius);
  padding: clamp(14px, 2.4vw, 22px);
  box-shadow: var(--pf-shadow);
  margin: 10px 0 14px;
}
#dcs-myths .dcs-statement::before{
  content: "❓";
  margin-right: .45rem;
  font-size: 1.05em;
  opacity: .9;
}

/* ===== Buttons ============================================================ */
.dcs-actions{
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin: 10px 0 16px;
}
.dcs-btn{
  border: 1px solid var(--pf-border);
  background: #fff;
  color: var(--pf-fg);
  border-radius: 999px;
  padding: 12px 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .06s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,.05);
}
.dcs-btn:hover{ transform: translateY(-1px); }
.dcs-btn:active{ transform: translateY(0); }
.dcs-btn.primary{ background: var(--pf-accent); border-color: var(--pf-accent); color:#fff; }
.dcs-btn.ghost{ background: transparent; }
.dcs-btn[disabled], .dcs-btn.is-disabled{
  opacity: .55; cursor: not-allowed; transform:none; box-shadow:none;
}

/* Zustände (Antwort) */
.dcs-btn.is-correct{ border-color: var(--pf-ok); box-shadow: 0 0 0 3px rgba(46,125,50,.15); }
.dcs-btn.is-wrong{ border-color: var(--pf-err); box-shadow: 0 0 0 3px rgba(193,18,31,.12); }

@media (prefers-color-scheme: dark){
  .dcs-btn{
    background: var(--pf-card, #16181c);      /* dunkle Fläche */
    color: var(--pf-fg, #f2f3f5);            /* helle Schrift */
    border-color: var(--pf-border, #2a2f36);
    box-shadow: 0 4px 10px rgba(0,0,0,.35);
  }

  .dcs-btn.ghost{
    background: transparent;
  }

  .dcs-btn.primary{
    color: #0b0b0c; /* je nach Accent: wenn Accent hell ist, passt dunkle Schrift besser */
  }
}

/* ===== Feedback =========================================================== */
.dcs-feedback{
  border: 1px dashed var(--pf-border);
  border-radius: var(--pf-radius);
  padding: clamp(12px, 2vw, 18px);
  background: var(--pf-feedback-bg);
  margin: 6px 0 16px;
}
.dcs-result{
  font-weight: 700; margin: 0 0 6px;
}
.dcs-explanation{
  margin: 0;
  color: var(--pf-muted);
}

/* ===== Controls =========================================================== */
.dcs-controls{
  display: flex; gap: 10px; justify-content: flex-end; align-items: center;
}
.dcs-controls .primary{ background: var(--pf-accent-2); border-color: var(--pf-accent-2); color: #000; }

/* Responsive */
@media (max-width: 520px){
  .dcs-actions{ grid-template-columns: 1fr; }
}

/* =========================
   Minimal Mode (embed only)
   ========================= */

/* 1) Seite wirklich transparent machen */
html.is-minimal, 
html.is-minimal body {
  background: transparent !important;
}

/* 2) Alles außer <main> ausblenden (nur im Minimal-Modus) */
html.is-minimal body > :not(main) {
  display: none !important;
}

/* 3) <main> ohne äußere Abstände, damit der iframe-Rand clean ist */
html.is-minimal main.dcs-quiz {
  margin: 0 !important;
  padding: clamp(12px, 3vw, 24px); /* dein bisheriges Padding bleibt */
  background: transparent; /* Hintergrund am main selbst transparent lassen */
}

/* 4) Der „weiße Kasten“ gehört den Komponenten – hier explizit lassen */
html.is-minimal .dcs-statement,
html.is-minimal .dcs-feedback {
  background: var(--pf-bg); /* i.d.R. #fff */
}

/* 5) Sicherstellen, dass kein globaler Seiten-Rahmen / Schlagschatten überlebt */
html.is-minimal body::before,
html.is-minimal body::after {
  content: none !important;
}

/* 6) Falls du irgendwo eine Page-Shell/Wrapper hast, hiermit sicher entfernen */
html.is-minimal .page, 
html.is-minimal header, 
html.is-minimal footer, 
html.is-minimal .site-shell, 
html.is-minimal .navbar, 
html.is-minimal .footer {
  display: none !important;
}

/* =========================
   MINIMAL EMBED OVERRIDES
   ========================= */

/* 1) Seite transparent, egal was /style.css setzt */
html.is-minimal,
html.is-minimal body {
  background: transparent !important;
}

/* 2) Nur <main> sichtbar lassen (Header/Footer etc. aus) */
html.is-minimal body > :not(main) {
  display: none !important;
}

/* 3) <main> selbst völlig neutralisieren (falls /style.css dort was setzt) */
html.is-minimal main,
html.is-minimal #quiz-main {
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 4) Der eigentliche Quiz-Container bleibt weiß & zentriert */
html.is-minimal .dcs-quiz {
  background: var(--pf-bg);        /* i.d.R. #fff */
  max-width: 740px;
  margin: 0 auto;
  padding: clamp(12px, 3vw, 24px);
  border-radius: var(--pf-radius);
}

/* 5) Sicherheitsnetz: keine globalen Deko-Layer durchlassen */
html.is-minimal body::before,
html.is-minimal body::after,
html.is-minimal main::before,
html.is-minimal main::after {
  content: none !important;
}

/* 6) Falls /style.css Header/Footer dynamisch injiziert */
html.is-minimal #header,
html.is-minimal #footer {
  display: none !important;
}