:root{
  --font: system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --fg:#0b132b; --bg:#fff; --muted:#71717a;
  --border:#e5e7eb; --bar-bg:#f1f5f9;
  --radius:14px; --shadow:0 10px 24px rgba(0,0,0,.08);

  --green:#22a06b;
  --yellow:#d97706;
  --red:#c1121f;
  --primary:#1e90ff;
  --badge:#eef2f7;
}
@media (prefers-color-scheme: dark){
  :root{
    --fg:#e5e7eb; --bg:#0f172a; --muted:#94a3b8;
    --border:#334155; --bar-bg:#0b1220; --shadow:0 10px 24px rgba(0,0,0,.35);
    --badge:#0b1220;
  }
}

/* Container */
.dcs-quiz{ font-family:var(--font); color:var(--fg); background:var(--bg); max-width:740px; margin:0 auto; padding:clamp(12px,3vw,24px); }
.dcs-header{ margin-bottom:10px; }
.dcs-title{ margin:0 0 4px; font-size:clamp(1.15rem,2.6vw,1.5rem); }
.dcs-intro{ margin:0; color:var(--muted); }

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

/* Card & Statement */
.dcs-card{ border:1px solid var(--border); border-radius:var(--radius); padding:clamp(14px,2.2vw,22px); box-shadow:var(--shadow); background:var(--bg); }
.dcs-statement{ margin:0 0 12px; font-size:clamp(1.05rem,2.2vw,1.35rem); line-height:1.5; }
#dcs-traffic .dcs-statement::before{ content:"🚦"; margin-right:.5rem; }

/* Buttons */
.dcs-actions{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:10px 0 14px; }
.dcs-btn{ border:1px solid var(--border); background:#fff; color:var(--fg); border-radius:999px; padding:12px 16px; font-weight:700; cursor:pointer; transition:transform .06s ease, box-shadow .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[disabled], .dcs-btn.is-disabled{ opacity:.55; cursor:not-allowed; transform:none; box-shadow:none; }

.dcs-green{ border-color:var(--green); }
.dcs-yellow{ border-color:var(--yellow); }
.dcs-red{ border-color:var(--red); }
.dcs-green.is-correct{ box-shadow:0 0 0 3px rgba(34,160,107,.2); }
.dcs-yellow.is-correct{ box-shadow:0 0 0 3px rgba(217,119,6,.2); }
.dcs-btn.is-wrong{ box-shadow:0 0 0 3px rgba(193,18,31,.12); border-color:var(--red); }

/* Feedback */
.dcs-feedback{ border:1px dashed var(--border); border-radius:var(--radius); padding:clamp(12px,2vw,18px); background:#f8fafc; }
@media (prefers-color-scheme: dark){ .dcs-feedback{ background:#0b1220; } }
.dcs-result{ margin:.2rem 0 .4rem; font-weight:800; }
.dcs-explanation{ margin:.4rem 0 0; color:var(--muted); }

/* Maßnahmen-Badges */
.actions-row{ display:flex; gap:8px; flex-wrap:wrap; margin:.25rem 0 .25rem; }
.badge{ display:inline-flex; align-items:center; gap:.35rem; padding:.25rem .6rem; border-radius:999px; background:var(--badge); border:1px solid var(--border); font-weight:700; font-size:.9rem; }
.badge-watch::before{ content:"👀"; }
.badge-o2::before{ content:"🫁"; }
.badge-hotline::before{ content:"📞"; }
.badge-ems::before{ content:"🚑"; }
.badge-none::before{ content:"—"; }

/* "Übervorsichtig": eigene, neutrale/gelbliche Markierung */
.dcs-btn.is-over{ box-shadow:0 0 0 3px rgba(217,119,6,.18); border-color:var(--yellow); }

/* Legende styling (optional schön) */
.dcs-legend{ margin:.4rem 0 1rem; padding-left:1.1rem; }
.dcs-legend li{ margin:.2rem 0; color:var(--muted); }
.dcs-legend strong{ color:var(--fg); }
.dcs-legend em{ font-style:normal; font-weight:700; }


/* Controls */
.dcs-controls{ display:flex; gap:10px; justify-content:flex-end; align-items:center; margin-top:12px; }
.dcs-controls .primary{ background:var(--primary); color:#fff; border-color:var(--primary); }

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

/* =========================
   MINIMAL EMBED OVERRIDES (Ampel)
   ========================= */

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

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

/* 3) <main> selbst neutralisieren */
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 (Ampel) bleibt weiß */
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 */
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 Header/Footer dynamisch injiziert */
html.is-minimal #header,
html.is-minimal #footer {
  display: none !important;
}