/* ===============================================================
   GastroRadar — Quiz
   Separate Datei im /quiz/ Ordner
   ================================================================ */

/* ── Quiz-Banner ─────────────────────────────────────────────────── */
.quiz-wip-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #0f1923;
  border-radius: 8px 8px 0 0;
  padding: 9px 14px;
}

.quiz-wip-icon {
  font-size: 16px;
  color: #e8a040;
  flex-shrink: 0;
}

.quiz-wip-texts {
  flex: 1;
  min-width: 0;
}

.quiz-wip-title {
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
}

.quiz-wip-sub {
  font-size: 10px;
  color: rgba(255,255,255,0.42);
  margin-top: 1px;
}

.quiz-wip-pill {
  font-size: 10px;
  font-weight: 700;
  background: rgba(52,108,146,0.30);
  color: #7ab8d8;
  padding: 3px 9px;
  border-radius: 20px;
  border: 0.5px solid rgba(52,108,146,0.45);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Kachel ─────────────────────────────────────────────────────── */
.quiz-tile {
  background: #ffffff;
  border: 1px solid #d0dce6;
  border-top: none;         /* WIP-Banner nimmt den oberen Rand */
  border-radius: 0 0 12px 12px;
  padding: 14px;
}

.quiz-tile-wrap {
  margin: 0 0 10px 0;
}

/* Hat kein WIP → volle Border */
.quiz-tile-wrap--live .quiz-tile {
  border-top: 1px solid #d0dce6;
  border-radius: 12px;
}

/* ── Kopfzeile: Icon + Titel ─────────────────────────────────────── */
.quiz-tile-head {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 12px;
}

/* Icon-Box: 62×62, Kategorie-Farbe als Hintergrund (per JS gesetzt) */
.quiz-tile-icon {
  width: 62px;
  height: 62px;
  border-radius: 14px;
  background: #346c92;   /* Fallback bis JS lädt */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  transition: background 0.2s;
}

/* ti-help-square — immer sichtbar, weiß, vorne */
.quiz-tile-icon-main {
  position: relative;
  z-index: 1;
  font-size: 27px;
  color: #ffffff;
}

/* Kategorie-Icon — groß, gedimmt, dekorativ im Hintergrund */
.quiz-tile-icon-deco {
  position: absolute;
  font-size: 48px;
  bottom: -9px;
  right: -9px;
  transform: rotate(-15deg);
  color: rgba(255, 255, 255, 0.18);
  pointer-events: none;
}

/* Label "Frage des Tages" — fett, prominent */
.quiz-tile-label {
  font-size: 14px;
  color: #525457;
  font-weight: 800;
  margin-bottom: 3px;
}

/* Kategoriename — kleiner, Kategorie-Farbe (per JS) */
.quiz-tile-title {
  font-size: 12px;
  font-weight: 600;
  color: #346c92;   /* Fallback, wird per JS überschrieben */
  line-height: 1.1;
  margin-bottom: 4px;
  transition: color 0.2s;
}

/* Datumszeile / Sonntags-Score */
.quiz-tile-date {
  font-size: 11px;
  color: #9aacba;
}

/* ── Wochen-Dots ────────────────────────────────────────────────── */
.quiz-week-dots {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}

.quiz-dot {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.quiz-dot-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f0f2f4;
  border: 1px solid #e0e5ea;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: background 0.15s, border-color 0.15s;
}

.quiz-dot-label {
  font-size: 9px;
  color: #9aacba;
  font-weight: 500;
  letter-spacing: 0.04em;
}

/* Zustände (werden per JS gesetzt) */
.quiz-dot--ok   .quiz-dot-circle { background: #e8f5e9; border-color: #a5d6a7; color: #2e7d32; }
.quiz-dot--fail .quiz-dot-circle { background: #fce4e4; border-color: #ef9a9a; color: #c62828; }
.quiz-dot--today .quiz-dot-circle { background: #346c92; border-color: #346c92; color: #ffffff; }
.quiz-dot--miss .quiz-dot-circle { background: #f7f0e8; border-color: #e8d5b7; color: #b0896a; }

/* ── Play-Button ────────────────────────────────────────────────── */
.quiz-play-btn {
  width: 100%;
  background: #346c92;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: background 0.15s;
}

.quiz-play-btn:hover {
  background: #285573;
}

/* Reiner disabled-Zustand (noch nicht gespielt, Button noch blockiert) */
.quiz-play-btn:disabled:not(.quiz-play-btn--done) {
  background: #b0c4d4;
  cursor: default;
}

/* Gespielt: Button wird zur Ergebnis-Karte */
.quiz-play-btn--done {
  cursor: default;
  justify-content: flex-start;
  text-align: left;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 10px;
  transition: none;   /* kein Farb-Flash beim Einblenden */
}

/* ── Inner-Elemente der Ergebnis-Karte ── */
.qz-result-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.qz-result-texts {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.qz-result-main {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}

.qz-result-sub {
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

/* Kleiner Amber-Pill "So. Auswertung" */
.qz-sunday-hint {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  background: #fff3cd;
  color: #7c5800;
  white-space: nowrap;
}

.qz-sunday-hint .ti {
  font-size: 10px;
}

.qz-result-pts {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.qz-pts-num {
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}

.qz-pts-lbl {
  font-size: 9px;
  opacity: 0.7;
  margin-top: 1px;
}

/* ================================================================
   MODAL
   ================================================================ */

/* ── Overlay ────────────────────────────────────────────────────── */
.qz-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 2000;
  display: flex;
  align-items: flex-end;        /* Sheet von unten */
  justify-content: center;
  padding: 0;
}

.qz-overlay[hidden] { display: none; }

/* ── Card ───────────────────────────────────────────────────────── */
.qz-card {
  background: #ffffff;
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-width: 480px;
  overflow: hidden;
  animation: qz-slide-up 0.22s ease-out;
}

@keyframes qz-slide-up {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ── Header ─────────────────────────────────────────────────────── */
.qz-header {
  background: #0f1923;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.qz-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.qz-day {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
}

.qz-cat {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  letter-spacing: 0.03em;
}

.qz-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.qz-close:hover {
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}

/* ── Body ───────────────────────────────────────────────────────── */
.qz-body {
  padding: 18px 16px 12px;
}

.qz-question {
  font-size: 15px;
  font-weight: 600;
  color: #1a2530;
  line-height: 1.45;
  margin-bottom: 16px;
}

/* ── Antwort-Buttons ────────────────────────────────────────────── */
.qz-answers {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.qz-answer-btn {
  width: 100%;
  background: #f4f5f7;
  border: 1px solid #dce4ea;
  border-radius: 10px;
  padding: 11px 13px;
  text-align: left;
  font-size: 13px;
  color: #1a2530;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 0.12s, border-color 0.12s;
  line-height: 1.35;
}

.qz-answer-btn:hover:not(:disabled) {
  background: #e8eef3;
  border-color: #346c92;
}

.qz-answer-letter {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #dce4ea;
  color: #4a6b80;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
}

/* Richtig */
.qz-answer--correct {
  background: #e8f5e9 !important;
  border-color: #a5d6a7 !important;
}
.qz-answer--correct .qz-answer-letter {
  background: #2e7d32;
  color: #fff;
}

/* Falsch */
.qz-answer--wrong {
  background: #fce4e4 !important;
  border-color: #ef9a9a !important;
}
.qz-answer--wrong .qz-answer-letter {
  background: #c62828;
  color: #fff;
}

/* ── Footer ─────────────────────────────────────────────────────── */
.qz-footer {
  padding: 10px 16px 20px;
  border-top: 1px solid #eef1f4;
}

/* Wochenfortschritt-Dots */
.qz-progress {
  display: flex;
  gap: 5px;
  margin-bottom: 12px;
}

.qz-prog-dot {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: #dce4ea;
  transition: background 0.2s;
}

.qz-prog-dot--today  { background: #346c92; }
.qz-prog-dot--ok     { background: #4caf50; }
.qz-prog-dot--fail   { background: #ef5350; }
.qz-prog-dot--miss   { background: #e0c89a; }

/* Ergebnis-Zeile */
.qz-result {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.qz-result[hidden] { display: none; }

.qz-result-text {
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
}

.qz-result--ok   { color: #2e7d32; }
.qz-result--fail { color: #c62828; }

.qz-btn-close-result {
  background: #346c92;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.qz-btn-close-result:hover {
  background: #285573;
}

/* ── Streak-Box ──────────────────────────────────────────────────── */
.qm-streak-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(232, 160, 64, 0.12);
  border: 1px solid rgba(232, 160, 64, 0.30);
  border-radius: 10px;
  padding: 10px 14px;
}

.qm-streak-box[hidden] { display: none; }

.qm-streak-box .ti-flame {
  font-size: 22px;
  color: #e8a040;
  flex-shrink: 0;
}

.qm-streak-texts {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.qm-streak-num {
  font-size: 14px;
  font-weight: 600;
  color: #c8820a;
}

.qm-streak-lbl {
  font-size: 11px;
  color: #a06d1a;
}

/* ================================================================
   KACHEL — Chips + Info-Link
   ================================================================ */

.quiz-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.quiz-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #f0f4f7;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 11px;
  color: #4a6b80;
  white-space: nowrap;
}

.quiz-chip .ti {
  font-size: 13px;
}

.quiz-info-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: #346c92;
  background: #e8f4fb;
  border: 1px solid #b8d8ed;
  border-radius: 20px;
  cursor: pointer;
  padding: 7px 16px;
  margin-bottom: 14px;
  width: 100%;
  transition: background 0.15s, border-color 0.15s;
}

.quiz-info-link .ti {
  font-size: 13px;
}

.quiz-info-link:hover {
  background: #d4ecf7;
  border-color: #346c92;
}

/* ================================================================
   INFO-SHEET — Regeln
   ================================================================ */

.qzi-rule {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #eef1f4;
}

.qzi-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.qzi-icon--blue   { background: #e8eef3; color: #346c92; }
.qzi-icon--red    { background: #fce4e4; color: #c62828; }
.qzi-icon--purple { background: #ede7f6; color: #534AB7; }
.qzi-icon--green  { background: #e8f5e9; color: #2e7d32; }
.qzi-icon--amber  { background: #fff8e1; color: #f59e0b; }

.qzi-title {
  font-size: 13px;
  font-weight: 600;
  color: #1a2530;
  margin-bottom: 3px;
}

.qzi-text {
  font-size: 11px;
  color: #7a8c9a;
  line-height: 1.5;
}

/* ================================================================
   WOCHENAUSWERTUNG (Sunday Summary Sheet)
   ================================================================ */

/* Card: scrollbar-fähig */
.qzs-card {
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}

/* Hero — liegt direkt im dunklen Header-Bereich */
.qzs-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 14px;
  background: #0f1923;
}

.qzs-hero-score {
  font-size: 52px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1;
}

.qzs-hero-max {
  font-size: 22px;
  color: rgba(255, 255, 255, 0.3);
}

.qzs-hero-right {
  text-align: right;
}

.qzs-stars {
  font-size: 18px;
  letter-spacing: 2px;
  color: #f59e0b;
  margin-bottom: 4px;
}

.qzs-hero-msg {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
}

/* Scrollbarer Body */
.qzs-body {
  overflow-y: auto;
  flex: 1;
  padding: 12px 14px 20px;
  background: #f4f5f7;
}

/* Stats-Kacheln */
.qzs-stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}

.qzs-stat {
  background: #ffffff;
  border: 0.5px solid #d0dce6;
  border-radius: 10px;
  padding: 10px 12px;
}

.qzs-stat-label {
  font-size: 10px;
  color: #9aacba;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.qzs-stat-val {
  font-size: 22px;
  font-weight: 700;
  color: #1a2530;
  line-height: 1;
}

.qzs-stat-val--sm {
  font-size: 14px;
  margin-top: 3px;
}

.qzs-stat-sub {
  font-size: 10px;
  color: #9aacba;
  margin-top: 3px;
}

/* Abschnittstitel */
.qzs-section-title {
  font-size: 10px;
  font-weight: 600;
  color: #9aacba;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* Tages-Karte */
.qzs-day-card {
  background: #ffffff;
  border: 0.5px solid #d0dce6;
  border-radius: 10px;
  margin-bottom: 8px;
  overflow: hidden;
}

.qzs-day-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 0.5px solid #eef1f4;
}

.qzs-day-hdr-left {
  display: flex;
  align-items: center;
  gap: 7px;
}

.qzs-day-name {
  font-size: 12px;
  font-weight: 600;
  color: #1a2530;
}

.qzs-day-icon {
  font-size: 16px;
}

.qzs-day-icon--ok   { color: #2e7d32; }
.qzs-day-icon--fail { color: #c62828; }
.qzs-day-icon--miss { color: #b0896a; }

.qzs-day-body {
  padding: 9px 12px;
}

.qzs-day-q {
  font-size: 11px;
  color: #4a6b80;
  line-height: 1.4;
  margin-bottom: 7px;
}

/* Antwort-Zeilen */
.qzs-ans-row {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-bottom: 4px;
}

.qzs-ans-row:last-child { margin-bottom: 0; }

.qzs-ans-tag {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 1px;
  letter-spacing: 0.02em;
}

.qzs-ans-tag--ok    { background: #e8f5e9; color: #2e7d32; }
.qzs-ans-tag--fail  { background: #fce4e4; color: #c62828; }
.qzs-ans-tag--miss  { background: #f7f0e8; color: #b0896a; }
.qzs-ans-tag--right { background: #e8eef3; color: #346c92; }

.qzs-ans-text {
  font-size: 11px;
  color: #1a2530;
  line-height: 1.35;
}

.qzs-ans-text--muted { color: #9aacba; }

/* ── Play-Button Variante: Sonntag Auswertung ── */
.quiz-play-btn--summary {
  background: #0f1923;
  color: #ffffff;
  border: none;
}

.quiz-play-btn--summary:hover {
  background: #1c2d3a;
}