/* /assets/css/components.css */

/* Grundlayout */
html,body{height:100%}
body{margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";}
.wrap{max-width:1100px;margin:24px auto 64px;padding:0 16px}
h1{font-size:clamp(22px,3vw,32px);letter-spacing:.3px;margin:8px 0 12px}
.sub{color:var(--muted);margin-bottom:24px}
.mini{color:var(--muted)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* Grids */
.grid{display:grid;gap:18px}
.grid.autofit-180{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}

/* Buttons & Chips */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 14px;border-radius:12px;border:1px solid var(--border);
  background:rgba(255,255,255,.03);color:var(--text);cursor:pointer;transition:.2s
}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#041312;border:0;font-weight:800;box-shadow:var(--shadow)}
.btn.ghost{background:transparent}
.chip{border:1px solid color-mix(in oklab, var(--accent) 35%, transparent);background:rgba(255,255,255,.03);border-radius:999px;padding:4px 8px;font-size:.9rem;color:var(--text)}

/* Karten-Buttons (Index) */
.card-btn{
  position:relative;background:var(--card);border:1px solid var(--border);
  border-radius:16px;padding:10px;cursor:pointer;transition:transform .12s,box-shadow .2s,border-color .2s;
  box-shadow:0 8px 24px rgba(0,0,0,.25);overflow:hidden;isolation:isolate
}
.card-btn:hover{transform:translateY(-2px);border-color:color-mix(in oklab, var(--accent) 35%, transparent);box-shadow:0 12px 28px rgba(0,0,0,.35)}
.card-btn img{width:100%;height:160px;object-fit:contain;display:block;filter:drop-shadow(0 2px 8px rgba(0,0,0,.35));pointer-events:none}
.btn-title{position:absolute;left:14px;right:14px;bottom:12px;font-size:14px;color:var(--text);text-shadow:0 0 8px color-mix(in oklab, var(--accent) 50%, transparent);opacity:.9}

/* Pulse-Ring (wiederverwendbar) */
.pulse::after{
  content:"";position:absolute;inset:-2px;border-radius:18px;border:2px solid transparent;pointer-events:none;opacity:0
}
.is-active::after{animation:pulse 900ms ease-out}
@keyframes pulse{
  0%{opacity:.9;border-color:var(--accent);filter:drop-shadow(0 0 0 var(--accent))}
  50%{opacity:.6;border-color:var(--accent2);filter:drop-shadow(0 0 12px var(--accent2))}
  100%{opacity:0;border-color:transparent;filter:none}
}

/* Overlay/Modal (Index & Training) */
.overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.45);backdrop-filter:blur(6px);z-index:40}
.overlay.is-open{display:flex}
.quote{max-width:min(640px,92vw);background:linear-gradient(180deg,rgba(20,26,36,.9),rgba(12,16,24,.9));border:1px solid var(--border);border-radius:18px;padding:22px;box-shadow:0 30px 60px rgba(0,0,0,.45);position:relative}
.quote h3{margin:0 0 6px;font-size:16px;letter-spacing:.4px;color:var(--accent);text-shadow:0 0 10px color-mix(in oklab, var(--accent) 45%, transparent)}
.quote p{margin:6px 0 0;font-size:18px;line-height:1.45}
.close{position:absolute;top:10px;right:12px;border:0;background:transparent;color:var(--muted);font-size:22px;cursor:pointer}
.hint,.footer{color:var(--muted);font-size:12px;text-align:right}.footer{text-align:center;margin-top:28px;opacity:.75}

/* Topic-Karten (Solo) */
.topics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.topic-card{border:1px solid var(--border);border-radius:12px;background:var(--card);padding:12px;display:flex;gap:12px;align-items:center;cursor:pointer;transition:transform .15s,border-color .15s,background .15s}
.topic-card:hover{transform:translateY(-2px)}
.topic-card.active{border-color:var(--aqua);background:rgba(0,228,211,.08)}
.topic-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);font-size:22px;background:rgba(255,255,255,.04)}
.topic-meta{display:flex;flex-direction:column}
.topic-meta small{color:var(--muted)}

/* Choice-Stati (Solo & Training) */
.choice-correct{border-color:var(--aqua)!important;box-shadow:0 0 0 3px rgba(0,228,211,.15) inset, 0 0 14px rgba(0,228,211,.30)}
.choice-wrong{border-color:#a33!important;box-shadow:0 0 0 3px rgba(170,51,51,.20) inset}