/* =============================================================
   Mein Zuhause Massivhaus GmbH – Quiz Module
   "Quiz-Variante A – Architectural Premium"

   All styles are scoped under the .mzhq root class so this module
   can be dropped into an existing website without clashing with
   the host page's styles. To embed elsewhere:
     1. Include this file (or paste it into your stylesheet).
     2. Include quiz.js.
     3. Add <div data-mzh-quiz></div> where the quiz should appear.
   ============================================================= */

/* Optional font – falls back gracefully to the system stack. */
.mzhq,
.mzhq * {
  box-sizing: border-box;
}

.mzhq {
  /* ---- Brand tokens (scoped, will not leak to the host page) ---- */
  --mzhq-navy: #183054;
  --mzhq-navy-deep: #1e2f51;
  --mzhq-text: #0f172a;
  --mzhq-surface: #f5f7fa;
  --mzhq-border: #d9dee7;
  --mzhq-white: #ffffff;

  /* ---- Derived tokens ---- */
  --mzhq-muted: #64748b;
  --mzhq-navy-tint: rgba(24, 48, 84, 0.055);
  --mzhq-navy-ring: rgba(24, 48, 84, 0.18);
  --mzhq-shadow-card: 0 28px 70px -32px rgba(15, 23, 42, 0.32);
  --mzhq-shadow-soft: 0 10px 28px -16px rgba(15, 23, 42, 0.22);
  --mzhq-radius-card: 28px;
  --mzhq-radius-md: 16px;
  --mzhq-radius-sm: 12px;

  font-family: "Inter", "Manrope", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--mzhq-text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  width: 100%;
  display: flex;
  justify-content: center;
}

/* ---------------------------------------------------------------
   Card shell + two-column layout
   --------------------------------------------------------------- */
.mzhq-card {
  width: 100%;
  max-width: 1120px;
  min-height: 660px;
  background: var(--mzhq-white);
  border: 1px solid var(--mzhq-border);
  border-radius: var(--mzhq-radius-card);
  box-shadow: var(--mzhq-shadow-card);
  overflow: hidden;
  display: grid;
  grid-template-columns: 43% 57%;
}

/* ---------------------------------------------------------------
   Left column – emotional image area
   --------------------------------------------------------------- */
.mzhq-media {
  position: relative;
  min-height: 100%;
  /* Navy gradient fallback so the panel still looks premium
     even if the placeholder image fails to load. */
  background: linear-gradient(160deg, var(--mzhq-navy) 0%, var(--mzhq-navy-deep) 100%);
  overflow: hidden;
}

.mzhq-media__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  transition: opacity 0.45s ease;
}

/* Gradient overlay – stärker im Caption-Bereich für bessere Lesbarkeit */
.mzhq-media__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(15, 23, 42, 0.55) 0%,
    rgba(15, 23, 42, 0.35) 35%,
    rgba(15, 23, 42, 0.42) 65%,
    rgba(15, 23, 42, 0.85) 100%
  );
}

/* Logo / brand label, top-left over the image.
   Glas-Pille mit echtem Massivhaus-Logo (weiße Variante). */
.mzhq-brand {
  position: absolute;
  top: 28px;
  left: 28px;
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  /* Dezent navy-getöntes Glas: das weiße Logo bleibt über jedem
     Schritt-Bild (hell wie dunkel) gut lesbar. */
  background: rgba(15, 23, 42, 0.34);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 999px;
  color: var(--mzhq-white);
}

.mzhq-brand__logo {
  display: block;
  height: 44px;
  width: auto;
  /* leichter Schatten, damit das Logo über hellen Bildstellen lesbar bleibt */
  filter: drop-shadow(0 1px 3px rgba(15, 23, 42, 0.45));
}

/* Trust/orientation block — flows from under the logo */
.mzhq-media__caption {
  position: absolute;
  left: 32px;
  right: 32px;
  top: 112px;
  color: var(--mzhq-white);
}

/* Frosted-Glass-Container für Haus-Bildschritte (Schritt > 0, kein Personenbild) */
.mzhq-card:not([data-step="0"]):not([data-media-type="person"]) .mzhq-media__caption {
  left: 20px;
  right: 20px;
  padding: 20px 22px 24px;
  background: rgba(10, 18, 36, 0.50);
  border: 1px solid rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 14px;
}

.mzhq-media__caption h3 {
  margin: 0 0 16px;
  font-size: clamp(28px, 2.7vw, 38px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.mzhq-media__caption p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}

.mzhq-media__checklist {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mzhq-media__checklist li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.84);
}

.mzhq-media__checklist li svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  opacity: 0.75;
}

/* Dezente Abschluss-Microcopy, absolut unten in der linken Fläche */
.mzhq-media__tagline {
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 28px;
  margin: 0;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
  line-height: 1.4;
}

/* ---------------------------------------------------------------
   Right column – quiz content
   --------------------------------------------------------------- */
.mzhq-content {
  display: flex;
  flex-direction: column;
  padding: 44px 48px 40px;
  min-height: 100%;
  min-width: 0; /* prevent grid/flex content from forcing overflow */
}

.mzhq-media {
  min-width: 0;
}

/* ---- Progress ---- */
.mzhq-progress {
  position: relative;
  padding: 6px 6px 0;
}

.mzhq-progress__track {
  position: relative;
  height: 4px;
  border-radius: 999px;
  background: var(--mzhq-border);
}

.mzhq-progress__fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--mzhq-navy);
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.mzhq-progress__dot {
  position: absolute;
  top: 50%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--mzhq-white);
  border: 2px solid var(--mzhq-border);
  transform: translate(-50%, -50%);
  transition: border-color 0.4s ease, background-color 0.4s ease,
    transform 0.3s ease;
}

.mzhq-progress__dot.is-done {
  border-color: var(--mzhq-navy);
  background: var(--mzhq-navy);
}

.mzhq-progress__dot.is-current {
  border-color: var(--mzhq-navy);
  background: var(--mzhq-white);
  transform: translate(-50%, -50%) scale(1.25);
  box-shadow: 0 0 0 4px var(--mzhq-navy-ring);
}

/* ---- Step indicator ---- */
.mzhq-stepline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 22px 0 4px;
}

.mzhq-stepline__count {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--mzhq-navy);
  flex: none;
}

.mzhq-stepline__hint {
  font-size: 12px;
  color: var(--mzhq-muted);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 12px;
}

/* ---- Body (animated region) ---- */
.mzhq-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding-top: 4px;
  transition: opacity 0.26s ease, transform 0.26s ease;
}

.mzhq-body.is-exit {
  opacity: 0;
  transform: translateY(10px);
}

.mzhq-body.is-enter {
  opacity: 0;
  transform: translateY(-10px);
}

.mzhq-question {
  margin: 6px 0 6px;
  font-size: 27px;
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--mzhq-text);
}

.mzhq-helper {
  margin: 0 0 22px;
  font-size: 14.5px;
  color: var(--mzhq-muted);
  max-width: 46ch;
}

/* ---- Answer option cards ---- */
.mzhq-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.mzhq-option {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  text-align: left;
  padding: 16px 18px;
  background: var(--mzhq-white);
  border: 1.5px solid var(--mzhq-border);
  border-radius: var(--mzhq-radius-md);
  cursor: pointer;
  font: inherit;
  color: var(--mzhq-text);
  transition: border-color 0.2s ease, background-color 0.2s ease,
    box-shadow 0.2s ease, transform 0.2s ease;
}

.mzhq-option:hover {
  border-color: #b9c2d2;
  box-shadow: var(--mzhq-shadow-soft);
  transform: translateY(-2px);
}

.mzhq-option:focus-visible {
  outline: none;
  border-color: var(--mzhq-navy);
  box-shadow: 0 0 0 4px var(--mzhq-navy-ring);
}

.mzhq-option.is-selected {
  border-color: var(--mzhq-navy);
  background: var(--mzhq-navy-tint);
}

.mzhq-option__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--mzhq-radius-sm);
  background: var(--mzhq-surface);
  color: var(--mzhq-navy);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.mzhq-option__icon svg {
  width: 22px;
  height: 22px;
}

.mzhq-option.is-selected .mzhq-option__icon {
  background: var(--mzhq-navy);
  color: var(--mzhq-white);
}

.mzhq-option__label {
  flex: 1 1 auto;
  font-size: 15.5px;
  font-weight: 550;
  font-weight: 600;
}

.mzhq-option__radio {
  position: relative;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  border: 2px solid var(--mzhq-border);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.mzhq-option__radio svg {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 13px;
  height: 13px;
  color: var(--mzhq-white);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.mzhq-option.is-selected .mzhq-option__radio {
  border-color: var(--mzhq-navy);
  background: var(--mzhq-navy);
}

.mzhq-option.is-selected .mzhq-option__radio svg {
  opacity: 1;
  transform: scale(1);
}

/* ---- Contact form ---- */
.mzhq-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}

.mzhq-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mzhq-field--full {
  grid-column: 1 / -1;
}

.mzhq-field label {
  font-size: 14px;
  font-weight: 600;
  color: var(--mzhq-text);
}

.mzhq-field label .mzhq-req {
  color: var(--mzhq-navy);
}

.mzhq-field input,
.mzhq-field select {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-size: 15px;
  color: var(--mzhq-text);
  background: var(--mzhq-white);
  border: 1.5px solid var(--mzhq-border);
  border-radius: var(--mzhq-radius-sm);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  appearance: none;
}

.mzhq-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}

/* Freitextfeld (Einzelgewerk-Beschreibung) – gleiches Look & Feel
   wie die übrigen Eingabefelder. */
.mzhq-textarea {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-size: 15px;
  line-height: 1.55;
  color: var(--mzhq-text);
  background: var(--mzhq-white);
  border: 1.5px solid var(--mzhq-border);
  border-radius: var(--mzhq-radius-sm);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  resize: vertical;
  min-height: 130px;
}

.mzhq-textarea::placeholder {
  color: #9aa6b8;
}

.mzhq-textarea:focus {
  outline: none;
  border-color: var(--mzhq-navy);
  box-shadow: 0 0 0 4px var(--mzhq-navy-ring);
}

.mzhq-field input::placeholder {
  color: #9aa6b8;
}

.mzhq-field input:focus,
.mzhq-field select:focus {
  outline: none;
  border-color: var(--mzhq-navy);
  box-shadow: 0 0 0 4px var(--mzhq-navy-ring);
}

.mzhq-field input.is-invalid {
  border-color: #d4604f;
  box-shadow: 0 0 0 4px rgba(212, 96, 79, 0.14);
}

.mzhq-error {
  font-size: 12.5px;
  color: #c0503f;
  min-height: 0;
}

/* DSGVO consent */
.mzhq-consent {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-top: 2px;
  padding: 14px 16px;
  background: var(--mzhq-surface);
  border: 1px solid var(--mzhq-border);
  border-radius: var(--mzhq-radius-sm);
}

.mzhq-consent input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 1px;
  border: 1.5px solid var(--mzhq-border);
  border-radius: 6px;
  background: var(--mzhq-white);
  cursor: pointer;
  position: relative;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.mzhq-consent input[type="checkbox"]:checked {
  background: var(--mzhq-navy);
  border-color: var(--mzhq-navy);
}

.mzhq-consent input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid var(--mzhq-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.mzhq-consent input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--mzhq-navy-ring);
}

.mzhq-consent label {
  font-size: 14px;
  line-height: 1.5;
  color: var(--mzhq-muted);
  cursor: pointer;
}

.mzhq-consent a {
  color: var(--mzhq-navy);
  text-decoration: underline;
}

/* ---- Trust microcopy ---- */
.mzhq-trust {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-size: 14px;
  color: var(--mzhq-muted);
}

.mzhq-trust svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--mzhq-navy);
}

/* ---- Footer / navigation ---- */
.mzhq-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--mzhq-border);
}

.mzhq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 26px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--mzhq-radius-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease,
    border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease,
    opacity 0.2s ease;
}

.mzhq-btn svg {
  width: 18px;
  height: 18px;
}

.mzhq-btn--primary {
  background: #d97706;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(180, 83, 9, 0.22);
}

.mzhq-btn--primary:hover {
  background: #b45309;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(180, 83, 9, 0.32);
}

.mzhq-btn--primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.32);
}

.mzhq-btn--primary:disabled {
  background: rgba(217, 119, 6, 0.28);
  color: rgba(255, 255, 255, 0.50);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.mzhq-btn--ghost {
  background: transparent;
  color: var(--mzhq-navy);
  border-color: var(--mzhq-border);
}

.mzhq-btn--ghost:hover {
  background: var(--mzhq-surface);
  border-color: #b9c2d2;
}

.mzhq-btn--ghost:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--mzhq-navy-ring);
}

/* Keeps "Weiter" on the right even when "Zurück" is hidden (step 1). */
.mzhq-footer__spacer {
  flex: 1 1 auto;
}

/* ---------------------------------------------------------------
   Success state
   --------------------------------------------------------------- */
.mzhq-success {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px 10px;
}

.mzhq-success__icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--mzhq-navy-tint);
  color: var(--mzhq-navy);
  margin-bottom: 22px;
}

.mzhq-success__icon svg {
  width: 36px;
  height: 36px;
}

.mzhq-success h2 {
  margin: 0 0 10px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.mzhq-success p {
  margin: 0 0 26px;
  font-size: 15px;
  color: var(--mzhq-muted);
  max-width: 42ch;
}

/* ---------------------------------------------------------------
   Responsive – tablet / mobile
   --------------------------------------------------------------- */
@media (max-width: 900px) {
  .mzhq-card {
    grid-template-columns: 1fr;
    min-height: 0;
    border-radius: 22px;
  }

  .mzhq-media {
    min-height: 0;
    height: 210px;
  }

  /* Image becomes a compact banner after the first step on mobile,
     giving the questions more room. */
  .mzhq-card[data-step]:not([data-step="0"]) .mzhq-media {
    height: 132px;
  }

  .mzhq-media__caption {
    top: auto;
    bottom: 18px;
  }

  .mzhq-media__caption h3 {
    font-size: 21px;
    margin-bottom: 10px;
  }

  .mzhq-media__caption p {
    font-size: 13.5px;
  }

  .mzhq-media__checklist {
    gap: 8px;
    margin-top: 14px;
  }

  .mzhq-media__checklist li {
    font-size: 13px;
  }

  .mzhq-media__tagline { display: none; }

  .mzhq-card[data-step]:not([data-step="0"]) .mzhq-media__caption,
  .mzhq-card[data-step]:not([data-step="0"]) .mzhq-media__checklist {
    display: none;
  }

  .mzhq-content {
    padding: 28px 22px 26px;
  }

  .mzhq-question {
    font-size: 23px;
  }

  .mzhq-form {
    grid-template-columns: 1fr;
  }

  /* Full-width stacked navigation buttons on mobile */
  .mzhq-footer {
    flex-direction: column-reverse;
  }

  .mzhq-footer__spacer {
    display: none;
  }

  .mzhq-btn {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .mzhq-content {
    padding: 24px 18px 22px;
  }

  .mzhq-option {
    padding: 14px 14px;
    gap: 13px;
  }

  .mzhq-option__icon {
    width: 40px;
    height: 40px;
  }
}

/* Schritt-0-Medienpanel: Logo und Checklisten-Text waren beide
   position:absolute auf eine feste 210px-Bannerhöhe gezwungen. Sobald der
   Text mehr Platz brauchte, wuchs er (bottom-verankert) nach oben über das
   Logo. Betrifft den kompletten einspaltig gestapelten Bereich (≤899px,
   identisch zur .mzhq-card-Umschaltung weiter oben), nicht nur Telefone –
   das Problem trat unverändert auch auf Tablet-Breiten auf. Fix: beides
   läuft in normalem Textfluss untereinander, die Panel-Höhe ergibt sich
   automatisch aus dem Inhalt – kein Überlappen mehr möglich, unabhängig
   von Textlänge oder Breite. */
/* Schritt 1 (projectType): kein Foto – Navy-Hintergrund bleibt sichtbar.
   opacity:0 statt display:none damit die Transition nicht springt. */
.mzhq-card[data-step="0"] .mzhq-media__img {
  opacity: 0;
}

@media (max-width: 900px) {
  .mzhq-card[data-step="0"] .mzhq-media {
    height: auto;
  }
  .mzhq-card[data-step="0"] .mzhq-brand {
    position: relative;
    top: auto;
    left: auto;
    margin: 20px 20px 0;
  }
  .mzhq-card[data-step="0"] .mzhq-media__caption {
    position: relative;
    top: auto;
    bottom: auto;
    left: 0;
    right: 0;
    padding: 18px 20px 26px;
  }
}

/* ---------------------------------------------------------------
   Personenbild-Schritte: Textblock oben ausblenden, Trust-Balken unten
   --------------------------------------------------------------- */

/* Caption (h3 + Text + Checklist) und Tagline ausblenden */
.mzhq-card[data-media-type="person"] .mzhq-media__caption,
.mzhq-card[data-media-type="person"] .mzhq-media__tagline {
  display: none;
}

/* Overlay für Personenbilder: oben heller (Gesichter sichtbar),
   unten dunkel (Trust-Balken gut lesbar) */
.mzhq-card[data-media-type="person"] .mzhq-media__overlay {
  background: linear-gradient(
    180deg,
    rgba(15, 23, 42, 0.18) 0%,
    rgba(15, 23, 42, 0.08) 50%,
    rgba(15, 23, 42, 0.60) 78%,
    rgba(15, 23, 42, 0.88) 100%
  );
}

/* Trust-Balken: dezenter Navy-Gradient am unteren Bildrand */
.mzhq-media__person-trust {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 32px 28px 24px;
  background: linear-gradient(0deg,
    rgba(10, 18, 36, 0.78) 0%,
    rgba(10, 18, 36, 0) 100%
  );
}

.mzhq-media__person-trust__text {
  margin: 0;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.01em;
}

.mzhq-card[data-media-type="person"] .mzhq-media__person-trust {
  display: block;
}

/* Mobile: Trust-Balken im kompakten Bannermodus (132px) ausblenden */
@media (max-width: 900px) {
  .mzhq-card[data-step]:not([data-step="0"]) .mzhq-media__person-trust {
    display: none;
  }
}

/* ---------------------------------------------------------------
   Reduced motion – disable non-essential animation
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .mzhq *,
  .mzhq *::before,
  .mzhq *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }

  .mzhq-option:hover,
  .mzhq-btn--primary:hover {
    transform: none;
  }
}

/* =========================================================================
   HERO + TRUST-STRIP – wiederverwendete Unterseiten-Hero-Struktur
   (1:1 nach dem Vorbild von leistungen.css ".lp-hero" / ".lp-trust"
   übertragen, eigener Klassen-Namespace ".qh-".) Nutzt ausschließlich die
   globalen --mz-navy*-Tokens aus shared/site-chrome.css als Farbquelle –
   keine neuen/eigenen Farben.
   Aufbau: .qh-hero__img (Hausbild rechts) + .qh-hero__panel (Navy, Schräge)
   + .qh-hero__content (Text, sichere Zone links der Diagonale).
   ========================================================================= */

.qh-hero {
  position: relative;
  overflow: hidden;
  background: var(--mz-navy-glow, none), var(--mz-navy-gradient, #183054);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.qh-hero__img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 72%;
  background: url('../leistungen/assets/stadtvilla.jpg') center / cover no-repeat;
  z-index: 0;
}

.qh-hero__panel {
  position: relative;
  z-index: 2;
  width: 62%;
  min-height: 580px;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(255, 255, 255, 0.08) 0%, transparent 48%),
    linear-gradient(145deg, var(--mz-navy-soft, #1E2F51) 0%, var(--mz-navy, #183054) 50%, var(--mz-navy-deep, #0F172A) 100%);
  clip-path: polygon(0 0, 100% 0, 79% 100%, 0 100%);
  display: flex;
  align-items: center;
}

.qh-hero__content {
  padding: 110px clamp(36px, 3.5vw, 52px) 90px clamp(64px, 6.5vw, 96px);
  max-width: 700px;
  color: #ffffff;
}

.qh-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  margin: 0 0 24px;
}
.qh-hero__eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: rgba(255, 255, 255, 0.42);
  flex-shrink: 0;
}

.qh-hero__headline {
  font-family: "Inter", sans-serif;
  font-size: clamp(44px, 4.8vw, 64px);
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: #ffffff;
  font-weight: 800;
  margin: 0 0 24px;
}
.qh-hero__headline span {
  display: block;
  white-space: nowrap;
}

.qh-hero__sub {
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 36px;
  max-width: 42ch;
}

.qh-hero__actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.qh-hero__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.qh-hero__btn--solid {
  background: #ffffff;
  color: var(--mz-navy, #183054);
  border: 1px solid #ffffff;
}
.qh-hero__btn--solid:hover { background: rgba(255, 255, 255, 0.88); }
/* Haupt-CTA "Mein Bauprojekt" – gleicher Amber-Akzent wie der Quiz-CTA an
   anderer Stelle der Website (z.B. .hs__btn-primary--quiz, .mz-cta--quiz). */
.qh-hero__btn--quiz {
  background: #d97706;
  color: #ffffff;
  border: 1px solid transparent;
  box-shadow: 0 4px 20px rgba(180, 83, 9, 0.34);
}
.qh-hero__btn--quiz:hover {
  background: #b45309;
  box-shadow: 0 8px 28px rgba(180, 83, 9, 0.42);
}
.qh-hero__btn--ghost {
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.42);
}
.qh-hero__btn--ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 899px) {
  .qh-hero__img {
    width: 100%;
    opacity: 0.18;
  }
  .qh-hero__panel {
    width: 100%;
    min-height: 540px;
    clip-path: none;
  }
  .qh-hero__content {
    padding: 120px 20px 80px;
    max-width: 100%;
  }
  .qh-hero__actions { flex-direction: column; align-items: center; }
  .qh-hero__btn { justify-content: center; width: 100%; max-width: 340px; }
}

/* ---- Phone-only: Headline darf nicht abgeschnitten werden (Mobile, ≤640px) ---- */
@media (max-width: 640px) {
  .qh-hero__headline { font-size: clamp(28px, 8.5vw, 42px); line-height: 1.08; }
  .qh-hero__headline span { white-space: normal; }
  /* .qh-hero hat (anders als die anderen Hero-Sections) kein globales
     box-sizing:border-box. Die width:100%-Buttons rechneten ihr Padding
     deshalb oben drauf und ragten über den Viewport-Rand hinaus. */
  .qh-hero__btn { box-sizing: border-box; }
}

/* ---- Trust-Strip: weiße Karte, die den Hero-Übergang abfängt
        (gleiche Logik wie .lp-trust: negativer margin-top zieht sie
        über den unteren Hero-Rand) ---- */
.qh-trust {
  position: relative;
  z-index: 5;
  padding: 0 20px;
  margin-top: -48px;
}
@media (min-width: 900px) {
  .qh-trust { padding: 0 64px; }
}

.qh-trust__card {
  max-width: 1080px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 8, 30, 0.14), 0 4px 16px rgba(0, 8, 30, 0.06);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 28px 40px;
  border: 1px solid rgba(0, 8, 30, 0.06);
}

.qh-trust__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 0 16px;
}
.qh-trust__item + .qh-trust__item {
  border-left: 1px solid rgba(0, 8, 30, 0.1);
}
.qh-trust__icon {
  font-size: 24px;
  color: var(--mz-navy, #183054);
}
.qh-trust__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--mz-navy-deep, #0F172A);
  letter-spacing: -0.01em;
}

@media (max-width: 899px) {
  .qh-trust__card {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 0;
    padding: 24px 20px;
  }
  .qh-trust__item:nth-child(2n+1) { border-left: none; }
  .qh-trust__item:nth-child(n + 3) {
    border-top: 1px solid rgba(0, 8, 30, 0.1);
    padding-top: 16px;
  }
}

/* =========================================================
   GOOGLE REVIEW MARQUEE — unter dem Quiz
   ========================================================= */
.qr-reviews {
  padding: 28px 0 36px;
  background: #f6f8fb;
  overflow: hidden;
}
.qr-reviews__header {
  text-align: center;
  margin-bottom: 20px;
}
.qr-reviews__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(24, 48, 84, 0.55);
}
.qr-reviews__marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}
.qr-reviews__track {
  display: flex;
  gap: 18px;
  width: max-content;
  animation: qrMarquee 58s linear infinite;
}
.qr-reviews__marquee:hover .qr-reviews__track {
  animation-play-state: paused;
}
@keyframes qrMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.qr-card {
  background: #fff;
  border: 1px solid rgba(24, 48, 84, 0.09);
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 3px 14px rgba(24, 48, 84, 0.07);
  width: 290px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.qr-card__stars {
  color: #E6830A;
  font-size: 14px;
  letter-spacing: 1px;
  line-height: 1;
}
.qr-card__text {
  font-size: 13.5px;
  line-height: 1.58;
  color: #2d3748;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  flex: 1;
}
.qr-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 9px;
  border-top: 1px solid rgba(24, 48, 84, 0.06);
}
.qr-card__name {
  font-size: 12px;
  font-weight: 700;
  color: #183054;
}
.qr-card__source {
  font-size: 10.5px;
  color: #9aa6b8;
  font-weight: 500;
}
@media (max-width: 640px) {
  .qr-card { width: 240px; padding: 14px 16px; }
  .qr-reviews__track { gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .qr-reviews__track { animation: none; }
}