/**
 * MAWOGE Hautton-Quiz — bewusst design-neutral (dunkle Ink-Töne,
 * warme Grau-Linien), damit es sowohl zum Live-Design als auch
 * zum Graphit-Stage-Design passt.
 */

.mhq-wrap {
  margin: 2.2em 0;
  padding: 28px 26px 26px;
  border: 1px solid #e0deda;
  background: #f7f6f4;
  max-width: 720px;
}

.mhq-head { margin-bottom: 18px; }

.mhq-eyebrow {
  margin: 0 0 4px;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8a8783;
}

.mhq-title {
  margin: 0 0 6px;
  font-size: 27px;
  line-height: 1.25;
  color: #1b1918;
}

.mhq-sub {
  margin: 0;
  font-size: 17px;
  color: #4a4744;
}

.mhq-question { margin-top: 20px; }

.mhq-q-label {
  margin: 0 0 10px;
  font-weight: 600;
  font-size: 18px;
  color: #1b1918;
  line-height: 1.4;
}

.mhq-q-num {
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-right: 6px;
  text-align: center;
  line-height: 22px;
  font-size: 14px;
  background: #1b1918;
  color: #fff;
}

.mhq-q-hint {
  margin: -4px 0 10px;
  font-size: 17px;
  color: #8a8783;
  line-height: 1.4;
}

.mhq-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mhq-opt {
  flex: 1 1 auto;
  min-width: min(180px, 100%);
  padding: 10px 14px;
  border: 1px solid #cfccc7;
  background: #fff;
  color: #1b1918;
  font-size: 18px;
  line-height: 1.35;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
  text-align: center;
}

.mhq-opt:hover { border-color: #1b1918; }

.mhq-opt--selected {
  border-color: #1b1918;
  background: #1b1918;
  color: #fff;
}

.mhq-result {
  margin-top: 24px;
  padding: 22px 22px 20px;
  border: 1px solid #1b1918;
  background: #fff;
}

.mhq-result-eyebrow {
  margin: 0 0 2px;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8a8783;
}

.mhq-result-title {
  margin: 0 0 8px;
  font-size: 23px;
  color: #1b1918;
}

.mhq-result-text {
  margin: 0 0 16px;
  font-size: 17px;
  line-height: 1.55;
  color: #4a4744;
}

.mhq-cta {
  display: inline-block;
  padding: 12px 22px;
  background: #1b1918;
  color: #fff !important;
  font-weight: 600;
  font-size: 17px;
  text-decoration: none !important;
  transition: opacity .15s ease;
}

.mhq-cta:hover { opacity: .85; color: #fff; }

.mhq-cta-sub {
  margin: 10px 0 0;
  font-size: 15px;
  color: #8a8783;
}

.mhq-restart {
  margin-top: 14px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 15px;
  color: #8a8783;
  text-decoration: underline;
  cursor: pointer;
}

.mhq-restart:hover { color: #1b1918; }

/* Abschluss-CTA am Artikelende (Quiz-Posts) */
.mfb-hautton-endcta {
  margin: 2.4em auto;
  padding: 30px 28px;
  max-width: 720px;
  border: 1px solid #1b1918;
  background: #f7f6f4;
  text-align: center;
}

.mfb-hautton-endcta h3 {
  margin: 0 0 10px;
  font-size: 25px;
  line-height: 1.3;
  color: #1b1918;
}

.mfb-hautton-endcta-text {
  margin: 0 auto 18px;
  max-width: 560px;
  font-size: 17px;
  line-height: 1.55;
  color: #4a4744;
}

@media (max-width: 560px) {
  /* Volle Handybreite: Quiz + End-CTA brechen aus der schmalen Artikel-
     spalte aus (50% = zentrierte Elternspalte, 49vw → 98vw mittig). */
  .mhq-wrap {
    width: 98vw;
    max-width: none;
    margin-left: calc(50% - 49vw);
    padding: 16px 10px;
  }
  .mfb-hautton-endcta {
    width: 98vw;
    max-width: none;
    margin-left: calc(50% - 49vw);
    padding: 18px 12px;
  }
  .mfb-hautton-endcta h3 { font-size: 21px; }
  .mhq-title { font-size: 22px; }
  .mhq-options { flex-direction: column; }
  .mhq-opt { text-align: left; }
}