/* Frontend-Styles, strikt unter .kfv-quiz gekapselt (siehe PLAN.md Abschnitt 7).
 * Layout an den Cowork-Prototyp kfv-fischquiz.html angelehnt (PLAN.md Abschnitt 9), hier auf
 * echte Fotos statt SVG-Zeichnungen ausgelegt. Farben seit 0.12.1 aus der echten Astra-
 * Theme-Palette der Live-Seite uebernommen (astra-settings.global-color-palette: Navy #15467f/
 * Hellblau #3068a6/Dunkelgrau #1e293b/#334155/Border-Grau #d1d5db/Oliv-Akzent #7d7c4b) statt der
 * bis dahin willkuerlichen Teal/Gold-Farben aus dem urspruenglichen Prototyp (Rolf-Feedback:
 * "Kannst Du Dich mehr an dem Design des Theme orientieren?"). ok/bad bleiben bewusst
 * eigenstaendiges Gruen/Rot - Erfolg/Fehler-Farben sollten unabhaengig von der Marke erkennbar
 * bleiben, das Theme selbst definiert dafuer keine eigene Konvention.
 */
.kfv-quiz {
    --kq-ink: #1e293b;
    --kq-muted: #334155;
    --kq-bg: #fff;
    --kq-soft: #eef2f7;
    --kq-line: #d1d5db;
    --kq-brand: #15467f;
    --kq-brand2: #3068a6;
    --kq-ok: #2e7d4f;
    --kq-okbg: #e5f4ea;
    --kq-bad: #b3362c;
    --kq-badbg: #fbe9e7;
    --kq-accent: #7d7c4b;
    max-width: 680px;
    margin: 0 auto;
    color: var(--kq-ink);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    line-height: 1.45;
}
.kfv-quiz * { box-sizing: border-box; }
.kfv-quiz .kq-card { background: var(--kq-bg); border: 1px solid var(--kq-line); border-radius: 14px; overflow: hidden; box-shadow: 0 2px 10px rgba(15, 83, 96, .07); }
.kfv-quiz .kq-head { background: linear-gradient(135deg, var(--kq-brand), var(--kq-brand2)); color: #fff; padding: 18px 20px; }
.kfv-quiz .kq-head h2 { margin: 0; font-size: 1.35rem; line-height: 1.25; color: #fff; }
.kfv-quiz .kq-head p { margin: 4px 0 0; opacity: .85; font-size: .92rem; }
.kfv-quiz .kq-body { padding: 18px 20px 20px; }
.kfv-quiz .kq-modes { display: grid; gap: 10px; margin-top: 6px; }
.kfv-quiz .kq-mode { display: flex; gap: 14px; align-items: center; text-align: left; width: 100%; padding: 14px 16px; border: 1px solid var(--kq-line); border-radius: 12px; background: var(--kq-soft); cursor: pointer; font: inherit; color: inherit; transition: border-color .15s, transform .1s; }
.kfv-quiz .kq-mode:hover { border-color: var(--kq-brand2); }
.kfv-quiz .kq-mode:active { transform: scale(.99); }
.kfv-quiz .kq-mode b { display: block; font-size: 1.02rem; }
.kfv-quiz .kq-mode span { color: var(--kq-muted); font-size: .88rem; }
.kfv-quiz .kq-ico { flex: 0 0 44px; height: 44px; border-radius: 10px; background: #fff; border: 1px solid var(--kq-line); display: grid; place-items: center; color: var(--kq-brand); font-weight: 700; font-size: 1.1rem; }
.kfv-quiz .kq-top { display: flex; justify-content: space-between; align-items: center; font-size: .85rem; color: var(--kq-muted); margin-bottom: 8px; }
.kfv-quiz .kq-bar { height: 6px; background: var(--kq-soft); border-radius: 4px; overflow: hidden; margin-bottom: 16px; }
.kfv-quiz .kq-bar i { display: block; height: 100%; background: var(--kq-accent); transition: width .3s; }
/* Fester quadratischer Rahmen statt variabler Hoehe je Foto (Rolf-Feedback 2026-09-29: "wie bei
   den Thumbnails in ACDSee" - das Bild muss in ein festes Rechteck passen, stoesst je nach
   Format links/rechts (Querformat) oder oben/unten (Hochformat) an, der Rest wird mit dem
   Hintergrund-Farbverlauf aufgefuellt). Quadratisch gewaehlt, weil die Fotos etwa zur Haelfte
   Quer- und zur Haelfte Hochformat sind - ein 4:3-Rahmen haette Hochformat-Fotos wieder auf
   ca. 56% Breite gestaucht, quadratisch begrenzt beide Formate gleichermassen auf ca. 75%. */
.kfv-quiz .kq-pic { position: relative; aspect-ratio: 1 / 1; background: linear-gradient(#e3f0f2, #cfe3e6); border-radius: 12px; margin-bottom: 6px; padding: 6px; text-align: center; }
.kfv-quiz .kq-pic img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 8px; cursor: zoom-in; }
.kfv-quiz .kq-zoom-hinweis { position: absolute; right: 14px; bottom: 14px; background: rgba(0, 0, 0, .55); color: #fff; font-size: .72rem; padding: 4px 10px; border-radius: 999px; pointer-events: none; }

/* Lightbox: ausserhalb von .kfv-quiz im Markup (an document.body angehaengt), daher als
   eigenstaendiger Block ohne .kfv-quiz-Praefix, aber mit demselben kq-Namensraum. */
.kq-lightbox { position: fixed; inset: 0; background: rgba(15, 23, 42, .92); display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 9999; cursor: zoom-out; }
.kq-lightbox[hidden] { display: none; }
.kq-lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; }
.kq-lightbox-close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(255, 255, 255, .15); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.kfv-quiz .kq-namensnennung { font-size: .72rem; color: var(--kq-muted); margin: 0 0 14px; text-align: right; }
.kfv-quiz .kq-namensnennung a { color: inherit; }
.kfv-quiz .kq-maxlaenge { display: inline-block; margin: -8px 0 14px; padding: 3px 10px; border-radius: 999px; background: var(--kq-soft); color: var(--kq-brand); font-size: .82rem; font-weight: 600; }
.kfv-quiz .kq-q { font-size: 1.1rem; font-weight: 600; margin: 0 0 14px; }
.kfv-quiz .kq-ans { display: grid; gap: 8px; }
.kfv-quiz .kq-a { width: 100%; text-align: left; padding: 12px 14px; border: 1.5px solid var(--kq-line); border-radius: 10px; background: #fff; font: inherit; color: inherit; cursor: pointer; transition: border-color .15s, background .15s; }
.kfv-quiz .kq-a:hover:not(:disabled) { border-color: var(--kq-brand2); background: var(--kq-soft); }
.kfv-quiz .kq-a:disabled { cursor: default; }
.kfv-quiz .kq-a.ok { border-color: var(--kq-ok); background: var(--kq-okbg); font-weight: 600; }
.kfv-quiz .kq-a.bad { border-color: var(--kq-bad); background: var(--kq-badbg); }
.kfv-quiz .kq-a.dim { opacity: .55; }
.kfv-quiz .kq-info { margin-top: 14px; padding: 12px 14px; border-radius: 10px; font-size: .94rem; border-left: 4px solid; }
.kfv-quiz .kq-info.ok { background: var(--kq-okbg); border-color: var(--kq-ok); }
.kfv-quiz .kq-info.bad { background: var(--kq-badbg); border-color: var(--kq-bad); }
.kfv-quiz .kq-info strong { display: block; margin-bottom: 2px; }
.kfv-quiz .kq-btn { display: inline-block; margin-top: 14px; padding: 11px 20px; border: 0; border-radius: 10px; background: var(--kq-brand); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.kfv-quiz .kq-btn:hover { background: var(--kq-brand2); }
.kfv-quiz .kq-btn + .kq-btn { margin-left: 8px; }
.kfv-quiz .kq-btn.sec { background: #fff; color: var(--kq-brand); border: 1.5px solid var(--kq-brand); }
.kfv-quiz .kq-score { text-align: center; padding: 8px 0 4px; }
.kfv-quiz .kq-score .big { font-size: 3rem; font-weight: 800; color: var(--kq-brand); line-height: 1; }
.kfv-quiz .kq-score p { margin: 8px 0 0; }
.kfv-quiz .kq-review { margin-top: 18px; border-top: 1px solid var(--kq-line); padding-top: 12px; font-size: .9rem; }
.kfv-quiz .kq-review h3 { font-size: 1rem; margin: 0 0 8px; }
.kfv-quiz .kq-review li { margin-bottom: 6px; }
.kfv-quiz .kq-foot { font-size: .78rem; color: var(--kq-muted); margin-top: 16px; }
.kfv-quiz .kq-lernstand-links { text-align: center; font-size: .85rem; margin: 14px 0 0; }
.kfv-quiz .kq-link { background: none; border: none; padding: 0; color: var(--kq-brand); text-decoration: underline; cursor: pointer; font: inherit; }
.kfv-quiz .kq-link:hover { color: var(--kq-brand2); }

/* "Darf der mit?" (Fragetyp entnahme, plan/darf-der-mit.md Abschnitt 10). Das Gewaesser-Badge
   sitzt in der Fallkarte (siehe .kq-fall) und braucht dort einen eigenen, kraeftigeren Hintergrund
   als die Karte selbst - sonst verschwimmt es mit deren hellem Grau (Rolf-Feedback 2026-10-03:
   "fällt dort nicht auf"). */
.kfv-quiz .kq-kontext-badge { display: inline-block; margin: 0 0 8px; padding: 4px 12px; border-radius: 999px; background: var(--kq-brand); color: #fff; font-size: .85rem; font-weight: 600; }
.kfv-quiz .kq-fall { margin: 10px 0 16px; padding: 12px 14px; border: 1px solid var(--kq-line); border-radius: 10px; background: var(--kq-soft); }
.kfv-quiz .kq-fall-art { margin: 0 0 4px; font-size: 1.1rem; font-weight: 700; }
.kfv-quiz .kq-fall-zeile { margin: 2px 0; font-size: .95rem; }
.kfv-quiz .kq-haftung { margin-bottom: 14px; padding: 10px 14px; border: 1px solid var(--kq-line); border-left: 4px solid var(--kq-accent); border-radius: 8px; background: var(--kq-soft); font-size: .82rem; color: var(--kq-muted); }
.kfv-quiz .kq-haftung p { margin: 2px 0; }

.kfv-quiz.kfv-quiz-bildnachweis { max-width: 100%; }
.kfv-quiz.kfv-quiz-bildnachweis h3 { margin: 1.2em 0 .4em; }
.kfv-quiz.kfv-quiz-bildnachweis ul { padding-left: 1.2em; }
.kfv-quiz.kfv-quiz-bildnachweis a { color: var(--kq-brand); }

@media (max-width: 480px) {
    .kfv-quiz .kq-body { padding: 14px; }
    .kfv-quiz .kq-head { padding: 14px; }
    .kfv-quiz .kq-btn.sec { margin-left: 0; }
}