/* Gemeinsame Styles für die Schulspace-Selbstlernkurse (/kurse/...).
   Kursspezifische Ergänzungen stehen im jeweiligen Kurs-Template. */

body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; }

/* ── Animationen ─────────────────────────────────────────────── */
@keyframes blobFloat  { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(28px,-18px) scale(1.05)} }
@keyframes blobFloat2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-18px,14px) scale(0.95)} }
@keyframes fadeIn     { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
@keyframes slideUp    { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes uploadBob  { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
@keyframes typingDot  { 0%,80%,100%{transform:scale(0);opacity:.3} 40%{transform:scale(1);opacity:1} }
@keyframes chatPop    { from{opacity:0;transform:translateY(10px) scale(.97)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes arrowBounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(16px)} }
@keyframes confusedBob { 0%,100%{transform:rotate(-8deg) scale(1)} 25%{transform:rotate(12deg) scale(1.12)} 75%{transform:rotate(-12deg) scale(0.95)} }
@keyframes heroFadeIn { from{opacity:0;transform:translateY(32px)} to{opacity:1;transform:translateY(0)} }

/* ── Intro-Deko ──────────────────────────────────────────────── */
.blob1,.blob2 { position:absolute;border-radius:50%;filter:blur(72px);pointer-events:none; }
.blob1 { width:420px;height:420px;background:#006C84;opacity:.18;top:-120px;left:-100px;animation:blobFloat 9s ease-in-out infinite; }
.blob2 { width:340px;height:340px;background:#6366f1;opacity:.13;bottom:-80px;right:-70px;animation:blobFloat2 11s ease-in-out infinite; }
.arrow-cta { animation:arrowBounce 1.3s ease-in-out infinite; }
.arrow-cta:hover { animation:none; transform:scale(1.12) translateY(4px); }
#hero-reveal { animation:heroFadeIn .55s ease-out; }

/* ── Kurs-Shell ──────────────────────────────────────────────── */
.screen { display:none; }
.screen.active { display:block; animation:fadeIn .35s ease-out; }
#progress-fill { transition:width .5s ease; }
.sdot { width:1.4rem;height:1.4rem;border-radius:50%;border:2px solid #d1d5db;display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:700;color:#9ca3af;flex-shrink:0;transition:all .3s; }
.sdot.done   { background:#16a34a;border-color:#16a34a;color:#fff; }
.sdot.active { background:#006C84;border-color:#006C84;color:#fff; }
.nav-btn.active { background:#F8FAFC!important;color:#006C84!important;font-weight:600; }
.section-tag { display:inline-flex;align-items:center;gap:.5rem;padding:.4rem 1rem;border-radius:9999px;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em; }
@media(max-width:767px){ #sidebar{display:none!important} }

/* ── Code-Darstellung ────────────────────────────────────────── */
.code-blk { background:#1e293b;border-radius:.75rem;padding:1rem 1.2rem;font-family:'Courier New',monospace;font-size:.78rem;line-height:1.7;color:#e2e8f0;overflow-x:auto; }
.code-tag { color:#6EB0BC; } .code-cmt { color:#64748b; } .code-val { color:#a3e635; }

/* ── Chat-Simulation ─────────────────────────────────────────── */
.chat-wrap { background:#f1f5f9;border-radius:1.25rem;padding:1rem; }
.chat-bubble { animation:chatPop .3s ease-out; }
.chat-user { display:flex;justify-content:flex-end;margin-bottom:.75rem; }
.chat-user .bubble { background:#006C84;color:#fff;border-radius:1.1rem 1.1rem 0 1.1rem;padding:.75rem 1rem;max-width:75%;font-size:.875rem;line-height:1.5; }
.chat-ai   { display:flex;justify-content:flex-start;margin-bottom:.75rem;gap:.5rem;align-items:flex-end; }
.chat-ai .avatar { width:2rem;height:2rem;border-radius:.6rem;background:#1e293b;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.85rem; }
.chat-ai .bubble { background:#1e293b;color:#e2e8f0;border-radius:1.1rem 1.1rem 1.1rem 0;padding:.75rem 1rem;max-width:80%;font-size:.8rem;line-height:1.6; }
.chat-ai .bubble.code-bubble { font-family:'Courier New',monospace;font-size:.75rem; }
.typing-indicator { display:flex;align-items:center;gap:.3rem;padding:.6rem .9rem; }
.typing-dot { width:.5rem;height:.5rem;border-radius:50%;background:#94a3b8;animation:typingDot 1.2s infinite; }
.typing-dot:nth-child(2) { animation-delay:.2s; }
.typing-dot:nth-child(3) { animation-delay:.4s; }

/* ── Prozess-Akkordeon (klickbare Schritt-Karten) ────────────── */
.proc-btn { transition:all .2s; }
.proc-btn.active { border-color:#006C84!important;background:#F8FAFC!important;box-shadow:0 4px 20px rgba(0,108,132,.15); }
.proc-btn.active .proc-chevron { transform:rotate(180deg); }
.proc-chevron { transition:transform .25s; }
.proc-panel { display:none; animation:slideUp .3s ease-out; }

/* ── Auswahl-Karten (Mehrfachauswahl-Quiz) ───────────────────── */
.q1-vibe-card.q1-selected { border-color:#006C84!important;background:#F8FAFC!important;box-shadow:0 0 0 2px #006C84; }
.q1-vibe-card:focus-visible { outline:3px solid #006C84;outline-offset:2px; }
.sc-card:focus-visible, .pq-card:focus-visible { outline:3px solid #006C84;outline-offset:2px; }

/* ── Sonstiges ───────────────────────────────────────────────── */
.upload-bob { animation:uploadBob 1.6s ease-in-out infinite; }
.qr { display:grid;grid-template-columns:repeat(7,1fr);gap:2px;width:68px;flex-shrink:0; }
.q1 { background:#004e60;width:9px;height:9px;border-radius:1px; } .q0 { width:9px;height:9px; }