/* ===== Fonts erben deine Seitenschrift ===== */
.koq-quiz, .koq-quiz *{
  font-family:inherit;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

:root{
  --koq-green:#2f7a32;
  --koq-green-weak:rgba(47,122,50,.25);
  --koq-surface:#fff;
  --koq-text:#111;
  --koq-muted:#6b7280;
  --koq-border:#ddd;
  --koq-correct-bg:#c9f7d5;
  --koq-wrong-bg:#f8d7da;
  --koq-darkgray:#4b5563;

  /* Cancel / YouTube-rot */
  --koq-red:#ff0000;
  --koq-red-light:#ffe6e6;
}

.koq-quiz__share { text-align:center; margin:16px auto 10px; }
.koq-quiz__shareimg {
    display:block;
    margin: 0 auto;
  max-width:100%;
  width:500px; height:auto;
  border-radius:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.15);
}
.koq-quiz__shareactions { margin-top:10px; }
.koq-quiz__shareactions .koq-btn { margin:0 6px; }

/* ===== Container ===== */
.koq-quiz{
  position:relative; margin:-6px 0 24px; padding:16px; border-radius:14px; background:var(--koq-surface);
  border:1px solid var(--koq-green-weak);
  box-shadow:0 0 0 1px rgba(47,122,50,.18), 0 6px 18px rgba(47,122,50,.12), 0 18px 36px rgba(47,122,50,.10);
  color:var(--koq-text);
}

/* ===== Headline ===== */
.koq-quiz .koq-quiz__title{
  color:#2f7a32;
  margin:0 0 8px;
  text-align:center;
  font-weight:800;
  text-shadow:0 0 4px rgba(47,122,50,.4), 0 0 8px rgba(47,122,50,.3);
  display:block;
  /* große, konfliktfeste Größe */
  font-size: clamp(2.4rem, 7vw, 3.6rem) !important;
  line-height: 1.12 !important;
}
.koq-quiz__subtitle{
  text-align:center; font-size:1.2em; font-weight:500; color:#444; margin:0 0 20px;
}

/* ===== Status & Progress ===== */
.koq-quiz__status{ display:flex; justify-content:space-between; margin-bottom:8px; font-size:.95em; }
.koq-quiz__progress{ background:#eee; border-radius:6px; height:8px; margin-bottom:14px; overflow:hidden; }
.koq-quiz__progressbar{ height:100%; width:0%; background:var(--koq-green); transition:width .3s ease; }

/* ===== Frage & Antworten ===== */
.koq-quiz__question{ font-size:1.35em; margin:0 0 12px; font-weight:700; }
.koq-quiz__answers{ display:grid; gap:10px; margin-bottom:12px; }

.koq-quiz__game{
  position:relative;
  padding-bottom:56px; /* Platz für Cancel unten rechts */
  z-index:1;
}

.koq-answer{
  appearance:none; -webkit-appearance:none;
  padding:12px 14px; border-radius:10px; border:1px solid var(--koq-green);
  background:#fff; text-align:left; cursor:pointer; line-height:1.35; font-size:1rem; color:var(--koq-text);
  transition: box-shadow .2s ease, transform .05s ease, background-color .2s ease, color .2s ease;
}
@media (hover:hover) and (pointer:fine){
  .koq-answer:hover{
    box-shadow:0 0 8px rgba(47,122,50,.35), 0 0 16px rgba(47,122,50,.25);
    transform:translateY(-1px);
  }
}
.koq-answer:focus-visible{
  outline:3px solid color-mix(in oklab, var(--koq-green) 35%, white); outline-offset:2px;
}

/* Hover nach Auswahl komplett aus */
.koq-answers-locked .koq-answer{
  pointer-events:none; cursor:default; transform:none !important;
}
.koq-answers-locked .koq-answer:hover{
  box-shadow:none !important; transform:none !important; background:inherit !important;
}

/* Richtig / Falsch + dauerhafte Glows */
.koq-answer.is-correct{ background:var(--koq-correct-bg); border-color:var(--koq-green); }
.koq-answer.is-wrong{ background:var(--koq-wrong-bg); border-color:#c00; }
.koq-answers-locked .koq-answer{ color:var(--koq-darkgray); }

@keyframes koq-blink-red{
  0%,100%{ box-shadow:none; background:#fff; }
  25%{ box-shadow:0 0 16px #ff0000; background:#ffe5e5; }
  50%{ box-shadow:none; background:#fff; }
  75%{ box-shadow:0 0 16px #ff0000; background:#ffe5e5; }
}
@keyframes koq-glow-green{
  0%{ box-shadow:none; }
  50%{ box-shadow:0 0 22px rgba(47,122,50,.85); }
  100%{ box-shadow:none; }
}
.koq-anim-shake{ animation: koq-shake 0.6s ease-in-out; }
.koq-anim-shake-blink{ animation: koq-shake 0.6s ease-in-out, koq-blink-red 0.6s ease-in-out 3; }
.koq-anim-glow-green{ animation: koq-glow-green 1.2s ease-in-out 2; }

@keyframes koq-shake{
  0%,100%{ transform:translateX(0); }
  15%{ transform:translateX(-6px); }
  30%{ transform:translateX(6px); }
  45%{ transform:translateX(-5px); }
  60%{ transform:translateX(5px); }
  75%{ transform:translateX(-3px); }
  90%{ transform:translateX(3px); }
}

.koq-answer.glow-correct{ box-shadow:0 0 12px rgba(47,122,50,.8), 0 0 20px rgba(47,122,50,.6); }
.koq-answer.glow-wrong{   box-shadow:0 0 12px rgba(255,0,0,.8),   0 0 20px rgba(255,0,0,.6); }

/* ===== Buttons ===== */
.koq-btn{
  appearance:none; -webkit-appearance:none;
  display:inline-block; padding:10px 18px; border-radius:999px;
  border:1px solid var(--koq-green); background:#fff; color:var(--koq-green);
  cursor:pointer; font-weight:600; text-align:center; margin:4px; font-size:1rem; line-height:1.3;
  transition:all .25s ease;
}
.koq-btn:hover, .koq-btn:focus-visible{
  background:var(--koq-green); color:#fff;
  box-shadow:0 0 8px rgba(47,122,50,.6), 0 0 16px rgba(47,122,50,.4);
}
.koq-btn:disabled{
  opacity:.55; cursor:not-allowed; background:#f7f7f7; color:#aaa; border-color:#ddd; box-shadow:none;
}

/* Next-Button bleibt bei Hover weiß (wie gewünscht) */
.koq-btn--next:hover, .koq-btn--next:focus-visible{
  background:#fff !important; color:var(--koq-green) !important;
  box-shadow:0 0 8px rgba(47,122,50,.6), 0 0 16px rgba(47,122,50,.4);
}

/* Cancel-Button (YouTube-rot, Hover rot + hellroter BG) */
.koq-btn--cancel{
  border-color:var(--koq-red);
  color:var(--koq-red);
  background:#fff;
}
.koq-btn--cancel:hover, .koq-btn--cancel:focus-visible{
  background:var(--koq-red-light);
  color:var(--koq-red);
  box-shadow:0 0 8px rgba(255,0,0,.6), 0 0 16px rgba(255,0,0,.45);
}

/* Steuerleiste: Next links, Cancel unten rechts */
.koq-quiz__footer{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:48px;
  margin-top:8px;
  margin-bottom:50px; /* mehr Platz nach unten */
}
.koq-quiz__game .koq-btn--cancel{
  position:absolute;
  right:0;
  bottom:0;
  z-index:3; /* über dem Canvas */
}

/* Ergebnis & Sonstiges */
.koq-next-timer{ margin-left:.6em; font-weight:500; color:var(--koq-muted); }
.koq-quiz__result{ margin-top:14px; text-align:center; }
.koq-quiz__summary{ margin:0 0 8px; }

.koq-confetti{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; }

/* Level-Auswahl Buttons etwas größer, untereinander */
.koq-btn--level{
  display:block; margin:16px auto; padding:14px 28px; font-size:1.2rem;
  min-width:220px; max-width:280px;
}

/* Mobile Tweaks */
@media (max-width:480px){
  .koq-quiz{ padding:14px; }
  .koq-quiz__answers{ gap:8px; }
  .koq-answer{ padding:12px; }
  .koq-quiz__game .koq-btn--cancel{ position:static; float:right; } /* auf sehr schmalen Screens lieber normal fließen */
}

/* Bewegungen reduzieren */
@media (prefers-reduced-motion:reduce){
  .koq-quiz__progressbar{ transition:none; }
  .koq-anim-shake, .koq-anim-shake-blink, .koq-anim-glow-green{ animation:none !important; }
}



.koq-btn--next {
  display: block;
  margin: 0 auto 20px; /* Button mittig und Abstand nach unten */
}
.koq-btn--next:not(:disabled) {
  animation: koq-btn-soft-glow 1.6s ease-in-out infinite alternate;
}

/* === KOQ: Glowing buttons (persistente Styles) === */
@keyframes koq-btn-soft-glow {
  0%   { box-shadow: 0 0 8px rgba(47,122,50,.35), 0 0 16px rgba(47,122,50,.25); }
  100% { box-shadow: 0 0 18px rgba(47,122,50,.65), 0 0 28px rgba(47,122,50,.45); }
}
@keyframes koq-btn-pulse {
  0%   { box-shadow: 0 0 12px rgba(47,122,50,.45), 0 0 20px rgba(47,122,50,.35); transform: translateZ(0) scale(1.00); }
  100% { box-shadow: 0 0 26px rgba(47,122,50,.75), 0 0 38px rgba(47,122,50,.55); transform: translateZ(0) scale(1.02); }
}
.koq-restart-big {
  display:block !important;
  margin: 24px auto 0 !important;
  padding: 14px 28px !important;
  font-size: 1.15rem !important;
  min-width: 220px;
}
.koq-restart-glow {
  animation: koq-btn-soft-glow 1.6s ease-in-out infinite alternate;
}
.koq-restart-big:hover {
  animation: koq-btn-soft-glow 1.6s ease-in-out infinite alternate, koq-btn-pulse 0.9s ease-in-out infinite alternate;
}
.koq-share-glow {
  animation: koq-btn-soft-glow 1.6s ease-in-out infinite alternate;
}

/* Überschrift – extra starker Override gegen Template-Regeln */
html body .koq-quiz .koq-quiz__title {
  font-size: clamp(2.4rem, 7vw, 3.6rem) !important;
  line-height: 1.12 !important;
}