/*
 * Spiritwissen-Quiz (qz-a, 07.10.2026). Schrift, Groesse und Ueberschriften
 * (h1, h2) kommen unveraendert aus dem Stilblatt der Website (/css/layout.css);
 * hier stehen nur Regeln unter .qz-rahmen-inhalt fuer die Quizbausteine.
 * Farben wie auf der Startseite: Dunkelblau #1d71b8, Hellblau #36a9e0;
 * weisser Text nur auf Dunkelblau.
 */
.qz-rahmen-inhalt {
  --qz-dunkel: #1d71b8;
  --qz-dunkler: #155a91;
  --qz-hell: #36a9e0;
  --qz-hell-flaeche: #e3f2fb;
  --qz-text: #333333;
  --qz-leise: #56616d;
  --qz-richtig: #2e7d32;
  --qz-richtig-flaeche: #e7f4e8;
  --qz-falsch: #b3261e;
  --qz-falsch-flaeche: #fbe9e7;
  --qz-gewaehlt: #f39c12;
}
.qz-rahmen-inhalt.seite { width: 100%; margin: 0 auto; padding: 0.75rem 0 2.5rem; text-align: left; }
.qz-rahmen-inhalt h1 { margin: 0 0 0.75rem; }
.qz-rahmen-inhalt h2 { margin: 1.5rem 0 0.5rem; }
.qz-rahmen-inhalt p { margin: 0 0 0.75rem; }

/* Start */
.qz-rahmen-inhalt .qz-einleitung { max-width: 46em; }
.qz-rahmen-inhalt .qz-start { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin: 1.25rem 0; }
.qz-rahmen-inhalt .qz-start .button { cursor: pointer; font: inherit; }
.qz-rahmen-inhalt .qz-start-haupt { font-size: 1.15em; font-weight: bold; padding: 0.7em 1.6em; }
.qz-rahmen-inhalt .qz-hinweis, .qz-rahmen-inhalt .qz-klein { color: var(--qz-leise); font-size: 0.9em; }

/* Fortschritt */
.qz-rahmen-inhalt .qz-fortschritt { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: 0 0 1rem; color: var(--qz-leise); }
.qz-rahmen-inhalt .qz-punkte { display: inline-flex; gap: 0.3rem; }
.qz-rahmen-inhalt .qz-punkt { width: 0.7rem; height: 0.7rem; border-radius: 50%; border: 2px solid var(--qz-hell); background: #fff; }
.qz-rahmen-inhalt .qz-punkt-fertig { background: var(--qz-hell); }
.qz-rahmen-inhalt .qz-punkt-jetzt { background: var(--qz-dunkel); border-color: var(--qz-dunkel); }

/* Frage und Antworten im Stil von "Wer wird Millionaer": Rauten-Leisten auf
   einer durchlaufenden Linie, Frage oben, vier Antworten zwei mal zwei. */
.qz-rahmen-inhalt .qz-frage,
.qz-rahmen-inhalt .qz-antwort {
  position: relative;
  clip-path: polygon(1.4rem 0, calc(100% - 1.4rem) 0, 100% 50%, calc(100% - 1.4rem) 100%, 1.4rem 100%, 0 50%);
  background: linear-gradient(180deg, #2a86cf 0%, var(--qz-dunkel) 55%, var(--qz-dunkler) 100%);
  color: #ffffff;
}
.qz-rahmen-inhalt .qz-frage {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 5rem; margin: 0 0 1rem; padding: 1rem 2.6rem;
  font-size: 1.2em; font-weight: bold; line-height: 1.35;
}
/* box-sizing: sonst ragen die Leisten um ihr Padding ueber die Spalte hinaus
   und ueberlappen sich in der Mitte (gemeldet auf dem iPad, 07.10.). */
.qz-rahmen-inhalt *, .qz-rahmen-inhalt *::before, .qz-rahmen-inhalt *::after { box-sizing: border-box; }
.qz-rahmen-inhalt .qz-antworten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.7rem 1.4rem; margin: 0 0 1rem; }
.qz-rahmen-inhalt .qz-antwort {
  display: flex; align-items: center; gap: 0.5rem; width: 100%; min-width: 0; max-width: 100%; min-height: 3.4rem;
  margin: 0; padding: 0.55rem 2rem; border: 0; text-align: left;
  font: inherit; font-size: 1em; line-height: 1.3;
}
.qz-rahmen-inhalt button.qz-antwort { cursor: pointer; transition: filter 0.15s; }
.qz-rahmen-inhalt button.qz-antwort:hover,
.qz-rahmen-inhalt button.qz-antwort:focus-visible { filter: brightness(1.15); outline: none; }
.qz-rahmen-inhalt button.qz-antwort:focus-visible { box-shadow: inset 0 0 0 3px var(--qz-hell); }
.qz-rahmen-inhalt .qz-buchstabe { flex: none; color: var(--qz-hell); font-weight: bold; }
.qz-rahmen-inhalt .qz-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.qz-rahmen-inhalt .qz-antwort.qz-gewaehlt { background: linear-gradient(180deg, #f7b44a 0%, var(--qz-gewaehlt) 60%, #d68910 100%); color: #222; }
.qz-rahmen-inhalt .qz-antwort.qz-gewaehlt .qz-buchstabe { color: #222; }
.qz-rahmen-inhalt .qz-antwort.qz-richtig { background: linear-gradient(180deg, #43a047 0%, var(--qz-richtig) 60%, #1b5e20 100%); }
.qz-rahmen-inhalt .qz-antwort.qz-richtig .qz-buchstabe,
.qz-rahmen-inhalt .qz-antwort.qz-falsch .qz-buchstabe { color: #ffffff; }
.qz-rahmen-inhalt .qz-antwort.qz-falsch { background: linear-gradient(180deg, #d9534f 0%, var(--qz-falsch) 60%, #8e1c15 100%); }
.qz-rahmen-inhalt .qz-antwort.qz-blass { opacity: 0.55; }
.qz-rahmen-inhalt .qz-markierung { flex: none; font-size: 0.8em; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; }

/* Aufloesung */
.qz-rahmen-inhalt .qz-aufloesung { margin: 0.5rem 0 1rem; padding: 1rem 1.25rem; border-left: 4px solid var(--qz-hell); background: var(--qz-hell-flaeche); }
.qz-rahmen-inhalt .qz-urteil { font-weight: bold; font-size: 1.15em; }
.qz-rahmen-inhalt .qz-urteil-richtig { color: var(--qz-richtig); }
.qz-rahmen-inhalt .qz-urteil-falsch { color: var(--qz-falsch); }
.qz-rahmen-inhalt .qz-mehr { margin: 0.75rem 0 0; }
.qz-rahmen-inhalt .qz-weiter { margin: 1rem 0; }

/* Ergebnis */
.qz-rahmen-inhalt .qz-ergebnis { display: inline-flex; flex-direction: column; align-items: center; margin: 0.5rem 0 1rem; padding: 1rem 2.5rem; clip-path: polygon(1.4rem 0, calc(100% - 1.4rem) 0, 100% 50%, calc(100% - 1.4rem) 100%, 1.4rem 100%, 0 50%); background: linear-gradient(180deg, #2a86cf 0%, var(--qz-dunkel) 55%, var(--qz-dunkler) 100%); color: #fff; }
.qz-rahmen-inhalt .qz-ergebnis-zahl { font-size: 2em; font-weight: bold; line-height: 1.1; }
.qz-rahmen-inhalt .qz-liste li { margin: 0.3rem 0; }

/* Startseite: Buehne */
.qz-rahmen-inhalt .qz-buehne {
  position: relative; overflow: hidden; margin: 0 0 1rem; padding: 1.5rem 1.25rem 1.25rem;
  border-radius: 1rem; text-align: center;
  background: radial-gradient(ellipse at 50% -20%, #ffffff 0%, var(--qz-hell-flaeche) 55%, #cfe8f7 100%);
}
.qz-rahmen-inhalt .qz-buehne::before {
  content: ""; position: absolute; inset: -40% -10% auto -10%; height: 140%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg at 50% 0%, rgba(54,169,224,0.10) 0deg 6deg, transparent 6deg 18deg);
}
.qz-rahmen-inhalt .qz-buehne > * { position: relative; }
.qz-rahmen-inhalt .qz-bild { max-width: 34rem; margin: 0 auto; border-radius: 0.9rem; overflow: hidden;
  box-shadow: 0 0.6rem 1.6rem rgba(29,113,184,0.25); }
.qz-rahmen-inhalt .qz-bild img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; }
.qz-rahmen-inhalt .qz-buehne .qz-bild + .qz-buehne-frage { margin-top: -2.2rem; z-index: 1; max-width: 28rem; font-size: 1.3em; }
.qz-rahmen-inhalt .qz-buehne-frage { max-width: 34rem; position: relative; margin: 0 auto 1rem; font-size: 1.45em; animation: qz-leuchten 3.5s ease-in-out infinite; }
.qz-rahmen-inhalt .qz-buehne .qz-einleitung { margin: 0 auto 1rem; max-width: 40em; }
.qz-rahmen-inhalt .qz-regeln { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 1.4rem; margin: 0 0 1.25rem; padding: 0; list-style: none; }
.qz-rahmen-inhalt .qz-regeln li { display: flex; align-items: center; gap: 0.5rem; margin: 0; color: var(--qz-text); }
.qz-rahmen-inhalt .qz-regel-zahl {
  display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; flex: none;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  background: var(--qz-dunkel); color: #fff; font-weight: bold;
}
.qz-rahmen-inhalt .qz-start-buehne { justify-content: center; margin: 0 0 0.75rem; gap: 1rem; }
.qz-rahmen-inhalt .qz-start-buehne .button { font-size: 1.05em; }
.qz-rahmen-inhalt .qz-knopf {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 13rem; padding: 0.8rem 2.4rem; border: 0; cursor: pointer; font: inherit;
  clip-path: polygon(1.4rem 0, calc(100% - 1.4rem) 0, 100% 50%, calc(100% - 1.4rem) 100%, 1.4rem 100%, 0 50%);
  transition: transform 0.15s, filter 0.15s;
}
.qz-rahmen-inhalt .qz-knopf:hover, .qz-rahmen-inhalt .qz-knopf:focus-visible { transform: translateY(-2px) scale(1.03); filter: brightness(1.08); outline: none; }
.qz-rahmen-inhalt .qz-knopf-haupt { background: linear-gradient(180deg, #f7b44a 0%, var(--qz-gewaehlt) 60%, #d68910 100%); color: #222; animation: qz-puls 2.4s ease-in-out infinite; }
.qz-rahmen-inhalt .qz-knopf-kurz { background: linear-gradient(180deg, #2a86cf 0%, var(--qz-dunkel) 55%, var(--qz-dunkler) 100%); color: #fff; }
.qz-rahmen-inhalt .qz-knopf-titel { font-size: 1.25em; font-weight: bold; line-height: 1.2; }
.qz-rahmen-inhalt .qz-knopf-zusatz { font-size: 0.85em; opacity: 0.9; }
.qz-rahmen-inhalt .qz-zahlen { margin: 0.25rem 0 0.75rem; color: var(--qz-leise); }
.qz-rahmen-inhalt .qz-zahlen b { color: var(--qz-dunkel); }
.qz-rahmen-inhalt .qz-themen { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; max-width: 46rem; margin: 0 auto; }
.qz-rahmen-inhalt .qz-chip {
  display: inline-block; padding: 0.3rem 0.9rem; border: 2px solid var(--qz-hell); border-radius: 999px;
  background: #fff; color: var(--qz-dunkler); font-size: 0.9em;
  animation: qz-schweben 4s ease-in-out infinite; animation-delay: calc(var(--qz-i, 0) * -0.37s);
}
.qz-rahmen-inhalt .qz-chip-mehr { border-style: dashed; color: var(--qz-leise); }
.qz-rahmen-inhalt .qz-bald { font-weight: bold; }
@keyframes qz-puls { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.12); } }
@keyframes qz-leuchten { 0%, 100% { filter: drop-shadow(0 0 0 rgba(54,169,224,0)); } 50% { filter: drop-shadow(0 0 0.6rem rgba(54,169,224,0.7)); } }
@keyframes qz-schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) {
  .qz-rahmen-inhalt .qz-buehne-frage, .qz-rahmen-inhalt .qz-knopf-haupt, .qz-rahmen-inhalt .qz-chip { animation: none; }
}

/* Ergebnis: Sterne und Wege */
.qz-rahmen-inhalt .qz-sterne { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0 0 0.75rem; }
.qz-rahmen-inhalt .qz-stern { width: 1.4rem; height: 1.4rem; background: #d5e6f2;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.qz-rahmen-inhalt .qz-stern-an { background: var(--qz-gewaehlt); }
.qz-rahmen-inhalt .qz-wege { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin: 0.5rem 0 1rem; }
.qz-rahmen-inhalt .qz-weg {
  display: flex; flex-direction: column; gap: 0.35rem; padding: 1rem 1.1rem; border: 2px solid var(--qz-hell);
  border-radius: 0.75rem; background: var(--qz-hell-flaeche); color: var(--qz-text); text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s;
}
.qz-rahmen-inhalt .qz-weg:hover, .qz-rahmen-inhalt .qz-weg:focus-visible { transform: translateY(-2px); box-shadow: 0 0.4rem 1rem rgba(29,113,184,0.18); outline: none; }
.qz-rahmen-inhalt .qz-weg-symbol {
  display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  background: var(--qz-dunkel); color: #fff; font-weight: bold; font-size: 1.2em;
}
.qz-rahmen-inhalt .qz-weg-titel { font-weight: bold; font-size: 1.1em; color: var(--qz-dunkler); }
.qz-rahmen-inhalt .qz-weg-knopf { margin-top: auto; font-weight: bold; color: var(--qz-dunkel); }

/* Admin */
.qz-rahmen-inhalt .qz-adminnavi { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin: 0 0 0.5rem; }
.qz-rahmen-inhalt .qz-adminnavi a { color: var(--qz-dunkel); font-weight: bold; text-decoration: none; }
.qz-rahmen-inhalt .qz-adminnavi a.aktiv { text-decoration: underline; }
.qz-rahmen-inhalt .qz-betrieb { padding: 0.5rem 0.75rem; background: #fff8e1; border-left: 4px solid var(--qz-gewaehlt); font-size: 0.9em; }
.qz-rahmen-inhalt .qz-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.75rem; margin: 1rem 0; }
.qz-rahmen-inhalt .qz-kachel { display: flex; flex-direction: column; padding: 0.75rem; border: 1px solid #c3dcef; border-radius: 0.5rem; background: #fff; }
.qz-rahmen-inhalt .qz-kachel-wert { font-size: 1.5em; font-weight: bold; color: var(--qz-dunkel); }
.qz-rahmen-inhalt .qz-kachel-name { color: var(--qz-leise); font-size: 0.9em; }
.qz-rahmen-inhalt .qz-tabelle { border-collapse: collapse; margin: 0.5rem 0 1rem; width: 100%; }
.qz-rahmen-inhalt .qz-tabelle th, .qz-rahmen-inhalt .qz-tabelle td { padding: 0.35rem 0.5rem; border-bottom: 1px solid #c3dcef; text-align: left; vertical-align: top; }
.qz-rahmen-inhalt .qz-tabelle th { color: var(--qz-dunkler); }
.qz-rahmen-inhalt .qz-balken { display: inline-block; height: 0.8rem; background: var(--qz-hell); border-radius: 0.2rem; }
.qz-rahmen-inhalt .qz-status { white-space: nowrap; font-size: 0.85em; font-weight: bold; }
.qz-rahmen-inhalt .qz-status-freigegeben { color: var(--qz-richtig); }
.qz-rahmen-inhalt .qz-status-pruefen { color: #b26a00; }
.qz-rahmen-inhalt .qz-status-verworfen { color: var(--qz-falsch); }
.qz-rahmen-inhalt .qz-vorschau { padding: 1rem; border: 1px dashed #c3dcef; border-radius: 0.5rem; }
.qz-rahmen-inhalt .qz-beleg { margin-top: 0.75rem; padding: 0.5rem 0.75rem; background: #f5f5f5; font-size: 0.9em; }
.qz-rahmen-inhalt .qz-statusform { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0; }
.qz-rahmen-inhalt .qz-statusform .button, .qz-rahmen-inhalt .qz-bearbeiten .button { cursor: pointer; font: inherit; }
.qz-rahmen-inhalt .qz-feld { display: block; margin: 0 0 0.6rem; }
.qz-rahmen-inhalt .qz-feld span { display: block; font-weight: bold; margin-bottom: 0.2rem; }
.qz-rahmen-inhalt .qz-feld input, .qz-rahmen-inhalt .qz-feld textarea, .qz-rahmen-inhalt .qz-feld select { width: 100%; max-width: 46em; box-sizing: border-box; font: inherit; padding: 0.35rem; border: 1px solid #36a9e0; }
.qz-rahmen-inhalt .qz-meldung { padding: 0.5rem 0.75rem; background: var(--qz-richtig-flaeche); border-left: 4px solid var(--qz-richtig); }
.qz-rahmen-inhalt .qz-fehlt { color: var(--qz-falsch); }

@media (max-width: 1024px) {
  .qz-rahmen-inhalt .qz-antwort { padding: 0.55rem 1.8rem; }
  .qz-rahmen-inhalt .qz-markierung { font-size: 0.7em; }
}
@media (max-width: 600px) {
  .qz-rahmen-inhalt .qz-buehne { padding: 1rem 0.75rem; }
  .qz-rahmen-inhalt .qz-buehne-frage { font-size: 1.1em; }
  .qz-rahmen-inhalt .qz-buehne .qz-bild + .qz-buehne-frage { margin-top: -0.8rem; min-height: 3.2rem; padding: 0.5rem 1.8rem; max-width: 90%; font-size: 1.05em; }
  .qz-rahmen-inhalt .qz-knopf { min-width: 0; width: 100%; }
  .qz-rahmen-inhalt.seite { padding-left: 12px; padding-right: 12px; padding-bottom: 80px; }
  .qz-rahmen-inhalt .qz-antworten { grid-template-columns: 1fr; }
  .qz-rahmen-inhalt .qz-frage { font-size: 1.05em; padding: 0.9rem 1.8rem; }
  .qz-rahmen-inhalt .qz-fragentabelle td:nth-child(3), .qz-rahmen-inhalt .qz-fragentabelle th:nth-child(3) { display: none; }
}