/* Lernhelden – Kopfbereich mit Klassenfrage, Profil, Timer und die Reiter. */
/* ---------- 3. Kopfbereich ---------- */
.topbar{position:sticky;top:0;z-index:15;margin:0 -20px;padding:10px 20px;font-size:clamp(15px,1rem,17px);
  background:var(--bg);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.topbar-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:8px;font-weight:900;font-size:1.15em;color:var(--ink);text-decoration:none;margin-right:4px}
.brand-mascot{font-size:1.6em;line-height:1}
.chip-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 14px;border-radius:999px;
  border:2px solid var(--line);background:var(--panel);font-weight:800;cursor:pointer}
@media (hover:hover){.chip-btn:hover{border-color:var(--brand-ink)}}
.chip-btn[aria-expanded="true"]{border-color:var(--brand-ink);background:var(--soft)}
.profile-current-emoji{font-size:1.3em;line-height:1}
.popover-wrap{position:relative}
.popover{position:absolute;top:calc(100% + 8px);left:0;z-index:30;min-width:260px;padding:14px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow);display:grid;gap:10px}
.popover-right{left:auto;right:0}
.popover-title{margin:0;font-weight:900}
.popover-sep{height:1px;background:var(--line);margin:2px 0}
.profile-option{justify-content:flex-start;width:100%}
.profile-option[aria-current="true"]{background:var(--soft);border-color:var(--brand-ink)}
.profile-option .profile-grade{margin-left:auto}
.profile-grade{display:inline-block;padding:1px 8px;border-radius:999px;background:var(--soft);color:var(--chip-ink);font-size:.75rem;font-weight:900}
.profile-edit{display:grid;gap:8px}
.profile-edit input{min-height:44px;border:2px solid var(--line);border-radius:12px;padding:8px 12px;background:var(--surface)}
.emoji-choices{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.emoji-choice{min-height:44px;font-size:1.4rem;border-radius:12px;border:2px solid var(--line);background:var(--surface);cursor:pointer}
.emoji-choice[aria-pressed="true"]{border-color:var(--brand-ink);background:var(--soft)}

/* Die Klassenfrage steht IMMER im Kopf, auch nach der Wahl */
.grade-question{display:flex;align-items:center;gap:10px;margin-left:auto;padding:4px 6px 4px 14px;border-radius:999px;
  background:var(--panel);border:2px solid var(--line)}
.grade-question-label{font-weight:900;white-space:nowrap}
.grade-picker{display:flex;gap:6px}
.grade-pick{width:var(--tap);height:var(--tap);min-width:44px;min-height:44px;border-radius:50%;
  border:2px solid var(--line);background:var(--surface);font-weight:900;font-size:1.15rem;cursor:pointer;
  transition:transform .12s,background .15s,border-color .15s}
@media (hover:hover){.grade-pick:hover{border-color:var(--brand-ink);transform:translateY(-1px)}}
.grade-pick[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.grade-question .grade-pick{width:44px;height:44px;font-size:1.05em}
/* Noch keine Klasse gewählt: ein Ring pulsiert sechsmal (nur Deckkraft, keine Dauerschleife), der dunkle Rand bleibt */
.no-grade .grade-question{border-color:var(--brand-ink);position:relative}
.no-grade .grade-question::after{content:"";position:absolute;inset:-9px;border:7px solid var(--soft);border-radius:inherit;pointer-events:none;opacity:0;animation:gradePulse 1.6s ease-in-out 6}
@keyframes gradePulse{0%,100%{opacity:0}50%{opacity:1}}
.topbar-tools{display:flex;align-items:center;gap:8px}
.icon-btn{min-width:44px;min-height:44px;border-radius:999px;border:2px solid var(--line);background:var(--panel);
  font-size:1.15em;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0 10px}
@media (hover:hover){.icon-btn:hover{border-color:var(--brand-ink)}}
.icon-btn[aria-pressed="false"]{opacity:.6}
.timer-chip{font-variant-numeric:tabular-nums}
.timer-chip.running{border-color:var(--brand-ink);background:var(--soft)}
.timer-field{display:flex;align-items:center;gap:10px;font-weight:800}
.timer-field input{width:84px;min-height:44px;border:2px solid var(--line);border-radius:12px;padding:6px;text-align:center;background:var(--surface)}

/* ---------- 4. Navigation ---------- */
.tabs{display:flex;flex-wrap:wrap;gap:8px;padding:14px 0 6px}
.tabs::-webkit-scrollbar{display:none}
.tab{display:flex;align-items:center;gap:8px;min-height:var(--tap);padding:8px 16px;border-radius:999px;cursor:pointer;
  border:2px solid var(--line);background:var(--panel);color:var(--ink);font-weight:800;white-space:nowrap}
@media (hover:hover){.tab:hover{border-color:var(--brand-ink)}}
.tab-icon{font-size:1.25rem;line-height:1}
.tab-short{display:none}
.tab.active{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.view{display:none;padding-top:10px}
.view.active{display:block}