/* QuizTreff-Branding fuer Klaro v0.7
 * Wird NACH klaro.css geladen und ueberschreibt das Default-Theme
 * mit dunklem Glasmorphism-Look + lila/violett Akzent.
 *
 * WICHTIG: erzwingt vertikales Stack-Layout (Text OBEN, Buttons UNTEN),
 * damit der Beschreibungstext nie hinter/unter den Buttons verschwindet.
 */

#klaro,
.klaro {
  --qt-bg: rgba(13, 17, 31, 0.97);
  --qt-bg-subtle: rgba(30, 41, 59, 0.6);
  --qt-border: rgba(148, 163, 184, 0.18);
  --qt-border-strong: rgba(139, 92, 246, 0.35);
  --qt-text: #f1f5f9;
  --qt-text-muted: rgba(226, 232, 240, 0.78);
  --qt-text-faint: rgba(148, 163, 184, 0.7);
  --qt-accent: #8b5cf6;
  --qt-accent-2: #6366f1;
  --qt-accent-hover: #a78bfa;
  --qt-decline: rgba(71, 85, 105, 0.85);
  --qt-decline-hover: rgba(100, 116, 139, 0.95);
  --qt-glow: 0 0 0 1px rgba(139, 92, 246, 0.18), 0 -12px 48px rgba(0, 0, 0, 0.55), 0 0 80px -20px rgba(139, 92, 246, 0.45);
  --qt-radius: 18px;
  --qt-radius-btn: 11px;
  --qt-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ─────────────────── Bottom Notice ─────────────────── */

#klaro .cookie-notice:not(.cookie-modal-notice) {
  background: var(--qt-bg) !important;
  color: var(--qt-text) !important;
  border: 1px solid var(--qt-border) !important;
  border-radius: var(--qt-radius) !important;
  box-shadow: var(--qt-glow) !important;
  font-family: var(--qt-font) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  padding: 26px 30px !important;
  max-width: 1080px !important;
  margin: 0 auto !important;
  position: fixed !important;
  left: 16px !important;
  right: 16px !important;
  bottom: 16px !important;
  top: auto !important;
  z-index: 999999 !important;
  animation: qt-klaro-rise 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes qt-klaro-rise {
  from { transform: translateY(28px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Lila Top-Highlight als Markenakzent */
#klaro .cookie-notice:not(.cookie-modal-notice)::before {
  content: '';
  position: absolute;
  top: 0; left: 24px; right: 24px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--qt-accent), var(--qt-accent-2), transparent);
  border-radius: 2px;
  opacity: 0.85;
}

/* WICHTIG: erzwinge vertikales Stack-Layout. Text oben, Buttons unten. */
#klaro .cookie-notice:not(.cookie-modal-notice) .cn-body {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
}

#klaro .cookie-notice .cn-body > * { margin: 0 !important; }

#klaro .cookie-notice .cn-body p,
#klaro .cookie-notice .cn-body p.cn-changes {
  color: var(--qt-text) !important;
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  max-width: 780px !important;
}

#klaro .cookie-notice .cn-body p.cn-changes {
  color: var(--qt-text-faint) !important;
  font-size: 12.5px !important;
  font-style: italic;
}

#klaro .cookie-notice .cn-body p a {
  color: var(--qt-accent-hover) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
  font-weight: 500;
}

#klaro .cookie-notice .cn-body p a:hover {
  color: #c4b5fd !important;
}

/* Button-Reihe IMMER unten, nie umflossen */
#klaro .cookie-notice .cn-ok {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-items: center !important;
  justify-content: flex-end !important;
  margin: 0 !important;
  padding-top: 4px !important;
  width: 100% !important;
  flex: 0 0 auto !important;
  order: 99 !important;          /* immer ans Ende des Flex-Containers */
}

/* Klaro v0.7 wickelt Buttons in <div class="cn-buttons"> (defensiv mit-stylen) */
#klaro .cookie-notice .cn-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

/* ─────────────────── Modal (Settings) ─────────────────── */

#klaro .cookie-modal .cm-bg {
  background: rgba(0, 0, 0, 0.7) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#klaro .cookie-modal .cm-modal {
  background: var(--qt-bg) !important;
  color: var(--qt-text) !important;
  border-radius: var(--qt-radius) !important;
  border: 1px solid var(--qt-border) !important;
  box-shadow: 0 32px 100px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(139, 92, 246, 0.25) !important;
  font-family: var(--qt-font) !important;
  max-width: 720px !important;
}

#klaro .cookie-modal .cm-header {
  border-bottom: 1px solid var(--qt-border) !important;
  padding: 24px 30px 20px !important;
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.08) 0%, transparent 100%);
}

#klaro .cookie-modal .cm-header h1,
#klaro .cookie-modal .cm-header h2 {
  color: var(--qt-text) !important;
  font-weight: 700 !important;
  font-size: 1.35rem !important;
  letter-spacing: -0.015em;
  margin: 0 !important;
}

#klaro .cookie-modal .cm-header p {
  color: var(--qt-text-muted) !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  margin-top: 10px !important;
}

#klaro .cookie-modal .cm-body {
  padding: 20px 30px !important;
  background: transparent !important;
}

#klaro .cookie-modal .cm-purposes {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#klaro .cookie-modal .cm-purpose,
#klaro .cookie-modal li.cm-service {
  background: var(--qt-bg-subtle) !important;
  border: 1px solid var(--qt-border) !important;
  border-radius: var(--qt-radius-btn) !important;
  padding: 16px 72px 16px 18px !important; /* Platz fuer Toggle rechts */
  margin: 0 0 10px !important;
  color: var(--qt-text) !important;
  transition: border-color 0.2s ease, background 0.2s ease;
  position: relative !important;            /* Anker fuer absolutes Toggle */
}

#klaro .cookie-modal .cm-purpose:hover,
#klaro .cookie-modal li.cm-service:hover {
  border-color: var(--qt-border-strong) !important;
  background: rgba(139, 92, 246, 0.06) !important;
}

#klaro .cookie-modal .cm-purpose-title,
#klaro .cookie-modal .cm-list-title,
#klaro .cookie-modal .cm-list-label > span:first-child {
  color: var(--qt-text) !important;
  font-weight: 600 !important;
  font-size: 14.5px !important;
}

#klaro .cookie-modal .cm-purpose-description,
#klaro .cookie-modal .cm-list-description,
#klaro .cookie-modal .cm-list-label .cm-list-description {
  color: var(--qt-text-muted) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  margin-top: 6px !important;
}

#klaro .cookie-modal .cm-footer {
  border-top: 1px solid var(--qt-border) !important;
  padding: 18px 30px !important;
  background: rgba(15, 23, 42, 0.4) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  justify-content: flex-end !important;
  align-items: center !important;
}

#klaro .cookie-modal .cm-powered-by {
  color: rgba(148, 163, 184, 0.35) !important;
  font-size: 11px !important;
  margin-right: auto;
}
#klaro .cookie-modal .cm-powered-by a { color: rgba(148, 163, 184, 0.55) !important; }

/* ─────────────────── Buttons ─────────────────── */

#klaro .cm-btn {
  font-family: var(--qt-font) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  border-radius: var(--qt-radius-btn) !important;
  padding: 11px 20px !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  transition: transform 0.12s ease, background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
  letter-spacing: 0.01em;
  line-height: 1.2 !important;
  white-space: nowrap;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 42px;
}

#klaro .cm-btn:hover { transform: translateY(-1px); }
#klaro .cm-btn:active { transform: translateY(0); }
#klaro .cm-btn:focus-visible {
  outline: 2px solid var(--qt-accent-hover) !important;
  outline-offset: 2px !important;
}

/* Primary: Alle akzeptieren */
#klaro .cm-btn.cm-btn-success,
#klaro .cm-btn.cm-btn-accept-all,
#klaro .cm-btn.cm-btn-accept {
  background: linear-gradient(135deg, var(--qt-accent) 0%, var(--qt-accent-2) 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

#klaro .cm-btn.cm-btn-success:hover,
#klaro .cm-btn.cm-btn-accept-all:hover,
#klaro .cm-btn.cm-btn-accept:hover {
  background: linear-gradient(135deg, var(--qt-accent-hover) 0%, #818cf8 100%) !important;
  box-shadow: 0 6px 22px rgba(139, 92, 246, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

/* Decline / Reject all — gleichwertig sichtbar (DSGVO-Pflicht) */
#klaro .cm-btn.cm-btn-decline,
#klaro .cm-btn.cn-decline {
  background: var(--qt-decline) !important;
  color: #fff !important;
  border-color: rgba(148, 163, 184, 0.2) !important;
}

#klaro .cm-btn.cm-btn-decline:hover,
#klaro .cm-btn.cn-decline:hover {
  background: var(--qt-decline-hover) !important;
  border-color: rgba(148, 163, 184, 0.35) !important;
}

/* Info / Manage / Save selection */
#klaro .cm-btn.cm-btn-info,
#klaro .cm-btn.cn-learn-more {
  background: transparent !important;
  color: var(--qt-text) !important;
  border: 1px solid var(--qt-border) !important;
}

#klaro .cm-btn.cm-btn-info:hover,
#klaro .cm-btn.cn-learn-more:hover {
  background: rgba(139, 92, 246, 0.12) !important;
  border-color: var(--qt-accent) !important;
  color: var(--qt-accent-hover) !important;
}

/* ─────────────────── Toggle-Switches ───────────────────
 * Klaro v0.7-Markup pro Eintrag (cm-purpose / cm-service):
 *   <input.cm-list-input>     <- Sibling vor dem Label
 *   <label.cm-list-label>
 *     <span.cm-list-title>...</span>
 *     <span.cm-switch><div.slider.round.active></div></span>
 *   </label>
 *   <div id="...-description"><p.cm-list-description>...</p></div>
 *
 * Wir nutzen den nativen Input direkt als sichtbaren Toggle (rechts oben verankert)
 * und blenden den redundanten .cm-switch aus. Title/Description fliessen normal
 * auf der linken Seite — kein Overlap mehr.
 */

/* Toggle = der native Input, optisch als Switch gestylt, rechts oben verankert */
#klaro .cookie-modal .cm-list-input {
  appearance: none !important;
  -webkit-appearance: none !important;
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  left: auto !important;
  bottom: auto !important;
  width: 46px !important;
  height: 26px !important;
  background: rgba(71, 85, 105, 0.85) !important;
  border-radius: 999px !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  cursor: pointer !important;
  transition: background-color 0.22s ease, box-shadow 0.22s ease !important;
  z-index: 2 !important;
}

#klaro .cookie-modal .cm-list-input::before {
  content: '' !important;
  position: absolute !important;
  top: 3px !important;
  left: 3px !important;
  width: 20px !important;
  height: 20px !important;
  background: #fff !important;
  border-radius: 50% !important;
  transition: transform 0.24s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

#klaro .cookie-modal .cm-list-input:checked {
  background: linear-gradient(135deg, var(--qt-accent), var(--qt-accent-2)) !important;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15) !important;
}

#klaro .cookie-modal .cm-list-input:checked::before {
  transform: translateX(20px);
}

#klaro .cookie-modal .cm-list-input:disabled,
#klaro .cookie-modal .cm-list-input.required {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
}

#klaro .cookie-modal .cm-list-input:focus-visible {
  outline: 2px solid var(--qt-accent-hover) !important;
  outline-offset: 2px !important;
}

/* Klaro's eigener Slider-Span ist redundant — wir nutzen den Input als Toggle */
#klaro .cookie-modal .cm-switch,
#klaro .cookie-modal .cm-list-label .cm-switch,
#klaro .cookie-modal .cm-list-label .slider {
  display: none !important;
}

/* Label fliesst als normaler Block — Title oben, Description folgt darunter */
#klaro .cookie-modal .cm-list-label {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
}

#klaro .cookie-modal .cm-list-label > * {
  display: block;
  margin: 0;
}

/* "(immer aktiv)" / "(Opt-Out)" Sub-Labels dezenter */
#klaro .cookie-modal .cm-required,
#klaro .cookie-modal .cm-opt-out {
  color: var(--qt-text-faint) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  margin-left: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ─────────────────── Mobile ─────────────────── */

@media (max-width: 720px) {
  #klaro .cookie-notice:not(.cookie-modal-notice) {
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    padding: 20px !important;
    border-radius: 14px !important;
  }
  #klaro .cookie-notice .cn-ok {
    flex-direction: column-reverse !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }
  #klaro .cookie-notice .cn-buttons {
    flex-direction: column-reverse !important;
    align-items: stretch !important;
  }
  #klaro .cm-btn {
    width: 100% !important;
    text-align: center !important;
  }
  #klaro .cookie-modal .cm-modal {
    border-radius: 16px 16px 0 0 !important;
    margin: auto 0 0 0 !important;
    max-height: 92vh !important;
  }
  #klaro .cookie-modal .cm-header,
  #klaro .cookie-modal .cm-body,
  #klaro .cookie-modal .cm-footer {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  #klaro .cookie-modal .cm-footer {
    flex-direction: column-reverse !important;
  }
  #klaro .cookie-modal .cm-footer .cm-btn { width: 100% !important; }
  #klaro .cookie-modal .cm-powered-by { margin-right: 0; text-align: center; padding: 8px 0; }
}

/* Kleine Handys: das Fenster lag auf dem iPhone SE über 426 von 568 px und
   verdeckte den Spieleinstieg. Kompakter Text, Ablehnen und Akzeptieren gleich
   groß nebeneinander, Einzeln auswählen als Link darunter. Der Text bleibt
   unverändert. */
@media (max-width: 480px) {
  #klaro .cookie-notice:not(.cookie-modal-notice) {
    left: 6px !important;
    right: 6px !important;
    bottom: 6px !important;
    padding: 14px 14px 12px !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
  }
  #klaro .cookie-notice:not(.cookie-modal-notice) .cn-body { gap: 12px !important; }
  #klaro .cookie-notice .cn-body p,
  #klaro .cookie-notice .cn-body p.cn-changes {
    font-size: 13px !important;
    line-height: 1.45 !important;
  }
  #klaro .cookie-notice .cn-ok {
    flex-direction: column !important;
    gap: 8px !important;
    padding-top: 0 !important;
  }
  #klaro .cookie-notice .cn-buttons {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    width: 100% !important;
    order: 1;
  }
  #klaro .cookie-notice .cn-buttons .cm-btn {
    flex: 1 1 0 !important;
    width: auto !important;
    min-height: 44px !important;
    padding: 10px 8px !important;
    white-space: normal !important;
  }
  #klaro .cookie-notice .cn-learn-more {
    order: 2;
    align-self: center !important;
    width: auto !important;
    min-height: 32px !important;
    padding: 4px 8px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--qt-text) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
    font-size: 13.5px !important;
  }
}

/* ─────────────────── Footer-Link Hover ─────────────────── */

button[onclick*="qtKlaroShow"]:hover,
a[onclick*="qtKlaroShow"]:hover {
  color: #c4b5fd !important;
}