/* style.css — Hub + Dashboard (ergänzt core/base.css, nutzt dieselben Tokens). */

/* ============ HUB ============ */
/* ---- Hero ---- */
.hub-hero{ position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(135deg,#1b3050 0%,#2f5fb0 58%,#3f7fb8 100%); }
.hub-hero::after{ content:""; position:absolute; inset:0;
  background:radial-gradient(900px 360px at 85% -15%, rgba(255,255,255,.20), transparent 60%); pointer-events:none; }
.hub-hero__inner{ position:relative; z-index:1; max-width:1100px; margin:0 auto;
  padding:clamp(1.2rem,3.5vw,2.4rem) clamp(1rem,3vw,1.6rem) clamp(1.6rem,4vw,2.6rem); }
.hub-hero__nav{ display:flex; justify-content:flex-end; }
.hub-hero__teacher{ display:inline-flex; align-items:center; gap:.4rem; color:#fff; text-decoration:none; font-weight:700;
  background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.30); padding:.45rem .9rem; border-radius:var(--radius-pill); }
.hub-hero__teacher:hover{ background:rgba(255,255,255,.27); }
.hub-hero__kicker{ margin:.7rem 0 .2rem; text-transform:uppercase; letter-spacing:.14em; font-size:.74rem; font-weight:800; color:rgba(255,255,255,.78); }
.hub-hero__title{ margin:0; font-size:clamp(1.9rem,5.5vw,3.1rem); line-height:1.08; color:#fff; }
.hub-hero__sub{ margin:.6rem 0 0; max-width:660px; font-size:clamp(1rem,2.2vw,1.18rem); color:rgba(255,255,255,.92); }
.hub-hero__stats{ margin:1rem 0 0; font-size:.9rem; color:rgba(255,255,255,.82); }
.hub-hero__stats b{ color:#fff; }

/* Hub-Hero-Collage */
/* Bild-Stapel rechts im Hero, nur ab Tablet-Breite (auf Mobil bleibt der Hero schlank). */
.hub-hero__visual{ display:none; }
@media (min-width:900px){
  .hub-hero__inner{ padding-right:clamp(13rem,26vw,17rem); }
  .hub-hero__visual{ display:block; position:absolute; top:50%; right:clamp(-1rem,1vw,1rem);
    transform:translateY(-50%); width:clamp(11rem,20vw,15rem); height:210px; z-index:0; }
  .hub-visual-card{ position:absolute; border-radius:18px; border:3px solid #fff;
    box-shadow:0 18px 36px rgba(8,18,40,.38); overflow:hidden;
    width:clamp(9.5rem,17vw,13rem); height:150px;
    transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
  .hub-visual-card img{ width:100%; height:100%; object-fit:cover; display:block; }
  .hub-visual-card--main{ right:0; top:6px; transform:rotate(3deg); z-index:3; }
  .hub-visual-card--science{ right:clamp(3.2rem,6vw,4.4rem); top:38px; transform:rotate(-4deg); z-index:2; }
  .hub-visual-card--space{ right:clamp(1.2rem,2.4vw,1.8rem); top:78px; transform:rotate(2deg); z-index:1; }
  .hub-hero__visual:hover .hub-visual-card--main{ transform:rotate(3deg) translateY(-4px); box-shadow:0 22px 42px rgba(8,18,40,.44); }
  .hub-hero__visual:hover .hub-visual-card--science{ transform:rotate(-4deg) translateY(-4px); box-shadow:0 22px 42px rgba(8,18,40,.44); }
  .hub-hero__visual:hover .hub-visual-card--space{ transform:rotate(2deg) translateY(-4px); box-shadow:0 22px 42px rgba(8,18,40,.44); }
}
@media (prefers-reduced-motion:reduce){
  .hub-visual-card{ transition:none; }
}

/* ---- Hero-Einstieg: Sofort-Weg ist die dominante Primäraktion, Code optional/sekundär (QA-022) ---- */
.hub-cta{ display:flex; align-items:center; gap:.7rem .9rem; flex-wrap:wrap; margin:1.15rem 0 .2rem; }
.hub-cta__primary{ display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; font-weight:800;
  font-size:1.05rem; color:var(--navy); background:#fff; border-radius:var(--radius-pill);
  padding:.7rem 1.4rem; box-shadow:0 8px 22px rgba(8,18,40,.28);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.hub-cta__primary:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(8,18,40,.34); }
.hub-cta__secondary{ display:inline-flex; align-items:center; gap:.35rem; color:rgba(255,255,255,.92);
  background:transparent; border:1px solid rgba(255,255,255,.45); border-radius:var(--radius-pill);
  padding:.55rem 1rem; font-weight:700; font-size:.92rem; cursor:pointer; text-decoration:none; }
.hub-cta__secondary:hover{ background:rgba(255,255,255,.14); }
.hub-cta__note{ flex-basis:100%; margin:.1rem 0 0; font-size:.82rem; color:rgba(255,255,255,.78); }
.hub-cta__note b{ color:#fff; }

/* ---- Section-Überschriften ---- */
.hub-section-title{ display:flex; align-items:center; gap:.65rem; color:var(--navy);
  font-size:clamp(1.15rem,3vw,1.5rem); margin:0 0 1rem; }
.hub-section-title__line{ flex:none; width:6px; height:1.35em; border-radius:99px;
  background:linear-gradient(var(--accent),var(--accent2)); }

/* ---- „Weitermachen": angefangene Lektionen mit Fortschritt (oben im Hub) ---- */
.hub-continue{ margin-top:clamp(.6rem,2vw,1.2rem); }
.hub-continue__row{ display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:.85rem; }
.hub-cont{ position:relative; display:flex; flex-direction:column; gap:.6rem; padding:1rem 1.1rem;
  text-decoration:none; color:inherit; border:1px solid var(--line); border-left:5px solid var(--fc,var(--accent));
  border-radius:var(--radius-card); background:var(--panel); box-shadow:var(--shadow);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.hub-cont:hover{ transform:translateY(-4px); box-shadow:0 14px 30px color-mix(in srgb,var(--fc,var(--accent)) 26%,transparent); }
.hub-cont__top{ display:flex; align-items:center; gap:.6rem; min-width:0; }
.hub-cont__icon{ font-size:1.7rem; flex:0 0 auto; }
.hub-cont__meta{ min-width:0; }
.hub-cont__title{ font-weight:800; color:var(--navy); font-size:1.02rem; line-height:1.2;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hub-cont__fach{ color:var(--muted); font-size:.78rem; font-weight:700; }
.hub-cont__bar{ position:relative; height:9px; border-radius:99px; background:var(--soft);
  border:1px solid var(--line); overflow:hidden; }
.hub-cont__fill{ position:absolute; inset:0 auto 0 0; border-radius:99px;
  background:linear-gradient(90deg, var(--fc,var(--accent)), color-mix(in srgb,var(--fc,var(--accent)) 60%,#fff)); }
.hub-cont__bar.is-unknown .hub-cont__fill{ opacity:.25; background:var(--fc,var(--accent)); }
.hub-cont__stats{ display:flex; justify-content:space-between; gap:.5rem; flex-wrap:wrap;
  font-size:.8rem; color:var(--ink); }
.hub-cont__stats b{ color:var(--fc,var(--navy)); }
.hub-cont__xp{ color:var(--muted); font-weight:700; }
.hub-cont__go{ font-weight:800; color:var(--ink); font-size:.86rem; }
.hub-cont__go span{ color:var(--fc,var(--accent)); }

.hub-band{ margin-top:clamp(1.4rem,4vw,2.2rem); }

/* ---- Bereiche (Arcade/Quiz/Werkzeuge/Kooperation) ---- */
.hub-areas{ display:grid; grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); gap:1rem; }
.hub-area{ position:relative; display:flex; flex-direction:column; gap:.35rem; padding:1.2rem 1.3rem; overflow:hidden;
  text-decoration:none; color:inherit; border:1px solid var(--line); border-radius:var(--radius-card);
  background:var(--panel); box-shadow:var(--shadow);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); min-height:152px; }
.hub-area::before{ content:""; position:absolute; inset:0 0 auto 0; height:5px; background:var(--a,var(--accent)); }
.hub-area::after{ content:""; position:absolute; right:-34px; top:-34px; width:120px; height:120px; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb,var(--a,var(--accent)) 22%,transparent), transparent 70%); }
.hub-area:hover{ transform:translateY(-5px); box-shadow:0 16px 36px color-mix(in srgb,var(--a,var(--accent)) 30%,transparent); }
.hub-area__icon{ font-size:2.3rem; }
.hub-area__title{ font-weight:900; color:var(--navy); font-size:1.22rem; }
.hub-area__desc{ color:var(--muted); font-size:.9rem; flex:1; }
/* "Loslegen →": Label auf dunkles Ink-Token (WCAG 1.4.3 AA ≥4,5:1 gg. weißem Panel);
   die Bereichs-Akzentfarbe bleibt nur am Pfeil (dekorativ). */
.hub-area__go{ font-weight:800; color:var(--ink); font-size:.9rem; }
.hub-area__go .hub-area__arrow{ color:var(--a,var(--accent)); }

/* ---- Katalog: Suche + Fach-Leiste ---- */
.hub-catalog{ margin-top:clamp(1.8rem,5vw,2.8rem); }
.hub-catalog__head{ display:flex; align-items:center; justify-content:space-between; gap:1rem 1.4rem; flex-wrap:wrap; }
.hub-catalog__head .hub-section-title{ margin-bottom:0; }
.hub-search{ flex:1; min-width:220px; max-width:420px; }
.searchbar{ width:100%; }
.hub-fachbar{ display:flex; gap:.5rem; flex-wrap:wrap; margin:1.1rem 0 1rem; }
.fachpill{ display:inline-flex; align-items:center; gap:.45rem; background:var(--panel); border:1.5px solid var(--line);
  border-radius:var(--radius-pill); padding:.4rem .9rem; cursor:pointer; font-weight:700; color:var(--ink); }
.fachpill:hover{ border-color:var(--fc); }
.fachpill.is-on{ background:var(--fc); color:#fff; border-color:transparent; }
.fachpill__ico{ font-size:1.05em; }
.fachpill__n{ font-size:.72rem; font-weight:800; border-radius:99px; padding:.05rem .45rem;
  background:color-mix(in srgb,var(--fc) 16%,var(--soft)); color:var(--fc); }
.fachpill.is-on .fachpill__n{ background:rgba(255,255,255,.28); color:#fff; }

/* ---- Weitere Filter: Stufen-Bereich (Doppelschieber) + „In Arbeit" ---- */
.hub-morefilters{ display:flex; align-items:center; gap:1rem 2.2rem; flex-wrap:wrap; margin:0 0 1.7rem; }
.hub-stufe{ display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
.hub-stufe__lbl{ font-weight:800; color:var(--navy); }
.hub-stufe__out{ font-weight:700; color:var(--accent); min-width:8em; }
.hub-rangeslider{ position:relative; width:min(260px,58vw); height:44px; }
.hub-rangeslider__track{ position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); height:6px; border-radius:99px; background:var(--line); }
.hub-rangeslider__fill{ position:absolute; top:50%; transform:translateY(-50%); height:6px; border-radius:99px; background:linear-gradient(90deg,var(--accent),var(--accent2)); }
.hub-rangeslider__in{ position:absolute; left:0; top:50%; transform:translateY(-50%); width:100%; height:6px; margin:0; background:none; pointer-events:none; -webkit-appearance:none; appearance:none; }
.hub-rangeslider__in::-webkit-slider-runnable-track{ background:none; border:none; }
.hub-rangeslider__in::-moz-range-track{ background:none; border:none; }
.hub-rangeslider__in::-webkit-slider-thumb{ -webkit-appearance:none; pointer-events:auto; width:22px; height:22px; border-radius:50%;
  background:var(--accent); border:3px solid var(--paper); box-shadow:0 1px 5px rgba(0,0,0,.3); cursor:pointer; }
.hub-rangeslider__in::-moz-range-thumb{ pointer-events:auto; width:22px; height:22px; border-radius:50%;
  background:var(--accent); border:3px solid var(--paper); box-shadow:0 1px 5px rgba(0,0,0,.3); cursor:pointer; }
.hub-rangeslider__in:focus-visible::-webkit-slider-thumb{ outline:3px solid var(--focus); outline-offset:2px; }
.hub-rangeslider__in:focus-visible::-moz-range-thumb{ outline:3px solid var(--focus); }
.hub-wip{ display:inline-flex; align-items:center; gap:.5rem; cursor:pointer; font-weight:700; color:var(--ink); user-select:none; }
.hub-wip input{ width:18px; height:18px; accent-color:var(--accent); cursor:pointer; flex:0 0 auto; }

/* Kuratierte Session (Schüler:in mit eingeschränkter config.lessons/games, s.
   app-hub.js applyChrome/curatedSession): die Filterleiste ist überflüssig, weil
   ohnehin nur die freigeschalteten Module sichtbar sind (Feedback: „brauche ich
   nicht, da ich ohnehin nur meine freigeschalteten Lektionen sehe"). Der Katalog
   selbst (Karten/Gruppen) bleibt unangetastet sichtbar. */
body.hub--curated .hub-search,
body.hub--curated .hub-fachbar,
body.hub--curated .hub-morefilters{ display:none; }

/* Eingeloggte Schüler:innen: schlanke Ansicht — kein Marketing-Hero, keine
   „Spielen, Quizzen & Zusammenarbeiten"-Sektion, kein Lehrkräfte-Link. Es bleibt
   Header + Lektionen (plus die dynamischen Weitermachen-/Lernweg-Karten). Die
   Bereiche Arcade/Quiz/Werkzeuge/Kooperation sind ins Kompass-Dropdown gewandert.
   Gäste ohne Login sehen die volle Startseite unverändert. */
body.hub--student .hub-hero,
body.hub--student .hub-band,
body.hub--student .hub-teacherlink{ display:none; }

/* ---- Gruppen nach Fach ---- */
.hub-group{ margin:0 0 2rem; }
.hub-group__title{ display:flex; align-items:center; gap:.55rem; color:var(--navy); font-size:1.15rem; margin:0 0 .9rem;
  padding-bottom:.5rem; border-bottom:2px solid color-mix(in srgb,var(--fc) 45%,var(--line)); }
.hub-group__icon{ font-size:1.3rem; }
.hub-group__count{ margin-left:.15rem; font-size:.76rem; font-weight:800; color:var(--fc);
  background:color-mix(in srgb,var(--fc) 14%,transparent); border-radius:99px; padding:.1rem .55rem; }

/* ---- Modul-Karten ---- */
.hub-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1rem; }
.mod-card{ position:relative; display:flex; flex-direction:column; gap:.32rem; padding:1.1rem 1.15rem 1.15rem; overflow:hidden;
  background:var(--panel); border:1px solid var(--line); border-left:5px solid var(--fc,var(--accent));
  border-radius:var(--radius-card); box-shadow:var(--shadow); text-decoration:none; color:inherit;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.mod-card:hover{ transform:translateY(-4px); box-shadow:0 14px 30px color-mix(in srgb,var(--fc,var(--accent)) 26%,transparent); }
.mod-card__icon{ width:52px; height:52px; display:grid; place-items:center; font-size:1.7rem; border-radius:14px;
  background:color-mix(in srgb,var(--fc,var(--accent)) 14%,var(--soft)); margin-bottom:.25rem; }
.mod-card__title{ font-weight:800; color:var(--navy); font-size:1.08rem; line-height:1.25; }
.mod-card__desc{ color:var(--muted); font-size:.9rem; flex:1; }
.mod-card__tags{ display:flex; gap:.3rem; flex-wrap:wrap; margin-top:.5rem; }
.tag{ font-size:.7rem; font-weight:700; padding:.16rem .55rem; border-radius:var(--radius-pill); }
.tag--fach{ background:color-mix(in srgb,var(--fc,var(--accent)) 15%,transparent); color:var(--fc,var(--navy)); }
.tag--stufe{ background:var(--soft); color:var(--muted); }
.tag--wip{ background:#fff3cd; color:#7a5d00; border:1px solid #f0d98c; font-weight:800; }
/* WIP-Lektion: anklickbar (kein Sperren) – nur leichte Abhebung als Warnung; der 🚧-Badge ist der Hinweis. */
.mod-card--wip{ opacity:.94; }
.mod-card--wip:hover{ opacity:1; }

/* ---- Karten / Formfelder (Dashboard) ---- */
.card,.teach-card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-card); box-shadow:var(--shadow); padding:1.2rem 1.3rem; margin:0 auto 1.1rem; max-width:520px; }
.muted{ color:var(--muted); }
.err{ color:var(--bad); font-weight:700; min-height:1.2em; }
.ok{ color:var(--ok); font-weight:700; }
label{ display:block; font-weight:700; color:var(--navy); margin:.7rem 0 .2rem; }
label.chk{ font-weight:400; display:flex; align-items:center; gap:.4rem; }
.row{ display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }

/* ---- Dashboard ---- */
.dash-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; }
.dash-head h2{ margin:0; color:var(--navy); }
table.sessions,table.report{ width:100%; border-collapse:collapse; font-size:.9rem; background:var(--panel); border-radius:var(--radius-card); overflow:hidden; box-shadow:var(--shadow); }
table.sessions th,table.sessions td,table.report th,table.report td{ border-bottom:1px solid var(--line); padding:.55rem .6rem; text-align:left; vertical-align:middle; }
table.sessions th,table.report th{ background:var(--soft); color:var(--navy); }
tr.is-closed{ opacity:.6; }
tr.is-paused td{ background:color-mix(in srgb,var(--accent) 8%,transparent); }
tr.at-risk td{ background:color-mix(in srgb,var(--bad) 9%,transparent); }
.actions{ display:flex; gap:.25rem; flex-wrap:wrap; }
.actions .btn{ padding:.35rem .5rem; min-height:36px; }
.btn.danger{ color:var(--bad); }
.pill{ display:inline-block; padding:.15rem .55rem; border-radius:var(--radius-pill); font-size:.76rem; font-weight:700; }
.pill.active{ background:color-mix(in srgb,var(--ok) 18%,transparent); color:var(--ok); }
.pill.closed{ background:var(--soft); color:var(--muted); }
.pill.paused{ background:color-mix(in srgb,var(--accent) 18%,transparent); color:var(--accent); }
.pill.grade{ background:color-mix(in srgb,var(--accent) 16%,transparent); color:var(--accent); }
code{ font-family:var(--font-mono); background:var(--soft); padding:.05rem .35rem; border-radius:var(--radius-sm); }
.codes{ font-family:var(--font-mono); background:var(--soft); border-radius:var(--radius-btn); padding:.7rem; max-height:220px; overflow:auto; line-height:1.9; }

/* ---- Modal ---- */
.modal-ov{ position:fixed; inset:0; z-index:400; background:rgba(15,23,42,.5); display:flex; align-items:flex-start; justify-content:center; padding:2rem 1rem; overflow:auto; }
.modal-card{ background:var(--paper); border-radius:var(--radius-card); box-shadow:var(--shadow); max-width:620px; width:100%; padding:1.2rem 1.3rem; }
.modal-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.6rem; }
.modal-head h3{ margin:0; color:var(--navy); }
.modal-card .btn.x{ min-height:36px; padding:.2rem .6rem; }

/* ---- Projektor ---- */
.projector{ text-align:center; }
.projector .big{ font-size:1.3rem; }
.projector .qr{ display:inline-block; margin:1rem auto; background:#fff; padding:.6rem; border-radius:var(--radius-btn); }
.projector .qr svg{ width:min(320px,70vw); height:auto; }

/* ---- Report-Balken ---- */
.bar{ width:100px; height:10px; background:var(--soft); border-radius:var(--radius-pill); overflow:hidden; }
.bar__fill{ height:100%; background:var(--accent); }
.report h4{ margin:1rem 0 .3rem; color:var(--navy); }

@media print{ .actions,.dash-head .row,.skip,.lesson-header,.lesson-footer{ display:none; } }

/* === WF-G Hub === */
/* Belohnungs-Schicht für den Hub (Design-Critique 2026-07-02, §7c/Priorität 3+4):
   Content-Flächen (Kacheln/Katalog) bleiben ruhig, der „Zucker" (Ring/Flamme/Fredoka-
   Zahlen) sitzt exklusiv auf der Weitermachen-Hero und den Fortschritts-Badges.
   Assets relativ zu DIESER Datei (framework/style.css → assets/…), s. CREDITS.md. */

/* ---- „Weiter machen"-Hero: letzte angefangene Lektion + Ring + Streak-Spiegel ---- */
.hub-hero-continue{ margin:clamp(.8rem,2.4vw,1.4rem) 0 0; }
.hhc-row{ display:flex; gap:1rem; flex-wrap:wrap; align-items:stretch; }
.hhc-card{ position:relative; flex:1 1 420px; display:flex; align-items:center; gap:1.1rem;
  padding:1.2rem 1.35rem; text-decoration:none; color:inherit; min-height:44px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-card);
  box-shadow:var(--shadow); overflow:hidden;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.hhc-card::before{ content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--fc,var(--accent)); }
.hhc-card:hover{ transform:translateY(-3px); box-shadow:0 16px 34px color-mix(in srgb,var(--fc,var(--accent)) 26%,transparent); }
.hhc-ring{ position:relative; flex:0 0 auto; width:84px; height:84px; display:grid; place-items:center; }
.hhc-ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.hhc-ring circle{ fill:none; stroke-width:8; }
.hhc-ring circle.hhc-ring__track{ stroke:var(--soft); }
.hhc-ring circle.hhc-ring__val{ stroke:var(--reward); stroke-linecap:round;
  transition:stroke-dashoffset var(--dur) var(--ease); }
.hhc-ring__pct{ position:absolute; inset:0; display:grid; place-items:center; font-size:1.05rem; color:var(--navy); }
.hhc-body{ min-width:0; flex:1; }
.hhc-kicker{ margin:0 0 .15rem; font-size:.74rem; font-weight:800; letter-spacing:.05em;
  text-transform:uppercase; color:var(--muted); }
.hhc-title{ margin:0; display:flex; align-items:center; gap:.45rem; font-weight:800; color:var(--navy);
  font-size:1.2rem; line-height:1.22; }
.hhc-title__txt{ overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.hhc-meta{ margin:.35rem 0 0; color:var(--muted); font-size:.86rem; }
.hhc-cta{ display:inline-flex; align-items:center; gap:.4rem; margin-top:.55rem; min-height:44px;
  padding:.5rem 1rem; border-radius:var(--radius-pill); background:var(--fc,var(--accent)); color:#fff;
  font-weight:800; font-size:.92rem; }
.hhc-card:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }

/* Lernkartei-Streak, gespiegelt neben der Hero (nur wenn Streak > 0, s. app-hub.js) */
.hhc-streak{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.3rem; min-width:132px; padding:1.2rem 1.1rem; text-decoration:none; color:inherit;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-card); box-shadow:var(--shadow); }
.hhc-streak__icon{ width:40px; height:40px;
  background-color:var(--streak);
  -webkit-mask:var(--hhc-flame-url) center/contain no-repeat;
          mask:var(--hhc-flame-url) center/contain no-repeat; }
.hhc-streak__num{ font-size:1.5rem; color:var(--navy); line-height:1; }
.hhc-streak__lbl{ font-size:.76rem; font-weight:700; color:var(--muted); text-align:center; }

@media (prefers-reduced-motion: reduce){
  .hhc-card{ transition:none; }
  .hhc-card:hover{ transform:none; }
  .hhc-ring circle.hhc-ring__val{ transition:none; }
}

/* ---- Modul-Kacheln: Fach-Farbleiste oben + Fortschrittsring/Badge + ruhigerer Text ----
   (ergänzt die bestehende .mod-card aus dem Katalog-Block oben, ändert keine Textinhalte) */
.mod-card{ padding-top:calc(1.1rem + 4px); }   /* overflow:hidden bereits im Basis-Regelsatz oben */
.mod-card__bar{ position:absolute; inset:0 0 auto 0; height:4px; background:var(--fc,var(--accent)); }
.mod-card__desc{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  font-size:.84rem; line-height:1.35; }
.mod-card__ring{ position:absolute; top:.7rem; right:.7rem; width:34px; height:34px; }
.mod-card__ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.mod-card__ring circle{ fill:none; stroke-width:4; }
.mod-card__ring circle.mc-ring__track{ stroke:var(--soft); }
.mod-card__ring circle.mc-ring__val{ stroke:var(--reward); stroke-linecap:round; }
.mod-card__ring__pct{ position:absolute; inset:0; display:grid; place-items:center;
  font-size:.62rem; color:var(--navy); }
/* Platz für den Ring oben rechts NUR auf Kacheln, die ihn tragen (Modifier-Klasse
   .mod-card--ring aus app-hub.js, statt :has() — konsistent mit dem Bestand). */
.mod-card--ring .mod-card__title{ padding-right:2.3rem; }

/* Fortschrittsbalken unten auf der Kachel (Feedback: „Fortschrittsanzeige fehlt" —
   der Eck-Ring allein war zu klein/unauffällig). Optik an .hub-cont__bar/__fill
   der Weitermachen-Karte angelehnt, nur schlanker. Nur auf Kacheln mit Fortschritt
   (Modifier .mod-card--prog aus app-hub.js) — unbegonnene Lektionen bleiben ohne
   Balken (kein „0%"-Rauschen). */
.mod-card--prog{ padding-bottom:calc(1.15rem + 9px); }
.mod-card__prog{ position:absolute; left:1.15rem; right:1.15rem; bottom:.6rem; height:5px;
  border-radius:99px; background:var(--soft); border:1px solid var(--line); overflow:hidden; }
.mod-card__prog__fill{ display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg, var(--reward,var(--fc,var(--accent))), color-mix(in srgb,var(--fc,var(--accent)) 60%,#fff));
  transition:width var(--dur) var(--ease); }
@media (prefers-reduced-motion: reduce){
  .mod-card__prog__fill{ transition:none; }
}

/* Kachel-Titel + Zahlen dürfen die Display-Schrift nutzen (Fließtext bleibt system-ui) */
.mod-card__title, .hhc-title, .hhc-ring__pct, .hhc-streak__num, .mod-card__ring__pct{
  font-family:var(--font-num); }

/* ============================================================
   === Lehrer-Dashboard (app-lehrer.js) — Responsive-Schicht ===
   Ergänzt NUR die Layout-/Breakpoint-Regeln für die .tk-*-Klassen aus dem
   Kern-Agenten-Vertrag (app-lehrer.js). Farb-/Typo-Tokens ausschließlich aus
   core/base.css (--navy/--accent/--panel/--soft/--line/--muted/--ok/--bad/--tap).
   ============================================================ */

/* ---- Kopf (.tk-head) ---- */
.tk-head{ background:var(--paper); border-bottom:1px solid var(--line); padding:.7rem clamp(.8rem,3vw,1.4rem) 0; }
.tk-head__row{ max-width:1100px; margin:0 auto; display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; }
.tk-head__title{ margin:0; flex:1 1 auto; min-width:0; font-size:clamp(1.05rem,3vw,1.4rem); color:var(--navy); }
.tk-head__actions{ display:flex; align-items:center; gap:.5rem; flex:0 0 auto; flex-wrap:wrap; }

/* ---- Chips + Dropdown-Menü (Konto / Schul-Werkzeuge) ---- */
.tk-drop{ position:relative; display:inline-flex; }
.tk-chip{ display:inline-flex; align-items:center; gap:.35rem; min-height:var(--tap); white-space:nowrap;
  background:var(--soft); border:1.5px solid var(--line); border-radius:var(--radius-pill); padding:.45rem .9rem;
  font-weight:700; color:var(--ink); }
.tk-chip:hover{ border-color:var(--accent); }
.tk-chip[aria-expanded="true"]{ background:var(--accent); color:var(--accent-ink); border-color:transparent; }
.tk-caret{ font-size:.7em; opacity:.75; }
.tk-drop{ position: relative; }
.tk-menu{ position:absolute; right:0; top:calc(100% + 6px); z-index:60; min-width:230px; max-width:min(320px,90vw);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-btn); box-shadow:var(--shadow);
  padding:.35rem; display:flex; flex-direction:column; }
.tk-menu[hidden]{ display:none; }
.tk-menu__item{ display:flex; align-items:center; gap:.6rem; width:100%; min-height:var(--tap); text-align:left;
  font:inherit; color:var(--ink); background:transparent; border:0; border-radius:var(--radius-sm);
  padding:.5rem .6rem; cursor:pointer; text-decoration:none; }
.tk-menu__item:hover,.tk-menu__item:focus-visible{ background:var(--soft); }
.tk-menu__toggle{ display:flex; align-items:center; gap:.55rem; width:100%; min-height:var(--tap); font-weight:400;
  color:var(--ink); padding:.5rem .6rem; cursor:pointer; }
.tk-menu__toggle input{ width:18px; height:18px; min-height:auto; accent-color:var(--accent); cursor:pointer; flex:0 0 auto; }
.tk-menu__sep{ display:flex; align-items:center; gap:.4rem; margin:.35rem .3rem .15rem; padding-top:.35rem;
  border-top:1px solid var(--line); font-size:.72rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:var(--muted); }

/* ---- Tab-Leiste (.tk-tabs): sticky, horizontal scrollbar auf schmal, aktiv klar markiert ---- */
.tk-tabs{ position:sticky; top:0; z-index:40; display:flex; gap:.3rem; margin-top:.7rem;
  padding:0 clamp(.8rem,3vw,1.4rem); max-width:1100px; margin-left:auto; margin-right:auto;
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin;
  background:var(--paper); border-bottom:1px solid var(--line); }
.tk-tab{ flex:0 0 auto; display:inline-flex; align-items:center; gap:.4rem; min-height:var(--tap);
  padding:.6rem .9rem; background:transparent; border:0; border-bottom:3px solid transparent;
  border-radius:0; font-weight:700; color:var(--muted); white-space:nowrap; }
.tk-tab:hover{ color:var(--navy); background:var(--soft); }
.tk-tab[aria-selected="true"]{ color:var(--accent); border-bottom-color:var(--accent); background:transparent; }
.tk-tab__icon{ font-size:1.1em; line-height:1; }
.tk-tab__label{ font-size:.94rem; }

/* Untertabs (Klassen › Rückmeldungen, Kurse › Übersicht/Kursblick/Material) —
   optisch schlanker als die Haupt-Tabs, gleiches Aktiv-Muster (.is-on statt aria-selected). */
.tk-subtabs{ display:flex; gap:.4rem; flex-wrap:wrap; margin:0 0 1rem; }
.tk-subtab{ min-height:var(--tap); padding:.4rem .9rem; background:var(--soft); border:1.5px solid var(--line);
  border-radius:var(--radius-pill); font-weight:700; color:var(--ink); }
.tk-subtab:hover{ border-color:var(--accent); }
.tk-subtab.is-on{ background:var(--accent); color:var(--accent-ink); border-color:transparent; }

/* ---- Sektions-Kopf (.tk-sec) — Titel/Untertitel + optionale Aktion rechts ---- */
.tk-sec{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin:1.6rem 0 .9rem; }
.tk-sec:first-child{ margin-top:0; }
.tk-sec__main{ min-width:0; }
.tk-sec__title{ margin:0; color:var(--navy); font-size:clamp(1.05rem,2.6vw,1.25rem); }
.tk-sec__sub{ margin:.25rem 0 0; color:var(--muted); font-size:.88rem; }
.tk-sec__action{ flex:0 0 auto; }

/* ---- Karten-Grid (.tk-cards → .tk-card): Desktop mehrspaltig, Mobil 1-spaltig ---- */
.tk-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1rem; margin:0 0 1.6rem; }
@media (max-width:760px){
  .tk-cards{ grid-template-columns:1fr; }
}
.tk-card{ position:relative; display:flex; flex-direction:column; gap:.5rem; padding:1rem 1.1rem 1.1rem;
  background:var(--panel); border:1px solid var(--line); border-left:5px solid var(--line);
  border-radius:var(--radius-card); box-shadow:var(--shadow); }
/* Status-Akzent (Live-Karten auf Start + Klassen-Kartenfallback) — Farbe trägt nie
   allein die Bedeutung: Status steht zusätzlich als Text/Pill im Karteninhalt. */
.tk-card[data-status="active"]{ border-left-color:var(--ok); }
.tk-card[data-status="paused"]{ border-left-color:var(--accent); }
.tk-card[data-status="closed"]{ border-left-color:var(--line); opacity:.75; }
.tk-card__head{ display:flex; align-items:flex-start; gap:.65rem; }
.tk-card__icon{ flex:0 0 auto; font-size:1.6rem; line-height:1.15; }
.tk-card__titles{ min-width:0; flex:1; }
.tk-card__title{ font-weight:800; color:var(--navy); font-size:1.02rem; line-height:1.25;
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.tk-card__sub{ margin-top:.15rem; color:var(--muted); font-size:.84rem; }
.tk-card__badge{ flex:0 0 auto; font-size:.72rem; font-weight:800; padding:.15rem .55rem; border-radius:var(--radius-pill);
  background:#fff3cd; color:#7a5d00; border:1px solid #f0d98c; }
.tk-card__body{ font-size:.88rem; color:var(--ink); }
.tk-card__actions{ display:flex; gap:.35rem; flex-wrap:wrap; margin-top:.3rem; }
.tk-card__actions .btn{ min-height:var(--tap); }

/* ---- Sitzungs-Meta (Live-Karte auf Start, im .tk-card__body) ---- */
.tk-sess-meta{ display:flex; gap:.5rem 1rem; flex-wrap:wrap; font-size:.84rem; color:var(--muted); }
.tk-sess-meta b{ color:var(--navy); }

/* ---- Kontroll-Leiste: Suche + Filter-Pills + primäre Aktion ---- */
.tk-controls{ display:flex; align-items:center; gap:.6rem .7rem; flex-wrap:wrap; margin:0 0 .6rem; }
.tk-search{ flex:1 1 220px; min-width:180px; max-width:380px; }
.tk-filters{ display:flex; gap:.4rem; flex-wrap:wrap; }
.tk-filter{ min-height:var(--tap); padding:.4rem .85rem; background:var(--soft); border:1.5px solid var(--line);
  border-radius:var(--radius-pill); font-weight:700; color:var(--ink); }
.tk-filter:hover{ border-color:var(--accent); }
.tk-filter.is-on{ background:var(--accent); color:var(--accent-ink); border-color:transparent; }
.tk-controls__cta{ margin-left:auto; min-height:var(--tap); }
.tk-scope{ margin:0 0 1rem; }
@media (max-width:600px){
  .tk-controls{ flex-direction:column; align-items:stretch; }
  .tk-search{ max-width:none; }
  .tk-controls__cta{ margin-left:0; width:100%; }
}

/* ---- Start: Schnellstart-Kachel (volle Breite, große Tap-Fläche) ---- */
.tk-quickstart{ display:flex; align-items:center; gap:1rem; width:100%; min-height:var(--tap);
  padding:1rem 1.2rem; margin:0 0 1.6rem; text-align:left;
  background:var(--panel); border:1.5px dashed var(--accent); border-radius:var(--radius-card); box-shadow:var(--shadow); }
.tk-quickstart:hover{ background:color-mix(in srgb,var(--accent) 6%,var(--panel)); }
.tk-quickstart__icon{ flex:0 0 auto; font-size:1.7rem;
  width:52px; height:52px; display:grid; place-items:center; border-radius:14px;
  background:color-mix(in srgb,var(--accent) 14%,var(--soft)); }
.tk-quickstart__body{ display:flex; flex-direction:column; gap:.15rem; min-width:0; flex:1; }
.tk-quickstart__title{ font-weight:800; color:var(--navy); font-size:1.06rem; }
.tk-quickstart__sub{ color:var(--muted); font-size:.86rem; }
.tk-quickstart__arrow{ flex:0 0 auto; font-size:1.3rem; color:var(--accent); }
@media (max-width:480px){
  .tk-quickstart{ gap:.7rem; padding:.9rem 1rem; }
  .tk-quickstart__icon{ width:44px; height:44px; font-size:1.4rem; }
}

/* ---- Klassen-Tabelle (Desktop) vs. Karten-Fallback (Mobil) ----
   app-lehrer.js rendert IMMER beide (.tk-table-wrap + .tk-sess-cards nebeneinander
   im DOM) — die Umschaltung ist rein CSS-gesteuert über denselben 760px-Breakpoint
   wie die Karten-Grids. */
.tk-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--radius-card); }
.tk-table-wrap table.sessions{ min-width:760px; }
.tk-sess-cards{ display:none; grid-template-columns:1fr; gap:.85rem; }
@media (max-width:760px){
  .tk-table-wrap{ display:none; }
  .tk-sess-cards{ display:grid; }
}
@media (min-width:761px){
  .tk-sess-cards{ display:none; }
}

/* ---- .row2: zweispaltige Formularzeilen (Modals, Kurs-Formular) — 1-spaltig <760px,
   gleicher Breakpoint wie die Karten-Grids/Tabelle für ein durchgängiges Mobil-Bild. ---- */
@media (max-width:760px){
  .row2{ grid-template-columns:1fr; }
}

/* ---- Aktionsziele einheitlich ≥44px (Tabellen-/Karten-Aktionsleisten) ----
   .actions .btn war 36px (Zeile oben in diesem File) — hier auf --tap gehoben,
   ohne die Basisregel zu löschen (spätere Kaskade gewinnt). */
.actions .btn{ min-height:var(--tap); min-width:var(--tap); padding:.4rem .6rem; }
.tk-linkbtn{ min-height:var(--tap); }

/* ---- Link-Button im Button-Look (öffnet neuen Tab, z. B. „Bearbeiten") ---- */
a.tk-linkbtn{ text-decoration:none; }

/* ---- Mobil-Feinschliff: Kopf/Chips brechen sauber um, Karten-Aktionen bleiben tappable ---- */
@media (max-width:560px){
  .tk-head__row{ gap:.5rem; }
  .tk-head__actions{ gap:.4rem; }
  .tk-chip span:not(.tk-caret){ max-width:9.5em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .tk-menu{ right:0; left:auto; }
}

/* Heatmaps/Reports (report()/kbRenderCourse(), core/base.css .board etc.) behalten
   ihren eigenen overflow:auto-Container — hier keine zusätzliche Regel nötig, da
   die Renderer bereits eigene .heatmap/.kb-heat-Wrapper mit overflow:auto liefern. */

/* ==================== „Quiz läuft!"-Banner (Kurs-Modus, app-hub.js) ====================
   Snackbar-artig am unteren Rand: auffällig, aber nicht blockierend. Der Link
   führt direkt in quiz/#join=<CODE>; das Banner verschwindet, sobald die
   Lehrkraft den Raum beendet (Poll im 20-s-Intervall). */
.hub-live-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  display:flex; justify-content:center; padding:.6rem;
  pointer-events:none;
}
.hub-live-banner__link{
  pointer-events:auto;
  display:inline-flex; align-items:center; gap:.55rem;
  min-height:var(--tap, 44px);
  background:var(--k-red, #e21b3c); color:#fff; text-decoration:none;
  font-size:1.05rem; padding:.55rem 1.2rem; border-radius:999px;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  animation:hub-live-pop .35s ease-out;
}
.hub-live-banner__link:hover, .hub-live-banner__link:focus-visible{ filter:brightness(1.08); }
.hub-live-banner__title{
  opacity:.9; font-size:.9em; max-width:12em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.hub-live-banner__dot{
  width:.65em; height:.65em; border-radius:50%; background:#fff;
  animation:hub-live-blink 1.2s ease-in-out infinite;
}
@keyframes hub-live-pop{ from{ transform:translateY(1.2rem); opacity:0; } }
@keyframes hub-live-blink{ 50%{ opacity:.35; } }
@media (prefers-reduced-motion: reduce){
  .hub-live-banner__link, .hub-live-banner__dot{ animation:none; }
}