/* NXTGEN product-family skin. Reference: nxtgen-app AGENTS.md (Flow Deck),
   athlete app-theme.css and index.css at 980b15fa. Brand yellow stays #FFC813.
   Layout and learning semantics remain in the existing views. */
:root {
  color-scheme: dark;
  --nxt-base: #080b0f;
  --nxt-surface: #0e1217;
  --nxt-raised: #141920;
  --nxt-selected: #1b2129;
  --nxt-text: #f4f2ec;
  --nxt-muted: #a9b1bb;
  --nxt-line: rgba(244,242,236,.12);
  --nxt-yellow: #ffc813;
  --nxt-positive: #49cf83;
  --nxt-negative: #ee6672;
  --nxt-safe-bottom: env(safe-area-inset-bottom,0px);
  background: var(--nxt-base);
  color: var(--nxt-text);
  font-family: Poppins,system-ui,sans-serif;
}
html { scroll-padding-top: 90px; -webkit-text-size-adjust:100%; }
body,.shell { background:var(--nxt-base); color:var(--nxt-text); }
body { line-height:1.6; -webkit-tap-highlight-color:transparent; }
header { height:76px; background:var(--nxt-base); border-color:var(--nxt-line); }
.brand { gap:10px; }
.brand small { color:var(--nxt-muted); font-size:10px; }
.brand strong span,.eyebrow { color:var(--nxt-yellow); }
.brand img { width:40px; height:40px; }
main { max-width:1100px; padding:28px 32px 48px; }
h1,h2,h3,p { overflow-wrap:break-word; }
h1,h2,h3 { color:var(--nxt-text); line-height:1.3; letter-spacing:-.025em; }
h1 { font-size:28px; margin:0 0 16px; }
h2 { font-size:22px; }
h3 { font-size:18px; }
p { margin:12px 0; }
.eyebrow { font-size:11px; letter-spacing:.12em; }
.hero { padding:24px 0; border:0; border-radius:0; background:none; }
.hero h1 { font-size:clamp(25px,3.5vw,36px); line-height:1.2; margin:10px 0; }
.hero p { color:var(--nxt-muted); line-height:1.65; margin-bottom:0; }
.section-title { margin:28px 0 14px; }
.section-title h2 { font-size:22px; }
.panel,.card,.question,fieldset.skill-card { background:var(--nxt-surface); border-color:var(--nxt-line); border-radius:16px; }
.panel,.card { padding:22px; }
.card:hover { border-color:rgba(244,242,236,.22); }
.card p,.muted,.item small,.label,.gap,details.other-options p,.exercise-bar,.breadcrumbs,ul.missing,ul.milestones { color:var(--nxt-muted); }
.today-head { padding:24px; border:0; border-block:1px solid var(--nxt-line); border-radius:0; background:var(--nxt-surface); }
.today-head h1 { font-size:28px; margin:0 0 12px; }
.today-head .next-step { max-width:65ch; margin:0 0 20px; font-size:15px; color:var(--nxt-muted); }
.today-head .next-step strong { color:var(--nxt-text); font-weight:600; }
.today-head > .btn { min-width:190px; }
.btn { min-height:48px; padding:11px 18px; border-radius:12px; border-color:var(--nxt-yellow); background:var(--nxt-yellow); color:var(--nxt-base); font-size:14px; font-weight:600; touch-action:manipulation; transition:background .12s,border-color .12s,transform .12s; }
.btn:hover { background:#ffd769; }
.btn:active { transform:scale(.98); }
.btn:disabled { transform:none; pointer-events:none; }
.btn.secondary,.admin-tabs button { background:var(--nxt-raised); border-color:var(--nxt-line); color:var(--nxt-text); }
.btn.secondary:hover,.admin-tabs button:hover { background:var(--nxt-selected); border-color:rgba(244,242,236,.25); }
.btn.small { min-height:44px; font-size:12px; }
.btn.danger { background:rgba(238,102,114,.1); border-color:rgba(238,102,114,.45); color:#ffb5bd; }
.btn.secondary.picked,.admin-tabs button.active { border-color:var(--nxt-yellow); color:var(--nxt-yellow); }
:where(a,button,input,select,textarea,summary):focus-visible { outline:2px solid var(--nxt-yellow); outline-offset:4px; }
.field { background:var(--nxt-base); color:var(--nxt-text); border-color:rgba(244,242,236,.22); border-radius:10px; min-height:48px; }
.field:focus { border-color:var(--nxt-yellow); box-shadow:0 0 0 2px rgba(255,200,19,.15); }
.chip { border-color:var(--nxt-line); color:var(--nxt-muted); font-size:11px; }
.chip.gold { border-color:rgba(255,200,19,.35); color:var(--nxt-yellow); }
.chip.warn { border-color:rgba(255,200,19,.4); color:var(--nxt-yellow); }
.notice,.notice.synthetic,.notice.demo-flag { border-color:var(--nxt-line); background:var(--nxt-surface); color:var(--nxt-muted); }
.notice.demo-flag,.notice.synthetic { font-size:13px; line-height:1.6; padding:12px 16px; margin-bottom:16px; border-color:rgba(255,200,19,.25); background:rgba(255,200,19,.035); }
.notice.demo-flag p,.notice.synthetic p { margin:0 0 8px; }
.demo-details summary { cursor:pointer; color:var(--nxt-muted); min-height:28px; }
.demo-details[open] p { margin-top:10px; }
.error { background:rgba(238,102,114,.09); border-color:rgba(238,102,114,.4); color:#ffb5bd; }
.success { background:rgba(73,207,131,.08); border-color:rgba(73,207,131,.4); color:#a8efc5; }
.readiness { border-left-width:3px; border-left-color:var(--nxt-muted); }
.readiness-on_track { border-left-color:var(--nxt-positive); }
.readiness-building,.readiness-gap { border-left-color:var(--nxt-yellow); }
.readiness-unknown { border-left-color:var(--nxt-line); }
.competency.status-weak { border-color:rgba(255,200,19,.35); }
.competency.status-solid { border-color:rgba(73,207,131,.3); }
dl.metrics dt { color:var(--nxt-muted); }
.result-score,.timer { color:var(--nxt-yellow); font-variant-numeric:tabular-nums; }
.progress-meter,.progress { background:var(--nxt-selected); accent-color:var(--nxt-yellow); }
.progress-meter::-webkit-progress-bar { background:var(--nxt-selected); }
.progress-meter::-webkit-progress-value,.progress>span { background:var(--nxt-yellow); }
.progress-meter::-moz-progress-bar { background:var(--nxt-yellow); }
.item,.coverage,.matching-row,.choice { border-color:var(--nxt-line); }
details.other-options { background:transparent; border-color:var(--nxt-line); border-radius:12px; padding:10px 16px; }
details.other-options summary { min-height:28px; color:var(--nxt-text); font-size:13px; font-weight:500; }
.more-area { max-width:100%; }
.answer-tile,ol.ordering li,.solution-path,.matrix-grid,fieldset.field-set { background:var(--nxt-raised); border-color:var(--nxt-line); border-radius:12px; }
.answer-tile { min-height:60px; }
.answer-tile:hover { border-color:rgba(244,242,236,.3); }
.answer-tile.picked { background:rgba(255,200,19,.06); border-color:var(--nxt-yellow); }
.answer-tile:focus-within { outline:2px solid var(--nxt-yellow); outline-offset:3px; }
.answer-tile:not(.picked):focus-within { background:var(--nxt-raised); border-color:var(--nxt-line); }
.answer-tile input,.choice input,.switch input { accent-color:var(--nxt-yellow); }
.exercise-bar { margin:16px 0; }
.question.exercise .prompt { font-size:22px; }
.feedback { border-left-color:var(--nxt-line); }
.feedback.right { border-left-color:var(--nxt-positive); }
.feedback.wrong { border-left-color:var(--nxt-negative); }
.matrix-cell { border-color:var(--nxt-line); color:var(--nxt-text); }
.matrix-cell.open { border-color:var(--nxt-yellow); color:var(--nxt-yellow); }
.memory-stimulus { background:var(--nxt-raised); border-color:rgba(255,200,19,.3); color:var(--nxt-yellow); }
.audio-player { background:var(--nxt-base); accent-color:var(--nxt-yellow); }
.audio-player.failed { outline-color:var(--nxt-negative); }
.topo-footer { display:none; }
.nav { gap:4px; flex-wrap:nowrap; }
.nav a { min-height:44px; display:flex; align-items:center; justify-content:center; gap:8px; border-radius:12px; color:var(--nxt-muted); }
.nav a svg { width:20px; height:20px; flex:0 0 auto; }
.nav a:hover,.nav .active { background:var(--nxt-selected); color:var(--nxt-yellow); }
.nav a.active { color:var(--nxt-yellow); }
@media(max-width:760px) {
  html { scroll-padding-top:80px; scroll-padding-bottom:100px; }
  header { height:auto; min-height:68px; flex-direction:row; align-items:center; padding:12px max(16px,env(safe-area-inset-right,0px)) 12px max(16px,env(safe-area-inset-left,0px)); padding-top:calc(12px + env(safe-area-inset-top,0px)); }
  .brand img { width:36px; height:36px; }
  .brand strong { font-size:18px; }
  main { padding:18px max(16px,env(safe-area-inset-right,0px)) calc(112px + var(--nxt-safe-bottom)) max(16px,env(safe-area-inset-left,0px)); }
  .nav { position:fixed; bottom:calc(12px + var(--nxt-safe-bottom)); left:max(12px,env(safe-area-inset-left,0px)); right:max(12px,env(safe-area-inset-right,0px)); width:auto; max-width:520px; margin:0 auto; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); padding:6px; gap:4px; border:1px solid var(--nxt-line); border-radius:20px; background:rgba(14,18,23,.98); box-shadow:0 12px 36px rgba(0,0,0,.4); overflow:visible; z-index:50; }
  .nav>a { min-height:56px; min-width:0; padding:6px 4px; flex-direction:column; gap:3px; font-size:11px; line-height:1.4; }
  .nav>.chip { display:none; }
  .nav a.active { color:var(--nxt-yellow); background:var(--nxt-selected); }
  .hero { padding:16px 0; }
  .hero h1 { font-size:26px; }
  .hero p { font-size:14px; }
  .panel,.card,.question.exercise { padding:18px; }
  .today-head { padding:22px 18px; }
  .today-head>.btn { width:100%; }
  .today-head .next-step { font-size:14px; }
  .today-head h1 { font-size:26px; }
  input:not([type=checkbox]):not([type=radio]),textarea,select { font-size:16px; }
  .question.exercise .prompt { font-size:20px; }
  .form-actions { gap:10px; }
  .confidence { font-size:13px; }
  .recall-row input { min-width:0; }
  .matching-row>* { min-width:0; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { transition:none!important; animation:none!important; scroll-behavior:auto!important; }
}

/* Persönliche Kursübersicht; vorhandene Markenflächen und Fortschrittsbalken. */
.learning-tools { display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.learning-tools > .more-area { flex:1; min-width:120px; margin:0; }
.learning-tools > .btn { flex-shrink:0; }
.course-grid { grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr)); }
.course-tile { display:flex; flex-direction:column; min-width:0; gap:12px; }
.course-tile > .chip { align-self:flex-start; }
.course-tile h2,.course-tile p { margin:0; }
.course-completion { margin-top:auto; display:grid; gap:10px; }
.course-completion .row { justify-content:space-between; }
.course-tile > .btn { text-align:center; }
.my-courses .section-title { margin-top:12px; gap:12px; flex-wrap:wrap; }

/* Motive bleiben kompakt, die Lernhandlung und Zählwerte lesbar. */
.course-cover { overflow:hidden; width:100%; height:144px; border-radius:12px; background:var(--nxt-raised); }
.course-cover img { display:block; width:100%; height:100%; object-fit:cover; object-position:center 35%; }
main > .course-cover { height:180px; max-width:680px; }
.course-tile > .course-cover { flex-shrink:0; }
.catalog-course .course-cover { margin-bottom:16px; }
.lesson-thumbnail { display:block; width:64px; height:48px; flex:0 0 64px; overflow:hidden; border-radius:8px; background:var(--nxt-raised); }
.lesson-thumbnail img { display:block; width:100%; height:100%; object-fit:cover; }
.lesson-list-item { gap:12px; flex-direction:row; align-items:center; }
.lesson-list-item .item-info { flex:1; min-width:0; }
.learning-figure { margin:24px 0; padding:20px; border:1px solid var(--nxt-line); border-radius:12px; background:var(--nxt-raised); }
.learning-figure h2 { font-size:18px; margin:0 0 12px; }
.learning-figure svg { display:block; width:100%; height:auto; }
.fraction-rest { fill:var(--nxt-selected); }
.fraction-part { fill:var(--nxt-yellow); }
.fraction-label,.fraction-remainder { fill:var(--nxt-text); font:20px Poppins,sans-serif; }
.fraction-value { fill:var(--nxt-base); font:600 24px Poppins,sans-serif; }
.learning-figure figcaption { color:var(--nxt-text); font-size:14px; }
.learning-figure figcaption p { color:var(--nxt-text); }
@media(max-width:760px) {
  .course-cover { height:96px; }
  main > .course-cover { height:120px; }
  .lesson-list-item { flex-wrap:wrap; }
  .lesson-list-item .item-info { flex-basis:calc(100% - 80px); }
  .lesson-list-item > .btn { margin-left:76px; }
  .learning-figure { margin:20px 0; padding:14px; }
}

.fraction-counts { display:flex; justify-content:space-between; gap:12px; font-size:14px; }
.fraction-counts strong { color:var(--nxt-yellow); }
.fraction-total { text-align:center; color:var(--nxt-muted); font-size:14px; margin:4px 0 14px; }

.course-description { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; }
@media(max-width:760px) { .course-description { -webkit-line-clamp:2; } }

/* Direkter Katalogzugang; Kontomenü ersetzt den großen Mehr-Block. */
header { gap:12px; }
header > .nav { margin-left:auto; }
.account-menu { position:relative; flex:0 0 auto; }
.account-menu > summary { cursor:pointer; list-style:none; }
.account-menu > summary::-webkit-details-marker { display:none; }
.account-menu > summary::after { content:" ▾"; }
.account-panel { position:absolute; right:0; top:calc(100% + 8px); display:grid; gap:8px; min-width:220px; max-width:calc(100vw - 32px); padding:12px; border:1px solid var(--nxt-line); border-radius:12px; background:var(--nxt-surface); box-shadow:0 16px 40px #0008; z-index:100; }
.account-panel .btn { text-align:left; white-space:normal; }
.course-cover-link { display:block; width:100%; border-radius:12px; flex-shrink:0; }
.course-cover-link:hover img { filter:brightness(1.12); }
@media(max-width:760px) {
  .nav { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .nav > a { font-size:10px; padding-inline:2px; }
  header > .nav { margin:0 auto; }
  .account-menu > summary { min-height:40px; padding:8px 10px; }
}
@media(min-width:761px) and (max-width:1100px) {
  header { padding-inline:20px; gap:8px; }
  .nav > .chip { display:none; }
  .nav a { padding:6px 8px; gap:5px; font-size:12px; }
}

.catalog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media(max-width:760px) { .catalog-grid { grid-template-columns:minmax(0,1fr); } }

/* Inhaltshierarchie verwendet die vorhandenen Abschnitte und Lektionen. */
.course-structure-summary { color:var(--nxt-muted); margin:0 0 20px; }
.section-heading h2 { margin:6px 0; }
.section-heading > p { margin:0 0 16px; }
.chapter-number { color:var(--nxt-yellow); font-size:11px; font-weight:600; }
.chapter-row .item-info h3 { font-size:16px; margin:4px 0 8px; }
.chapter-title { color:var(--nxt-text); text-decoration:none; }
.chapter-title:hover { color:var(--nxt-yellow); text-decoration:underline; }
.chapter-row .chapter-preview { color:var(--nxt-muted); font-size:13px; line-height:1.6; margin:0 0 8px; }
.chapter-row { align-items:flex-start; }
.chapter-row .lesson-thumbnail { margin-top:4px; }
@media(max-width:760px) {
  .chapter-row .item-info h3 { font-size:15px; }
  .chapter-row .chapter-preview { font-size:13px; }
}

.chapter-topics { padding-left:16px; }
.chapter-topics li + li { margin-top:4px; }

/* Die Fortschrittskarte bleibt bei langen Kursen auf Inhaltshöhe. */
.course-progress-panel{align-self:start}

.course-back-nav{margin-bottom:20px}
.course-back-link{min-height:48px;font-size:15px;padding:12px 18px}

@media(max-width:1000px){.course-layout{grid-template-columns:minmax(0,1fr)}}