/* Minimal Styles für den Prototyp */
.mq-card {
  max-width: 720px;
  padding: 16px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 16px;
}

.mq-title {
  margin: 0 0 8px 0;
  font-size: 24px;
}

.mq-text {
  margin: 0 0 16px 0;
  line-height: 1.5;
}

.mq-hint {
  margin: 16px 0 0 0;
  font-size: 14px;
  opacity: 0.8;
}

.mq-progress {
  display: flex;
  font-size: 13px;
  opacity: 0.7;
  margin-bottom: 8px;
  justify-content: space-between;
  gap: 12px;
}

.mq-progress-checkboxes {
  display: flex;
  gap: 6px;
}

.mq-box {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mq-box-done {
  background: #4FE6E6; /* türkis */
  color: white;
}

.mq-box-current {
  border: 2px solid #FF2978; /* pink */
  background: transparent;
}

.mq-box-upcoming {
  border: 1px solid #ccc;
  background: transparent;
}

/* --- Button Reset NUR für das Quiz --- */
.mq-card button {
  all: unset;                 /* <- killt das Theme */
  box-sizing: border-box;

  display: inline-block;
  padding: 10px 16px;
  margin-top: 8px;

  border-radius: 8px;
  border: 1px solid #ccc;
  background: #f7f7f7;
  color: #000;

  font: inherit;
  cursor: pointer;
}

.mq-card button:hover {
  background: #eee;
}

.mq-card button:focus {
  outline: 2px solid #ff2f92;
  outline-offset: 2px;
}

.mq-qblock { padding: 12px 0; border-top: 1px solid rgba(0,0,0,0.08); }
.mq-qblock:first-child { border-top: none; }
.mq-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.mq-answer-pill { font-size: 14px; opacity: 0.8; }

.mq-answered-block { opacity: 0.85; } /* "ausgegraut", aber weiterhin klickbar */

/* Selected state: Magenta */
#masking-quiz-app-de .mq-card button[aria-pressed="true"],
#masking-quiz-app-en .mq-card button[aria-pressed="true"] {
  background: #FF2978 !important;
  border-color: #FF2978 !important;
  color: #fff !important;
}

.mq-hr { border: 0; border-top: 1px solid rgba(0,0,0,.08); margin: 16px 0; }

.mq-badges { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.mq-badge {
  display:inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.06);
  font-size: 13px;
}

.mq-summary-grid { display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
@media (max-width: 520px) {
  .mq-summary-grid { grid-template-columns: 1fr; }
}
.mq-summary-tile {
  padding: 12px;
  border-radius: 12px;
  background: rgba(0,0,0,.04);
}
.mq-summary-label { font-size: 12px; opacity: .75; margin-bottom: 4px; }
.mq-summary-value { font-size: 16px; font-weight: 700; }

.mq-list { margin: 8px 0 0 18px; }

.mq-input {
  all: unset;
  box-sizing: border-box;
  padding: 12px 12px;
  border-radius: 12px;
  background: rgba(0,0,0,.05);
  min-width: 220px;
}

.mq-pdf-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

.mq-radar {
  margin-top: 14px;
  max-width: 420px;
}
.mq-radar svg {
  display: block;
}

/* ============================================================
   NEU: Action Buttons unter DeepDives (Mehr Infos + Fragen stellen)
   ============================================================ */

.mq-action-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 10px;
}

/* Für <a> als Button: Theme neutralisieren */
.mq-action-btn {
  all: unset;               /* Theme kill */
  box-sizing: border-box;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 10px 12px;
  border-radius: 12px;

  border: 1px solid rgba(0,0,0,.15);
  background: rgba(0,0,0,.03);
  color: #000;

  font: inherit;
  cursor: pointer;
  text-decoration: none;
}

.mq-action-btn:hover {
  background: rgba(0,0,0,.06);
}

.mq-action-btn:focus {
  outline: 2px solid #ff2f92;
  outline-offset: 2px;
}

/* Sekundärbutton (Fragen stellen) */
.mq-action-secondary {
  background: transparent;
}

/* Disabled state (wenn kein Thumbnail gemappt) */
.mq-action-disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* Thumbnail im Button */
.mq-action-thumb {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0,0,0,.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.mq-action-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}