/* File: assets/css/frontend.css
   Dynamic Quiz Pro – Frontend Styles (v2.22)
   Basis = v2.21 + Mobile-DSGVO-Fix + konsistente Hover-Farben
*/

.dqp-embed{max-width:960px;margin:0 auto;padding:0 16px}

/* --- Scroll-Guard: verhindert Smooth-Scroll-Einflüsse von Themes im Quiz-Scope --- */
.dqp-embed, .dqp-embed *{scroll-behavior:auto !important}
.dqp-embed{overscroll-behavior:contain}

/* Quiz-Box */
.dqp-quiz{
  --dqp-primary:#0B64D8;
  --dqp-accent:#0B64D8;
  --dqp-hover:#0B64D8;
  --dqp-answer-bg:var(--dqp-primary);
  --dqp-answer-text:#111;
  --dqp-radius:12px;
  --dqp-gap:12px;
  --dqp-cols:2;
  --dqp-answer-align:left;
  --dqp-shadow:0 8px 22px rgba(2,21,78,.10),0 2px 8px rgba(2,21,78,.06);
  background:#fff;border:1px solid #e6ebf2;border-radius:var(--dqp-radius);padding:20px
}

/* Box-Rahmen toggle */
.dqp-quiz[data-boxframe="0"]{ border:0 !important; }
.dqp-quiz[data-boxframe="1"]{ border:1px solid #e6ebf2 !important; }

/* Progress */
.dqp-progress{height:6px;background:#eef2f7;border-radius:999px;overflow:hidden;margin:0 0 16px}
.dqp-progress-bar{height:100%;background:var(--dqp-primary)}

/* Titles/Text */
.dqp-q-title,.dqp-r-title{margin:4px 0 14px;font-size:clamp(20px,2.2vw,32px);line-height:1.2;color:#0b1a33;font-weight:800;position:relative}
/* Pflichtstern nimmt die Überschriftenfarbe an */
.dqp-required-star{ margin-left:.35rem; font-weight:800; color:currentColor; }

/* Helper/Text */
.dqp-q-helper,.dqp-r-text{margin:10px 0 14px;color:#1a2233}

/* Media */
.dqp-q-media,.dqp-r-media{margin-bottom:12px}
.dqp-media-img,.dqp-media-video,.dqp-media-embed iframe{display:block;width:100%;height:auto;border:0;border-radius:calc(var(--dqp-radius) - 4px)}
.dqp-media-embed iframe{min-height:300px}
.dqp-caption{margin-top:6px;color:#445;font-size:14px}

/* Answers grid */
.dqp-answers{
  display:grid;grid-template-columns:repeat(var(--dqp-cols),minmax(0,1fr));
  gap:var(--dqp-gap);align-items:stretch;justify-items:stretch
}

/* Dropdown: full width */
.dqp-answers > select,
.dqp-answers > .dqp-select{
  grid-column:1 / -1 !important; width:100% !important; max-width:100% !important;
  min-height:44px; padding:12px 14px; box-sizing:border-box;
  border:1px solid #D1D5DB; border-radius:var(--dqp-radius); background:#fff; text-align-last:center
}
.dqp-answers > select:hover,.dqp-answers > select:focus,
.dqp-answers > .dqp-select:hover,.dqp-answers > .dqp-select:focus{
  border-color:var(--dqp-hover); outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--dqp-hover) 25%, transparent)
}

/* Answer base */
.dqp-answer{
  position:relative;
  display:flex;flex-direction:column;align-items:stretch;cursor:pointer;
  border:0;border-radius:var(--dqp-radius);text-align:var(--dqp-answer-align);
  background:var(--dqp-answer-bg);color:var(--dqp-answer-text);
  transition:transform .14s ease,box-shadow .14s ease,filter .12s ease,outline-color .14s ease,outline-offset .14s ease;
  outline:0 solid transparent;
}
.dqp-answer-media{display:block;margin:0;line-height:0}
.dqp-answer-media img,.dqp-answer-media video{display:block;width:100%;height:auto;border:0}
.dqp-answer-label{display:block;margin:0;padding:14px 18px;font-weight:700;line-height:1.25}

/* Hover (nutzt Hover-Farbe aus Branding) */
.dqp-quiz[data-hover="subtle"] .dqp-answer:hover{
  filter:brightness(1.05);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--dqp-hover) 35%, transparent) inset
}
.dqp-quiz[data-hover="lift"] .dqp-answer:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(2,21,78,.16),0 6px 12px rgba(2,21,78,.10),0 0 0 2px color-mix(in srgb, var(--dqp-hover) 25%, transparent) inset
}
.dqp-quiz[data-hover="glow"] .dqp-answer:hover{
  outline-color:color-mix(in oklab, var(--dqp-hover), transparent 60%);
  outline-width:3px; outline-offset:0; filter:brightness(1.02)
}

/* === MULTIPLE/ SINGLE: sichtbare Auswahl === */
.dqp-answer.is-selected{
  box-shadow:0 0 0 3px color-mix(in oklab, var(--dqp-hover), transparent 35%) inset, var(--dqp-shadow);
  filter:none; transform:none;
}

/* Checkmark-Span (falls vorhanden) ausblenden */
.dqp-answer .dqp-check{display:none}

/* === INPUT-Schritt: 1 Spalte, Suffix im selben Feld, KEIN Haken === */
.dqp-answer.is-input{
  grid-column:1 / -1;
  background:transparent; color:#0b1a33; padding:12px 0;
}
.dqp-answer.is-input.is-selected::after{ display:none; } /* kein Haken beim Eingabefeld */
.dqp-answer.is-input .dqp-input{
  display:flex; align-items:center; gap:10px;
  width:100%; box-sizing:border-box;
  background:#fff;
  border:1px solid #D1D5DB; border-radius:var(--dqp-radius);
  padding:10px 12px;
}
.dqp-answer.is-input .dqp-input:focus-within{
  border-color:var(--dqp-hover);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--dqp-hover) 25%, transparent)
}
.dqp-answer.is-input .dqp-input-field{
  flex:1 1 auto; min-width:0;
  border:0; outline:0; background:transparent;
  padding:0; margin:0;
  min-height:28px; font-weight:700; color:#0b1a33
}
.dqp-answer.is-input .dqp-input-suffix{
  flex:0 0 auto; font-weight:800; color:#0b1a33; opacity:.9;
  line-height:1; user-select:none; pointer-events:none
}

/* Actions / Form */
.dqp-actions{grid-column:1/-1;display:flex;justify-content:flex-end;margin-top:6px}
.dqp-next{
  padding:10px 16px;border:0;border-radius:10px;
  background:var(--dqp-primary);color:#fff;cursor:pointer;font-weight:700;
  transition:filter .12s ease,transform .12s ease,box-shadow .12s ease,background-color .12s ease
}
.dqp-next:hover:not(:disabled){
  background:var(--dqp-hover);
  box-shadow:0 8px 18px rgba(0,0,0,.16);
}
.dqp-next:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}

/* --- Back-Nav (auch bei Single/Select, aber nur ab Schritt 2 sichtbar) --- */
.dqp-nav{display:flex;gap:8px;justify-content:flex-start;grid-column:1/-1;margin-top:10px}
.dqp-only-back .dqp-back{margin-left:0}
.dqp-back{
  padding:10px 16px;border:0;border-radius:10px;
  background:#e5e7eb;color:#111;cursor:pointer;font-weight:700;
  transition:filter .12s ease,background-color .12s ease
}
.dqp-back:hover{filter:brightness(1.03);background:#e2e8f0}

/* Formular-Grid */
.dqp-form{
  display:grid;grid-template-columns:1fr;gap:10px;margin:14px 0;
  word-break:normal;
}
.dqp-form *{word-break:normal}

/* Standard-Felder */
.dqp-field{display:flex;flex-direction:column;gap:6px}
.dqp-field>span{font-size:14px;color:#334155;font-weight:600}
.dqp-field input[type="text"],
.dqp-field input[type="email"],
.dqp-field input[type="tel"],
.dqp-field select,
.dqp-field textarea{
  width:100%;padding:10px 12px;border:1px solid #d7dde6;border-radius:10px;outline:none;box-sizing:border-box
}
.dqp-field input:focus,
.dqp-field select:focus,
.dqp-field textarea:focus{
  border-color:var(--dqp-hover);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--dqp-hover) 22%, transparent)
}

/* Submit-Button */
.dqp-submit{
  justify-self:start;padding:12px 18px;border-radius:12px;
  background:var(--dqp-primary);color:#fff;border:0;cursor:pointer;font-weight:700;
  transition:background-color .12s ease,box-shadow .12s ease,transform .12s ease
}
.dqp-submit:hover{
  background:var(--dqp-hover);
  box-shadow:0 8px 18px rgba(0,0,0,.16);
}

/* Invalid-Feedback */
.dqp-invalid{border-color:#ef4444 !important; box-shadow:0 0 0 3px color-mix(in srgb, #ef4444 25%, transparent) !important}

/* Checkbox-Zeilen – DSGVO & Newsletter (Mobile-Fix) */
.dqp-field.dqp-field-check{
  display:flex !important;
  flex-direction:row;
  align-items:flex-start;
  gap:10px;
  line-height:1.4;
}
.dqp-field.dqp-field-check input[type="checkbox"]{
  margin-top:3px;
  flex:0 0 auto;
}
.dqp-field.dqp-field-check a{
  text-decoration:underline;
}

/* CTA/Leadmagnete */
.dqp-cta-iframe{margin-top:16px}
.dqp-cta-btn,.dqp-m-btn{
  display:inline-block;padding:12px 16px;border-radius:10px;
  background:var(--dqp-accent);color:#fff;text-decoration:none;font-weight:700;
  transition:background-color .12s ease,box-shadow .12s ease,transform .12s ease
}
.dqp-cta-btn:hover,.dqp-m-btn:hover{
  background:var(--dqp-hover);
  box-shadow:0 8px 18px rgba(0,0,0,.16);
}

/* Leadmagnete Grid */
.dqp-magnets{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.dqp-magnet{border:1px solid #e6ebf2;border-radius:10px;padding:10px;background:#fff}
.dqp-m-title{font-weight:700;margin-top:6px}
.dqp-m-desc{font-size:14px;color:#334155;margin:6px 0}

/* Mobile */
@media (max-width:720px){
  .dqp-answers{grid-template-columns:1fr}
  .dqp-field.dqp-field-check{align-items:flex-start}
}

/* === THEME: CLASSIC === */
.dqp-theme-classic .dqp-answer{padding:0;gap:0;border-radius:var(--dqp-radius) !important;overflow:hidden;box-shadow:none}
.dqp-theme-classic .dqp-answer .dqp-answer-label{
  background:var(--dqp-answer-bg); color:var(--dqp-answer-text);
  text-align:var(--dqp-answer-align); padding:16px 20px; transform:translateY(-.5px)
}
.dqp-theme-classic .dqp-answer:hover{box-shadow:var(--dqp-shadow)}

/* === THEME: CARDS (ohne Doppelrahmen) === */
.dqp-theme-cards .dqp-answer{
  background:#fff !important;color:#0b1a33;border-radius:var(--dqp-radius) !important;
  overflow:hidden;box-shadow:var(--dqp-shadow);padding:0;display:flex;flex-direction:column
}
.dqp-theme-cards .dqp-answer .dqp-answer-media{background:#fff;padding:12px 12px 14px;margin:0;line-height:0}
.dqp-theme-cards .dqp-answer .dqp-answer-media img,
.dqp-theme-cards .dqp-answer .dqp-answer-media video{
  width:100%;aspect-ratio:4/3;object-fit:cover;border:0;border-radius:10px
}
.dqp-theme-cards .dqp-answer .dqp-answer-label{
  background:#fff;color:#0b1a33;text-align:center;padding:14px;min-height:56px;display:flex;align-items:center;justify-content:center;font-weight:700
}
.dqp-theme-cards .dqp-answer:not(:has(.dqp-answer-media)){padding:16px 18px}
.dqp-theme-cards .dqp-answer:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(2,21,78,.14),0 6px 12px rgba(2,21,78,.10)}

/* === THEME: MINIMAL === */
.dqp-theme-minimal .dqp-answer{background:transparent;border:0;box-shadow:none;padding:0}
.dqp-theme-minimal .dqp-answer .dqp-answer-media img{border-radius:var(--dqp-radius)}
.dqp-theme-minimal .dqp-answer .dqp-answer-label{background:transparent;color:#0b1a33;text-align:var(--dqp-answer-align);padding:10px 6px 6px;position:relative}
.dqp-theme-minimal .dqp-answer .dqp-answer-label::after{
  content:"";display:block;height:6px;width:160px;max-width:60%;margin:10px auto 0;border-radius:999px;background:var(--dqp-primary);opacity:.85
}

/* === THEME: CLASSIC_LEFT === */
.dqp-theme-classic_left .dqp-answer{
  flex-direction:row;align-items:center;gap:14px;padding:12px 16px;
  background:var(--dqp-answer-bg);color:var(--dqp-answer-text);text-align:var(--dqp-answer-align);
  border-radius:var(--dqp-radius) !important
}
.dqp-theme-classic_left .dqp-answer .dqp-answer-media{flex:0 0 auto;width:96px;margin:0}
.dqp-theme-classic_left .dqp-answer .dqp-answer-media img{width:96px;height:auto;object-fit:contain;border-radius:calc(var(--dqp-radius) - 6px)}
.dqp-theme-classic_left .dqp-answer .dqp-answer-label{flex:1 1 auto;padding:0}

/* After-Submit: Leadmagnete volle Breite */
.dqp-after-submit .dqp-magnets{grid-template-columns:1fr !important}
.dqp-after-submit .dqp-magnet{width:100%}

/* --- Force Checkmark on selected answers (cross-browser, high specificity) --- */
.dqp-quiz .dqp-answer.is-selected{ position:relative; overflow:visible !important; }

/* Ring-Kreis (größer) */
.dqp-quiz .dqp-answer.is-selected::before{
  content:""; position:absolute; z-index:40;
  top:8px; right:8px; width:26px; height:26px; border-radius:50%;
  background:var(--dqp-primary); border:2px solid #fff; box-shadow:0 1px 2px rgba(0,0,0,.15);
}

/* Haken (größer) */
.dqp-quiz .dqp-answer.is-selected::after{
  content:""; position:absolute; z-index:41;
  top:11px; right:11px; width:20px; height:20px;
  background-repeat:no-repeat; background-size:contain; background-position:center;
  background-image:url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>\
    <path fill='white' d='M7.8 13.4L3.6 9.2l1.4-1.4 2.8 2.8 7.2-7.2 1.4 1.4z'/>\
  </svg>");
}

/* Niemals Haken beim Input-Schritt */
.dqp-quiz .dqp-answer.is-input.is-selected::before,
.dqp-quiz .dqp-answer.is-input.is-selected::after{ display:none !important; }

/* Optional leichte Reduktion auf sehr kleinen Screens */
@media (max-width:420px){
  .dqp-quiz .dqp-answer.is-selected::before{ width:24px; height:24px; top:8px; right:8px; }
  .dqp-quiz .dqp-answer.is-selected::after { width:18px; height:18px; top:10px; right:10px; }
}

/* Formular-anzeigen-Button (für form_mode = hidden) */
.dqp-show-form{
  display:inline-block;padding:10px 14px;border-radius:8px;
  border:1px solid var(--dqp-primary);
  background:transparent;cursor:pointer;
  transition:background-color .12s ease,color .12s ease,border-color .12s ease
}
.dqp-show-form:hover{
  background:var(--dqp-hover);
  border-color:var(--dqp-hover);
  color:#fff;
}

/* ===========================================================
   BUTTON-OVERRIDES: einheitliche Farben & Hover im Quiz
   =========================================================== */

.dqp-quiz .dqp-back,
.dqp-quiz .dqp-next,
.dqp-quiz .dqp-submit,
.dqp-quiz .dqp-cta-btn,
.dqp-quiz .dqp-m-btn{
  background:var(--dqp-primary) !important;
  color:#fff !important;
  border-radius:10px !important;
  border:0 !important;
  box-shadow:none;
  font-weight:700;
}

.dqp-quiz .dqp-back:hover,
.dqp-quiz .dqp-next:hover:not(:disabled),
.dqp-quiz .dqp-submit:hover,
.dqp-quiz .dqp-cta-btn:hover,
.dqp-quiz .dqp-m-btn:hover{
  background:var(--dqp-hover) !important;
  color:#fff !important;
  box-shadow:0 8px 18px rgba(0,0,0,.16) !important;
}

/* Disabled-Style nur für Weiter-Button */
.dqp-quiz .dqp-next:disabled{
  background:#cbd5e1 !important;
  color:#fff !important;
  box-shadow:none !important;
  cursor:not-allowed !important;
  opacity:.6 !important;
}

/* ===========================================================
   ANSWER-HOVER-OVERRIDE: nutzt Branding-Hoverfarbe
   =========================================================== */

.dqp-quiz .dqp-answer:hover{
  background:var(--dqp-hover) !important;
  color:#fff !important;
}