/* ═══════════════════════════════════════════════════════════════
   Flex-360 Lead-Gen Quiz Widget
   ═══════════════════════════════════════════════════════════════ */

/* ─── Hero 2-Column Layout ─────────────────────────────────── */
.hero.quiz-enhanced {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 48px;
  padding: 120px 48px 80px !important;
  max-width: 1280px;
  margin: 0 auto;
  box-sizing: border-box;
}

.quiz-hero-content {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Hide decorative abs-positioned circles that stay as direct hero children */
.hero.quiz-enhanced > *:not(.quiz-hero-content):not(.quiz-hero-panel) {
  display: none !important;
}

.quiz-hero-panel {
  flex: 0 0 460px;
  width: 460px;
  position: relative;
  z-index: 2; /* above decorative circles */
}

/* ─── Quiz Panel Card ───────────────────────────────────────── */
.quiz-panel {
  background: #fff;
  border-radius: 16px;
  padding: 28px;
  box-shadow: 8px 8px 24px rgba(0,0,0,0.09), -4px -4px 12px rgba(255,255,255,0.95);
  border: 1px solid rgba(255,255,255,0.85);
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  position: relative;
  z-index: 2;
}

/* ─── Progress Indicator ────────────────────────────────────── */
.quiz-progress {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 20px;
}

.quiz-progress-step {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(6,6,18,0.35);
  white-space: nowrap;
  transition: color 0.2s ease;
}

.quiz-progress-step.active {
  color: #1B9E3E;
}

.quiz-progress-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(6,6,18,0.12);
  transition: background 0.2s ease;
  flex-shrink: 0;
}

.quiz-progress-dot.active {
  background: #1B9E3E;
}

.quiz-progress-line {
  flex: 1;
  height: 1px;
  background: rgba(6,6,18,0.1);
  min-width: 14px;
}

/* ─── Step Header ───────────────────────────────────────────── */
.quiz-step-header {
  margin-bottom: 18px;
}

.quiz-step-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1B9E3E;
  margin-bottom: 6px;
}

.quiz-step-title {
  font-size: 20px;
  font-weight: 700;
  color: #060612;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

/* ─── Step 1 – Service Grid ─────────────────────────────────── */
.quiz-services-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.quiz-service-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #F5F4F3;
  border: 1.5px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  text-align: left;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  width: 100%;
}

.quiz-service-card:hover {
  background: rgba(27,158,62,0.07);
  border-color: rgba(27,158,62,0.35);
}

.quiz-service-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(27,158,62,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 17px;
  line-height: 1;
}

.quiz-service-name {
  font-size: 14px;
  font-weight: 600;
  color: #060612;
  line-height: 1.3;
}

/* ─── Back Button ───────────────────────────────────────────── */
.quiz-back-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 10px;
}

.quiz-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(6,6,18,0.45);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  transition: color 0.15s ease;
  flex-shrink: 0;
}

.quiz-back-btn:hover {
  color: #060612;
}

/* ─── Selected Service Badge ────────────────────────────────── */
.quiz-selected-service {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: rgba(27,158,62,0.08);
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  color: #1B9E3E;
}

/* ─── Question sub-progress ─────────────────────────────────── */
.quiz-q-progress {
  display: flex;
  gap: 5px;
  margin-bottom: 20px;
}

.quiz-q-dot {
  flex: 1;
  height: 3px;
  border-radius: 3px;
  background: rgba(6,6,18,0.1);
  transition: background 0.25s ease;
}

.quiz-q-dot.active {
  background: #1B9E3E;
}

/* ─── Step 2 – Single Question ──────────────────────────────── */
.quiz-question-label {
  font-size: 16px;
  font-weight: 700;
  color: #060612;
  margin-bottom: 12px;
  display: block;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.quiz-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: #F5F4F3;
  border: 1.5px solid transparent;
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
}

.quiz-option:hover {
  background: rgba(27,158,62,0.06);
  border-color: rgba(27,158,62,0.25);
}

.quiz-option.selected {
  background: rgba(27,158,62,0.08);
  border-color: #1B9E3E;
}

.quiz-option input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: #1B9E3E;
  flex-shrink: 0;
  cursor: pointer;
}

.quiz-option-text {
  font-size: 14.5px;
  font-weight: 500;
  color: #060612;
}

/* ─── Buttons ───────────────────────────────────────────────── */
.quiz-next-btn,
.quiz-submit-btn {
  width: 100%;
  padding: 13px 20px;
  background: #1B9E3E;
  color: #fff;
  border: 1px solid #147a30;
  border-radius: 9px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 16px;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  transition: background 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.quiz-next-btn:hover:not(:disabled),
.quiz-submit-btn:hover:not(:disabled) {
  background: #168f36;
}

.quiz-next-btn:disabled,
.quiz-submit-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ─── Step 3 – Contact Form ─────────────────────────────────── */
.quiz-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quiz-form-row {
  display: flex;
  gap: 10px;
}

.quiz-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  min-width: 0;
}

.quiz-field label {
  font-size: 13px;
  font-weight: 600;
  color: rgba(6,6,18,0.6);
}

.quiz-field input,
.quiz-field textarea {
  padding: 11px 13px;
  background: #F5F4F3;
  border: 1.5px solid transparent;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 500;
  color: #060612;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  transition: border-color 0.15s ease, background 0.15s ease;
  outline: none;
  resize: none;
  width: 100%;
  box-sizing: border-box;
}

.quiz-field input::placeholder,
.quiz-field textarea::placeholder {
  color: rgba(6,6,18,0.3);
}

.quiz-field input:focus,
.quiz-field textarea:focus {
  border-color: #1B9E3E;
  background: #fff;
}

.quiz-field input.qf-error,
.quiz-field textarea.qf-error {
  border-color: #e53e3e;
}

/* ─── GDPR Checkbox ─────────────────────────────────────────── */
.quiz-gdpr {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}

.quiz-gdpr input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: #1B9E3E;
  flex-shrink: 0;
  margin-top: 2px;
  cursor: pointer;
}

.quiz-gdpr-text {
  font-size: 12px;
  font-weight: 500;
  color: rgba(6,6,18,0.5);
  line-height: 1.55;
}

.quiz-gdpr-text a {
  color: #1B9E3E;
  text-decoration: none;
}

.quiz-gdpr-text a:hover {
  text-decoration: underline;
}

/* ─── Error Messages ────────────────────────────────────────── */
.quiz-error-msg {
  font-size: 12px;
  font-weight: 500;
  color: #e53e3e;
  display: none;
}

.quiz-error-msg.qf-visible {
  display: block;
}

.quiz-error-msg.qf-center {
  text-align: center;
  margin-top: 4px;
}

/* ─── Success State ─────────────────────────────────────────── */
.quiz-success {
  text-align: center;
  padding: 16px 4px;
}

.quiz-success-icon {
  width: 56px;
  height: 56px;
  background: rgba(27,158,62,0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  color: #1B9E3E;
}

.quiz-success h3 {
  font-size: 21px;
  font-weight: 700;
  color: #060612;
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}

.quiz-success p {
  font-size: 14px;
  font-weight: 500;
  color: rgba(6,6,18,0.6);
  line-height: 1.65;
  margin-bottom: 16px;
}

.quiz-success-detail {
  background: #F5F4F3;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 13px;
  color: rgba(6,6,18,0.5);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
}

/* ─── Step Transition ───────────────────────────────────────── */
.quiz-step {
  animation: quizFadeIn 0.2s ease;
}

@keyframes quizFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Mobile (< 1024px) ─────────────────────────────────────── */
@media (max-width: 1023px) {
  .hero.quiz-enhanced {
    flex-direction: column !important;
    align-items: center !important;
    padding: 80px 16px 32px !important;
    gap: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  .quiz-hero-content {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    margin-bottom: 20px;
  }

  /* Nur Badge + Headline – Subtitle, CTA-Buttons und Trust ausblenden */
  .quiz-hero-content .hero-subtitle,
  .quiz-hero-content .hero-trust,
  .quiz-hero-content .hero-cta,
  .quiz-hero-content .cta {
    display: none !important;
  }

  /* CTA-Buttons direkt targetieren (a-Tags in hero content) */
  .quiz-hero-content a {
    display: none !important;
  }

  /* Headline kompakter */
  .quiz-hero-content .hero-title {
    font-size: clamp(24px, 6.5vw, 38px) !important;
    margin-bottom: 0 !important;
  }

  .quiz-hero-panel {
    flex: none !important;
    width: 100% !important;
    max-width: 480px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .quiz-panel {
    width: 100%;
    box-sizing: border-box;
  }

  .quiz-services-grid {
    grid-template-columns: 1fr;
  }

  .quiz-service-card {
    min-width: 0;
    overflow: hidden;
  }

  .quiz-service-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-word;
  }

  .quiz-form-row {
    flex-direction: column;
    gap: 10px;
  }
}

@media (max-width: 400px) {
  .hero.quiz-enhanced {
    padding: 80px 12px 40px !important;
  }
  .quiz-panel {
    padding: 20px 16px;
  }
}