/* 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; }

/* ---- 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)); }
.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; }
.hub-area__go{ font-weight:800; color:var(--a,var(--accent)); font-size:.9rem; }

/* ---- 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 1.7rem; }
.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; }

/* ---- 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); }

/* ---- 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.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.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; } }