/* ── KryptoGuard Quiz ─────────────────────────────────────────────────────── */
:root {
  --kg-gold:    #B8965A;
  --kg-gold-lt: #F5E6C8;
  --kg-gold-dk: #7A5C2E;
  --kg-cream:   #FAF7F2;
  --kg-red:     #C03535;
  --kg-red-lt:  #FFF0EE;
  --kg-orange:  #C4622A;
  --kg-text:    #2C2416;
  --kg-muted:   #7A6A54;
  --kg-border:  #E8D9BC;
  --kg-card:    #FFFFFF;
  --kg-r:       16px;
  --kg-r-sm:    10px;
}

/* Alles mit #kg-quiz präfixiert für hohe Spezifität gegen Avada */
#kg-quiz {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif !important;
  background: var(--kg-cream) !important;
  border-radius: var(--kg-r) !important;
  overflow: hidden !important;
  max-width: 780px !important;
  margin: 0 auto !important;
  position: relative !important;
  min-height: 400px !important;
  box-sizing: border-box !important;
}

#kg-quiz * { box-sizing: border-box !important; }

/* Header */
#kg-quiz .kg-hdr {
  background: var(--kg-card) !important;
  border-bottom: 1px solid var(--kg-border) !important;
  padding: 20px 36px 16px !important;
  margin: 0 !important;
}
#kg-quiz .kg-logo-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 0 14px 0 !important;
  padding: 0 !important;
}
#kg-quiz .kg-brand {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--kg-gold-dk) !important;
  letter-spacing: -.3px !important;
  margin: 0 !important;
  padding: 0 !important;
}
#kg-quiz .kg-logo-img {
  height: 44px !important;
  width: auto !important;
  object-fit: contain !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Fortschritt */
#kg-quiz .kg-prog-label {
  font-size: 14px !important;
  color: var(--kg-muted) !important;
  margin: 0 0 7px 0 !important;
  padding: 0 !important;
  display: block !important;
  line-height: 1.4 !important;
}
#kg-quiz .kg-prog-track {
  height: 5px !important;
  background: var(--kg-gold-lt) !important;
  border-radius: 3px !important;
  margin: 0 !important;
  padding: 0 !important;
}
#kg-quiz .kg-prog-fill {
  height: 5px !important;
  background: linear-gradient(90deg,var(--kg-gold),#C8A96E) !important;
  border-radius: 3px !important;
  transition: width .4s !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Body */
#kg-quiz .kg-body {
  padding: 36px 36px 16px 36px !important;
  margin: 0 !important;
}
#kg-quiz .kg-title {
  font-size: 24px !important;
  font-weight: 600 !important;
  color: var(--kg-text) !important;
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
  line-height: 1.35 !important;
}
#kg-quiz .kg-sub {
  font-size: 15px !important;
  color: var(--kg-muted) !important;
  margin: 0 0 30px 0 !important;
  padding: 0 !important;
  line-height: 1.6 !important;
}

/* Szenario-Grid */
#kg-quiz .kg-sc-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill,minmax(120px,1fr)) !important;
  gap: 12px !important;
  margin: 0 0 24px 0 !important;
  padding: 0 !important;
}
#kg-quiz .kg-sc-card {
  background: var(--kg-card) !important;
  border: 2px solid var(--kg-border) !important;
  border-radius: var(--kg-r) !important;
  padding: 18px 12px 14px 12px !important;
  cursor: pointer !important;
  text-align: center !important;
  transition: border-color .2s, transform .2s, box-shadow .2s !important;
  margin: 0 !important;
}
#kg-quiz .kg-sc-card:hover {
  border-color: var(--kg-gold) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 16px rgba(184,150,90,.15) !important;
}
#kg-quiz .kg-sc-card.kg-sel {
  border-color: var(--kg-gold) !important;
  background: var(--kg-gold-lt) !important;
}
#kg-quiz .kg-sc-img-wrap {
  width: 60px !important;
  height: 60px !important;
  border-radius: 50% !important;
  background: var(--kg-gold-lt) !important;
  margin: 0 auto 12px auto !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}
#kg-quiz .kg-sc-card.kg-sel .kg-sc-img-wrap { background: var(--kg-gold) !important; }
#kg-quiz .kg-sc-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  margin: 0 !important;
  padding: 0 !important;
}
#kg-quiz .kg-sc-label {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--kg-text) !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

/* Fragen */
#kg-quiz .kg-q-topic {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--kg-gold) !important;
  text-transform: uppercase !important;
  letter-spacing: .8px !important;
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
  display: block !important;
}
#kg-quiz .kg-q-text {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--kg-text) !important;
  line-height: 1.55 !important;
  margin: 0 0 24px 0 !important;
  padding: 0 !important;
}

/* Antworten */
#kg-quiz .kg-answers {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
@media(max-width:560px){
  #kg-quiz .kg-answers { grid-template-columns: 1fr !important; }
}
#kg-quiz .kg-ans {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 14px 18px !important;
  border: 2px solid var(--kg-border) !important;
  border-radius: var(--kg-r-sm) !important;
  cursor: pointer !important;
  transition: border-color .15s, background .15s !important;
  background: var(--kg-card) !important;
  position: relative !important;
  margin: 0 !important;
  list-style: none !important;
}
#kg-quiz .kg-ans:hover { border-color: var(--kg-gold) !important; background: #FFFDF8 !important; }
#kg-quiz .kg-ans.kg-sel { border-color: var(--kg-gold) !important; background: var(--kg-gold-lt) !important; }
#kg-quiz .kg-ans.kg-crit:hover { border-color: var(--kg-orange) !important; }
#kg-quiz .kg-ans.kg-crit.kg-sel { border-color: var(--kg-red) !important; background: var(--kg-red-lt) !important; }

/* Radio */
#kg-quiz .kg-dot {
  width: 22px !important; height: 22px !important;
  border-radius: 50% !important;
  border: 2px solid var(--kg-border) !important;
  flex-shrink: 0 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  transition: all .15s !important;
  margin: 0 !important; padding: 0 !important;
  background: transparent !important;
}
#kg-quiz .kg-ans.kg-sel .kg-dot { border-color: var(--kg-gold) !important; background: var(--kg-gold) !important; }
#kg-quiz .kg-ans.kg-crit.kg-sel .kg-dot { border-color: var(--kg-red) !important; background: var(--kg-red) !important; }
#kg-quiz .kg-dot-inner {
  width: 9px !important; height: 9px !important;
  border-radius: 50% !important; background: #fff !important;
  opacity: 0 !important; transition: opacity .15s !important;
  margin: 0 !important; padding: 0 !important;
}
#kg-quiz .kg-ans.kg-sel .kg-dot-inner { opacity: 1 !important; }

/* Checkbox */
#kg-quiz .kg-box {
  width: 22px !important; height: 22px !important; border-radius: 5px !important;
  border: 2px solid var(--kg-border) !important; flex-shrink: 0 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  transition: all .15s !important; margin: 0 !important; padding: 0 !important; background: transparent !important;
}
#kg-quiz .kg-ans.kg-sel .kg-box { border-color: var(--kg-gold) !important; background: var(--kg-gold) !important; }
#kg-quiz .kg-chk {
  width: 10px !important; height: 7px !important;
  border-left: 2px solid #fff !important; border-bottom: 2px solid #fff !important;
  transform: rotate(-45deg) translateY(-1px) !important;
  opacity: 0 !important; margin: 0 !important; padding: 0 !important;
}
#kg-quiz .kg-ans.kg-sel .kg-chk { opacity: 1 !important; }

#kg-quiz .kg-ans-text {
  font-size: 15px !important;
  color: var(--kg-text) !important;
  font-weight: 500 !important;
  flex: 1 !important;
  line-height: 1.45 !important;
  margin: 0 !important; padding: 0 !important;
}

/* Info-Button */
#kg-quiz .kg-info {
  width: 22px !important; height: 22px !important; border-radius: 50% !important;
  border: 1.5px solid var(--kg-border) !important;
  background: none !important; cursor: pointer !important; flex-shrink: 0 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 11px !important; color: var(--kg-muted) !important;
  font-style: italic !important; font-weight: 700 !important;
  transition: border-color .15s, color .15s !important;
  font-family: Georgia, serif !important;
  position: relative !important; z-index: 5 !important;
  padding: 0 !important; margin: 0 !important; line-height: 1 !important;
  outline: none !important;
}
#kg-quiz .kg-info:hover {
  border-color: var(--kg-gold) !important;
  color: var(--kg-gold-dk) !important;
  background: var(--kg-gold-lt) !important;
}

/* Tooltip – erscheint bei Hover UND bei .open (Klick) */
#kg-quiz .kg-tip {
  display: none;
  position: absolute !important;
  right: 38px !important; top: 50% !important; transform: translateY(-50%) !important;
  background: #2C2416 !important;
  color: #FFF8F0 !important;
  font-size: 13px !important; line-height: 1.5 !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  max-width: 240px !important; min-width: 140px !important;
  z-index: 100 !important;
  font-weight: 400 !important;
  pointer-events: none !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.25) !important;
}
#kg-quiz .kg-tip::after {
  content: '' !important;
  position: absolute !important; right: -5px !important; top: 50% !important;
  transform: translateY(-50%) !important;
  border: 5px solid transparent !important;
  border-left-color: #2C2416 !important; border-right: none !important;
}
/* Hover auf dem Antwort-Container ODER info-button → Tooltip zeigen */
#kg-quiz .kg-info:hover + .kg-tip,
#kg-quiz .kg-tip.open { display: block !important; }

/* Actions */
#kg-quiz .kg-actions {
  padding: 20px 36px 32px 36px !important;
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
  margin: 0 !important;
}

/* Buttons */
#kg-quiz .kg-btn {
  padding: 12px 28px !important;
  border-radius: var(--kg-r-sm) !important;
  font-size: 15px !important; font-weight: 500 !important;
  cursor: pointer !important;
  border: 2px solid transparent !important;
  font-family: inherit !important;
  transition: all .15s !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  display: inline-block !important;
}
#kg-quiz .kg-btn-gold { background: var(--kg-gold) !important; color: #fff !important; border-color: var(--kg-gold) !important; }
#kg-quiz .kg-btn-gold:hover { background: var(--kg-gold-dk) !important; border-color: var(--kg-gold-dk) !important; transform: translateY(-1px) !important; }
#kg-quiz .kg-btn-gold:disabled { background: var(--kg-border) !important; color: var(--kg-muted) !important; border-color: var(--kg-border) !important; cursor: not-allowed !important; transform: none !important; }
#kg-quiz .kg-btn-outline { background: none !important; border-color: var(--kg-border) !important; color: var(--kg-muted) !important; }
#kg-quiz .kg-btn-outline:hover { border-color: var(--kg-gold) !important; color: var(--kg-gold-dk) !important; }
#kg-quiz .kg-btn-red { background: var(--kg-red) !important; color: #fff !important; border-color: var(--kg-red) !important; }
#kg-quiz .kg-btn-red:hover { background: #A02828 !important; border-color: #A02828 !important; }

/* Overlay */
#kg-quiz .kg-overlay {
  position: absolute !important; inset: 0 !important;
  background: rgba(44,36,22,.6) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  z-index: 50 !important; border-radius: var(--kg-r) !important;
}
#kg-quiz .kg-overlay[hidden],
#kg-quiz .kg-overlay[style*="display: none"],
#kg-quiz .kg-overlay[style*="display:none"] { display: none !important; }
#kg-quiz .kg-dialog {
  background: var(--kg-card) !important; border-radius: var(--kg-r) !important;
  padding: 36px 32px !important; max-width: 380px !important; width: 92% !important;
  margin: 0 !important;
}
#kg-quiz .kg-dlg-icon { text-align: center !important; margin: 0 0 16px 0 !important; padding: 0 !important; }
#kg-quiz .kg-dlg-title {
  font-size: 1rem !important; font-weight: 600 !important; color: var(--kg-red) !important;
  text-align: center !important; margin: 0 0 12px 0 !important; padding: 0 !important; line-height: 1.3 !important;
}
#kg-quiz .kg-dlg-text {
  font-size: 14px !important; color: var(--kg-muted) !important; line-height: 1.65 !important;
  text-align: center !important; margin: 0 0 24px 0 !important; padding: 0 !important;
}
#kg-quiz .kg-dlg-btns { display: flex !important; gap: 10px !important; justify-content: center !important; flex-wrap: wrap !important; }

/* Spinner */
#kg-quiz .kg-spinner {
  width: 36px !important; height: 36px !important;
  border: 3px solid var(--kg-gold-lt) !important; border-top-color: var(--kg-gold) !important;
  border-radius: 50% !important; margin: 0 auto 14px auto !important;
  animation: kgspin .7s linear infinite !important;
  padding: 0 !important;
}
@keyframes kgspin { to { transform: rotate(360deg); } }
#kg-quiz .kg-loading-text { font-size: 14px !important; color: var(--kg-muted) !important; text-align: center !important; margin: 0 !important; }

/* Error */
#kg-quiz .kg-err {
  padding: 14px 20px !important;
  color: var(--kg-red) !important; font-size: 13px !important;
  background: var(--kg-red-lt) !important;
  border-radius: var(--kg-r-sm) !important;
  margin: 16px 0 !important;
}

/* Responsive */
@media (max-width: 520px) {
  #kg-quiz .kg-sc-grid { grid-template-columns: repeat(2,1fr) !important; }
  #kg-quiz .kg-body { padding: 24px 20px 12px 20px !important; }
  #kg-quiz .kg-actions { padding: 12px 20px 24px 20px !important; }
  #kg-quiz .kg-hdr { padding: 14px 20px 12px 20px !important; }
  #kg-quiz .kg-title { font-size: 1rem !important; }
  #kg-quiz .kg-q-text { font-size: 16px !important; }
  #kg-quiz .kg-tip { right: auto !important; left: 0 !important; top: auto !important; bottom: calc(100% + 8px) !important; transform: none !important; max-width: 200px !important; }
  #kg-quiz .kg-tip::after { display: none !important; }
}

/* ── Intro-Bereich ─────────────────────────────────────────────────────────── */
#kg-quiz .kg-intro-body {
  display: flex !important;
  gap: 32px !important;
  align-items: center !important;
  padding: 40px 36px 40px 36px !important;
  margin: 0 !important;
}
#kg-quiz .kg-intro-left {
  flex: 1 !important;
  min-width: 0 !important;
}
#kg-quiz .kg-intro-title {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: var(--kg-gold-dk) !important;
  margin: 0 0 14px 0 !important;
  padding: 0 !important;
  line-height: 1.25 !important;
}
#kg-quiz .kg-intro-text {
  font-size: 15px !important;
  color: var(--kg-muted) !important;
  line-height: 1.7 !important;
  margin: 0 0 28px 0 !important;
  padding: 0 !important;
}
#kg-quiz .kg-intro-right {
  flex: 0 0 auto !important;
  width: 220px !important;
}
#kg-quiz .kg-intro-img {
  width: 100% !important;
  height: auto !important;
  border-radius: var(--kg-r) !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ── Szenario-Karten (2-spaltig, Bild links) ──────────────────────────────── */
#kg-quiz .kg-sc-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  margin: 0 0 24px 0 !important;
  padding: 0 !important;
}
#kg-quiz .kg-sc-card {
  background: var(--kg-card) !important;
  border: 2px solid var(--kg-border) !important;
  border-radius: var(--kg-r) !important;
  padding: 14px 16px !important;
  cursor: pointer !important;
  transition: border-color .2s, transform .2s, box-shadow .2s !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  text-align: left !important;
  margin: 0 !important;
}
#kg-quiz .kg-sc-card:hover {
  border-color: var(--kg-gold) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 16px rgba(184,150,90,.15) !important;
}
#kg-quiz .kg-sc-card.kg-sel {
  border-color: var(--kg-gold) !important;
  background: var(--kg-gold-lt) !important;
}
#kg-quiz .kg-sc-thumb {
  width: 54px !important; height: 54px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  margin: 0 !important; padding: 0 !important;
}
#kg-quiz .kg-sc-thumb-ph {
  width: 54px !important; height: 54px !important;
  border-radius: 50% !important;
  background: var(--kg-gold-lt) !important;
  flex-shrink: 0 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  margin: 0 !important; padding: 0 !important;
}
#kg-quiz .kg-sc-card.kg-sel .kg-sc-thumb-ph { background: var(--kg-gold) !important; }
#kg-quiz .kg-sc-info {
  display: flex !important; flex-direction: column !important; gap: 3px !important;
  min-width: 0 !important; flex: 1 !important;
}
#kg-quiz .kg-sc-name {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--kg-text) !important;
  line-height: 1.3 !important;
  display: block !important;
  margin: 0 !important; padding: 0 !important;
}
#kg-quiz .kg-sc-desc {
  font-size: 12px !important;
  color: var(--kg-muted) !important;
  line-height: 1.4 !important;
  display: block !important;
  margin: 0 !important; padding: 0 !important;
}

@media (max-width: 520px) {
  #kg-quiz .kg-sc-grid { grid-template-columns: 1fr !important; }
  #kg-quiz .kg-intro-body { flex-direction: column !important; padding: 28px 20px !important; }
  #kg-quiz .kg-intro-right { width: 100% !important; }
  #kg-quiz .kg-intro-title { font-size: 22px !important; }
}

/* Debug: Antwortdaten im Quiz sichtbar machen, nur wenn KG_CONFIG.debug aktiv ist */
.kg-answer-debug{
  display:block;
  width:100%;
  margin:8px 0 0 34px;
  padding:8px 10px;
  background:#111827;
  color:#A7F3D0;
  border-radius:8px;
  font-size:11px;
  line-height:1.45;
  white-space:pre-wrap;
  overflow:auto;
  max-height:180px;
}


/* Critical answer dialog - fixed centered viewport modal (3.6.25) */
body.kg-critical-overlay-open {
  overflow: hidden !important;
}
#kg-quiz #kg-overlay-critical {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  background: rgba(23, 21, 17, .58) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 999999 !important;
  border-radius: 0 !important;
  padding: 24px !important;
  box-sizing: border-box !important;
}
#kg-quiz #kg-overlay-critical[hidden],
#kg-quiz #kg-overlay-critical[style*="display: none"],
#kg-quiz #kg-overlay-critical[style*="display:none"] {
  display: none !important;
}
#kg-quiz #kg-overlay-critical .kg-dialog {
  position: relative !important;
  width: min(92vw, 440px) !important;
  max-width: 440px !important;
  max-height: calc(100vh - 48px) !important;
  overflow: visible !important;
  background: #fff !important;
  border-radius: 22px !important;
  padding: 34px 34px 36px !important;
  box-shadow: 0 26px 80px rgba(15, 20, 35, .28), 0 2px 0 rgba(255,255,255,.65) inset !important;
  border: 1px solid rgba(229, 203, 148, .35) !important;
  margin: 0 !important;
  transform: none !important;
}
#kg-quiz #kg-overlay-critical .kg-dialog-icon {
  margin: 0 0 18px !important;
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
}
#kg-quiz #kg-overlay-critical .kg-dialog-title {
  margin: 0 0 22px !important;
  color: #103B38 !important;
  font-size: 1.8rem !important;
  line-height: 1.08 !important;
  letter-spacing: -.03em !important;
  font-weight: 500 !important;
}
#kg-quiz #kg-overlay-critical .kg-dialog-text {
  margin: 0 0 28px !important;
  color: #08383B !important;
  font-size: 1rem !important;
  line-height: 1.55 !important;
  font-weight: 400 !important;
}
#kg-quiz #kg-overlay-critical .kg-dialog-actions {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
}
#kg-quiz #kg-overlay-critical .kg-dialog-actions .kg-btn {
  width: 100% !important;
  min-height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 12px !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
#kg-quiz #kg-overlay-critical .kg-dialog-actions .kg-btn-outline {
  background: #fff !important;
  color: #7B613A !important;
  border-color: rgba(214, 170, 85, .45) !important;
  box-shadow: inset 0 0 0 1px rgba(214, 170, 85, .18) !important;
}
#kg-quiz #kg-overlay-critical .kg-dialog-actions .kg-btn-red {
  background: #C7343A !important;
  border-color: #C7343A !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(199, 52, 58, .18) !important;
}
#kg-quiz #kg-overlay-critical .kg-dialog-actions .kg-btn-red:hover {
  background: #A9282D !important;
  border-color: #A9282D !important;
}
@media (max-width: 520px) {
  #kg-quiz #kg-overlay-critical {
    padding: 16px !important;
  }
  #kg-quiz #kg-overlay-critical .kg-dialog {
    width: calc(100vw - 32px) !important;
    padding: 30px 28px 32px !important;
    border-radius: 20px !important;
  }
  #kg-quiz #kg-overlay-critical .kg-dialog-title {
    font-size: 1.8rem !important;
  }
  #kg-quiz #kg-overlay-critical .kg-dialog-text {
    font-size: 1rem !important;
    line-height: 1.55 !important;
  }
}