/* ===================== Quiz ===================== */
.quiz-modi { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.quiz-modus { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 20px; border: 1px solid var(--line); background: var(--bg-raised); text-decoration: none; }
.quiz-modus:hover { border-color: var(--farbe); }
.quiz-modus strong { margin-top: 8px; font: 700 1.35rem/1.1 var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
.quiz-modus .muted { font-size: .88rem; }
.quiz-modus small { margin-top: auto; padding-top: 8px; font: 500 .75rem var(--font-mono); color: var(--farbe); }

.quiz-einstellungen { max-width: 760px; }
.q-modus-kopf { display: flex; gap: 16px; align-items: center; margin-bottom: 8px; }
.q-modus-kopf .h-icon { width: 56px; height: 56px; border-radius: 18px; }
.q-block { margin-top: 18px; padding: 18px; border-radius: 20px; border: 1px solid var(--line); background: var(--bg-raised); display: flex; flex-direction: column; gap: 12px; }
.q-block h3 { font-size: 1.05rem; }
.q-block .filter-chips { padding: 0; }
.q-block .chip-wert[aria-pressed="true"] { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.q-block .reiter { margin: 0; }
.eigene { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: .9rem; }
.eigene input { width: 80px; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); }
details.erweitert summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
details.erweitert summary::after { content: "▾"; color: var(--muted); }
details.erweitert[open] summary::after { content: "▴"; }
details.erweitert summary::-webkit-details-marker { display: none; }
.gross-knopf { margin-top: 22px; padding: 16px 28px; font-size: 1.05rem; }

.quiz-seite { max-width: 780px; }
.quiz-seite.breit { max-width: 1200px; }
.quiz-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.quiz-kopf-rechts { display: flex; align-items: center; gap: 12px; }
.tasten-hinweis { font-size: .78rem; color: var(--muted); white-space: nowrap; }
kbd { display: inline-block; min-width: 1.5em; padding: 1px 5px; border-radius: 5px; border: 1px solid var(--line); border-bottom-width: 2px; background: var(--bg-raised); font: 500 .72rem/1.4 var(--font-mono); text-align: center; color: var(--fg); }
@media (max-width: 900px), (hover: none) { .tasten-hinweis { display: none; } }
.fortschritt { display: flex; gap: 3px; margin: 16px 0 18px; }
.fortschritt i { flex: 1; height: 5px; border-radius: 3px; background: var(--line); }
.fortschritt i.richtig { background: var(--ok); } .fortschritt i.falsch { background: var(--bad); } .fortschritt i.jetzt { background: var(--akzent, var(--beacon)); } .fortschritt i.beantwortet { background: var(--muted); }
.zeitbalken { height: 6px; border-radius: 3px; background: var(--line); margin: -8px 0 18px; overflow: hidden; }
.zeitbalken i { display: block; height: 100%; width: 100%; background: var(--beacon); }
.zeitbalken.knapp i { background: var(--bad); }

.frage { display: flex; flex-direction: column; gap: 16px; }
.frage-bild { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--bg-raised); border: 1px solid var(--line); }
.frage-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.frage-bild.klein { aspect-ratio: 4 / 3; }
.bild-titel { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 16px 12px; color: #fff; font: 800 1.6rem/1 var(--font-display); text-transform: uppercase; background: linear-gradient(to top, rgb(0 0 0 / .7), transparent); }
.frage-text { font-size: 1.3rem; font-weight: 600; line-height: 1.35; }
/* Am PC: Foto links, Frage und Antworten rechts, damit alles ohne Scrollen sichtbar ist */
@media (min-width: 1000px) {
  .quiz-seite { max-width: 1120px; }
  .frage:has(> .frage-bild) { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 28px; align-items: start; }
  .frage:has(> .frage-bild) > .frage-bild { grid-column: 1; grid-row: 1 / span 12; aspect-ratio: 4 / 3; }
  .frage:has(> .frage-bild) > :not(.frage-bild) { grid-column: 2; }
  .frage:has(> .frage-bild) .antworten:not(:has(.gross)) { grid-template-columns: 1fr; }
  .bild-optionen { max-width: 900px; }
}
.antworten { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.antworten.liste { grid-template-columns: 1fr; }
@media (max-width: 560px) { .antworten { grid-template-columns: 1fr; } }
.antwort { display: flex; align-items: center; gap: 12px; text-align: left; border: 1px solid var(--line); background: var(--bg-raised); border-radius: 14px; padding: 13px 16px; cursor: pointer; font-size: 1rem; min-width: 0; overflow-wrap: anywhere; transition: transform .1s, border-color .15s; }
.antwort:hover:not(:disabled) { border-color: var(--muted); transform: translateY(-1px); }
.antwort.gross { justify-content: center; padding: 18px; font-weight: 600; font-size: 1.1rem; }
.antwort .buchstabe, .bild-option .buchstabe { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--bg-hover); font: 600 .85rem var(--font-mono); flex: none; }
.antwort.mono-antwort { font-family: var(--font-mono); justify-content: center; }
.antwort[aria-pressed="true"] { border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 14%, var(--bg-raised)); }
.antwort.richtig, .bild-option.richtig { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 18%, var(--bg-raised)); }
.antwort.falsch, .bild-option.falsch { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 18%, var(--bg-raised)); }
.antwort.gewaehlt, .bild-option.gewaehlt { border-color: var(--fg); }
.antwort:disabled { cursor: default; }

.bild-optionen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bild-optionen:has(> :nth-child(5)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bild-option { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 6px; border-radius: 16px; border: 2px solid var(--line); background: var(--bg-raised); cursor: pointer; text-align: left; min-width: 0; }
.bild-option .bild { position: relative; aspect-ratio: 4 / 3; border-radius: 11px; overflow: hidden; background: var(--bg-hover); }
.bild-option img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bild-option .buchstabe { position: absolute; top: 12px; left: 12px; background: rgb(0 0 0 / .55); color: #fff; }
.bild-option .bild-name { font-weight: 600; font-size: .9rem; padding: 0 4px 4px; }
.bild-option:hover:not(:disabled) { border-color: var(--muted); }

.behauptung { position: relative; padding: 18px 20px; border-radius: 16px; border: 1px dashed var(--muted); display: flex; flex-direction: column; gap: 4px; }
.behauptung strong { font: 800 1.6rem/1.1 var(--font-display); text-transform: uppercase; }
.stempel { position: absolute; right: 16px; top: 50%; transform: translateY(-50%) rotate(-8deg); padding: 6px 12px; border: 3px solid; border-radius: 8px; font: 800 1.2rem/1 var(--font-display); letter-spacing: .06em; }
.stempel.ja { color: var(--ok); } .stempel.nein { color: var(--bad); }

.karteikarte { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: 20px; border: 1px solid var(--line); background: var(--bg-raised); overflow: hidden; cursor: pointer; padding: 0; color: inherit; }
.karteikarte.umgedreht { cursor: default; }
.kk-vorne { position: absolute; inset: 0; }
.kk-vorne img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kk-hinweis { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); padding: 6px 12px; border-radius: 999px; background: rgb(0 0 0 / .55); color: #fff; font-size: .85rem; }
.kk-hinten { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 24px; background: linear-gradient(135deg, color-mix(in srgb, var(--akzent) 22%, var(--bg-raised)), var(--bg-raised)); animation: umdrehen .35s ease; }
.kk-hinten strong { font: 800 2.4rem/1 var(--font-display); text-transform: uppercase; }
@keyframes umdrehen { from { transform: rotateY(90deg); } }
@media (prefers-reduced-motion: reduce) { .kk-hinten { animation: none; } }

.erklaerung { padding: 14px 16px; border-radius: 14px; background: var(--bg-raised); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; font-size: .92rem; }
.erklaerung-text { display: block; margin-top: 6px; white-space: pre-line; color: var(--muted); font-size: .9rem; }

.signal-karte { display: grid; grid-template-columns: 90px 1fr; gap: 18px; align-items: center; padding: 22px; border-radius: 20px; background: #050d13; color: #e3ecef; }
.signal-karte .lampe { width: 60px; height: 60px; border-radius: 50%; margin: auto; background: var(--lampe); opacity: .12; transition: opacity .08s linear; }
.signal-karte .lampe[data-an="1"] { opacity: 1; box-shadow: 0 0 34px 10px color-mix(in srgb, var(--lampe) 60%, transparent); }
.signal-karte .info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.signal-karte .mono { font-size: .85rem; overflow-wrap: anywhere; }
.signal-karte .muted { color: #8ea3ad; }
.steckplaetze { display: flex; flex-wrap: wrap; gap: 8px; }
.slot { min-width: 64px; padding: 10px 14px; border-radius: 12px; border: 2px dashed var(--line); text-align: center; font: 600 1.05rem var(--font-mono); }
.slot.aktiv { border-color: var(--akzent); border-style: solid; }
.slot.richtig { border: 2px solid var(--ok); background: color-mix(in srgb, var(--ok) 15%, transparent); }
.slot.falsch { border: 2px solid var(--bad); background: color-mix(in srgb, var(--bad) 15%, transparent); }
.baustein-optionen { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }

.standort-frage { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: 20px; }
@media (max-width: 860px) { .standort-frage { grid-template-columns: 1fr; } }
.standort-links { display: flex; flex-direction: column; gap: 10px; }
.standort-karte { height: 62vh; min-height: 380px; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); }
.quiz-seite:has(.standort-frage) { max-width: 1200px; }
.runden-ergebnis { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--bg-raised); }
.runden-ergebnis strong { font-size: 1.2rem; }
.runden-ergebnis b { font-size: 1.6rem; color: var(--beacon); }
.runden-ergebnis i { display: block; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.runden-ergebnis i b { display: block; height: 100%; background: var(--ok); }

.sort-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sort-karte { display: grid; grid-template-columns: 32px 48px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-raised); user-select: none; }
.sort-karte[draggable="true"] { cursor: grab; }
.sort-karte.zieht { opacity: .5; border-style: dashed; }
.sort-karte .nummer { font: 600 .95rem var(--font-mono); color: var(--muted); text-align: center; }
.sort-karte .mini-bild { position: relative; width: 48px; height: 48px; border-radius: 10px; overflow: hidden; background: var(--bg-hover); }
.sort-karte .mini-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sort-karte.richtig { border-color: var(--ok); } .sort-karte.falsch { border-color: var(--bad); } .sort-karte.loesung { opacity: .85; }
.sort-pfeile { display: flex; flex-direction: column; gap: 2px; }
.sort-pfeile button { border: 1px solid var(--line); background: var(--bg); border-radius: 6px; cursor: pointer; font-size: .65rem; padding: 2px 6px; }
.griff { font-size: 1.4rem; color: var(--muted); }

.quiz-fuss { position: sticky; bottom: 12px; margin-top: 20px; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
@media (max-width: 760px) { .quiz-fuss { bottom: 76px; } }
.quiz-rueckmeldung { flex: 1; min-width: 200px; }
.quiz-rueckmeldung.richtig { color: var(--ok); } .quiz-rueckmeldung.falsch { color: var(--bad); }
.quiz-rueckmeldung b { color: var(--fg); }

.ergebnis { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.ergebnis .gross { font: 800 clamp(4rem, 10vw, 6rem)/1 var(--font-display); color: var(--akzent, var(--beacon)); }
.ergebnis-unter { font-size: 1.1rem; color: var(--muted); }
.fehlerliste { display: flex; flex-direction: column; gap: 8px; }
.fehler-eintrag { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-raised); }
.fehler-eintrag.kompakt { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
.fehler-eintrag a { color: var(--brand); font-size: .88rem; }
.falsch-text { color: var(--bad); } .richtig-text { color: var(--ok); }
.streak-box { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 18px; border: 1px solid color-mix(in srgb, #FF5722 40%, var(--line)); background: color-mix(in srgb, #FF5722 10%, var(--bg-raised)); align-self: flex-start; }
.streak-box .flamme { font-size: 2.2rem; }
.streak-box > span:last-child { display: flex; flex-direction: column; }

.erklaer-liste { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; }
.erklaer-liste section { padding: 16px 18px; border-radius: 18px; border: 1px solid var(--line); background: var(--bg-raised); display: flex; flex-direction: column; gap: 6px; }

/* Wie viele kennst du? */
.wv-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 22px; margin-top: 16px; }
@media (max-width: 900px) { .wv-raster { grid-template-columns: 1fr; } }
.wv-zaehler { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.wv-zaehler > b { font: 800 4rem/1 var(--font-display); color: var(--akzent); }
.wv-zaehler i { flex-basis: 100%; display: block; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.wv-zaehler i b { display: block; height: 100%; background: var(--akzent); transition: width .4s; }
.wv-form { display: flex; gap: 8px; margin-top: 16px; }
.wv-form input { flex: 1; min-width: 0; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-raised); font-size: 1.05rem; }
.wv-form input:focus { outline: none; border-color: var(--akzent); }
.wv-rueckmeldung { margin: 10px 0; color: var(--muted); }
.wv-rueckmeldung.richtig { color: var(--ok); } .wv-rueckmeldung.falsch { color: var(--bad); } .wv-rueckmeldung.schon { color: var(--warn); }
.wv-liste { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow-y: auto; }
.wv-liste li { display: flex; align-items: baseline; gap: 10px; padding: 8px 12px; border-radius: 12px; background: var(--bg-raised); border: 1px solid var(--line); }
.wv-liste li small { margin-left: auto; }
.wv-liste li.neu { border-color: var(--akzent); animation: einblenden .4s ease; }
.wv-karte { height: 64vh; min-height: 360px; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); }
.wv-nicht { display: flex; flex-wrap: wrap; gap: 6px; max-height: 40vh; overflow-y: auto; }
.wv-nicht a { padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; font-size: .88rem; }

/* Name mit Typ in Antwortoptionen */
.antwort-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.antwort-typ { font: 500 .72rem/1.2 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.bild-name .antwort-text { padding-top: 2px; }