:root {
  color-scheme: light;
  --ink: #16243b;
  --muted: #5d6b80;
  --paper: #ffffff;
  --canvas: #edf2f8;
  --navy: #13213a;
  --blue: #2366d1;
  --violet: #7456d8;
  --yellow: #f5b82e;
  --red: #cc4a56;
  --green: #23856b;
  --line: #d8e0eb;
  --shadow: 0 18px 45px rgba(25, 44, 75, .13);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--canvas); color: var(--ink); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { overflow-x: hidden; }
button { font: inherit; }
.skip-link { position: fixed; left: 1rem; top: -4rem; z-index: 100; padding: .7rem 1rem; border-radius: .5rem; background: #fff; color: var(--navy); }
.skip-link:focus { top: 1rem; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 310px minmax(0, 1fr); grid-template-rows: 72px minmax(0, 1fr); }
.topbar { position: sticky; top: 0; z-index: 20; grid-column: 1 / -1; display: flex; align-items: center; gap: 1rem; min-height: 72px; padding: 0 1.25rem; background: var(--navy); color: #fff; box-shadow: 0 3px 12px rgba(0,0,0,.18); }
.brand { display: flex; align-items: center; gap: .75rem; color: inherit; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, var(--blue), var(--violet)); font-weight: 900; }
.brand strong, .brand span { display: block; }
.brand div span { margin-top: .15rem; color: #bec9db; font-size: .78rem; }
.top-actions { display: flex; gap: .5rem; margin-left: auto; }
.icon-button, .text-button { min-height: 42px; border: 1px solid rgba(255,255,255,.25); border-radius: .7rem; color: #fff; background: rgba(255,255,255,.08); cursor: pointer; }
.icon-button { width: 44px; font-size: 1.2rem; }
.text-button { padding: .55rem .85rem; font-weight: 700; }
#menuButton { display: none; }
.sidebar { position: sticky; top: 72px; align-self: start; height: calc(100vh - 72px); overflow-y: auto; padding: 1rem; background: #f8fafc; border-right: 1px solid var(--line); }
.mission-card { padding: 1rem; border-radius: 1rem; color: #fff; background: linear-gradient(145deg, #20395f, #192b49); }
.mission-card h2 { margin: .2rem 0 .55rem; font-size: 1.08rem; }
.mission-card p:last-child { margin: 0; color: #d9e3f1; font-size: .88rem; line-height: 1.45; }
.eyebrow { margin: 0; color: #9ec1ff; font-size: .72rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.progress-wrap { margin: 1.1rem .2rem; }
.progress-label { display: flex; justify-content: space-between; font-size: .8rem; }
.progress-track { height: 8px; margin-top: .45rem; overflow: hidden; border-radius: 999px; background: #dce4ef; }
.progress-track span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--green)); transition: width .3s ease; }
.score-card { display:flex; justify-content:space-between; margin:-.45rem .2rem 1rem; padding:.65rem .7rem; border-radius:.65rem; color:#46566d; background:#edf2f8; font-size:.76rem; }
#stationNav { display: grid; gap: .35rem; }
.station-link { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: .55rem; width: 100%; padding: .62rem .65rem; border: 0; border-radius: .7rem; text-align: left; text-decoration:none; color: var(--ink); background: transparent; cursor: pointer; }
.station-link:hover, .station-link:focus-visible { background: #e8eef7; }
.station-link.active { color: #fff; background: var(--blue); }
.station-number { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: rgba(35,102,209,.12); font-size: .78rem; font-weight: 800; }
.station-link.active .station-number { background: rgba(255,255,255,.2); }
.station-link.done .station-number::after { content: "✓"; }
.station-link.done .station-number { font-size: 0; color: var(--green); background: #d7f1e8; }
.station-link.active.done .station-number { color: #fff; background: rgba(255,255,255,.2); }
.station-title { font-size: .84rem; font-weight: 700; line-height: 1.15; }
.expert-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--violet); }
.reset-button { width: 100%; margin-top: 1rem; padding: .65rem; border: 1px solid var(--line); border-radius: .7rem; color: var(--muted); background: #fff; cursor: pointer; font-size: .78rem; }
main { min-width: 0; padding: clamp(1rem, 3vw, 3rem); }
.lesson-card { width: min(1050px, 100%); min-height: 65vh; margin: 0 auto; padding: clamp(1.25rem, 4vw, 3.2rem); border: 1px solid rgba(24,48,82,.08); border-radius: 1.4rem; background: var(--paper); box-shadow: var(--shadow); }
.hero-visual { position:relative; float:right; width:min(31vw, 310px); aspect-ratio:1.45; margin:0 0 1.2rem 1.5rem; overflow:hidden; border-radius:1.25rem; background:linear-gradient(145deg,#102443,#28508b); }
.hero-visual::after { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size:24px 24px; }
.orb { position:absolute; border-radius:50%; filter:blur(1px); opacity:.55; }
.orb-one { width:130px; height:130px; right:-25px; top:-40px; background:#7456d8; }
.orb-two { width:90px; height:90px; left:-20px; bottom:-30px; background:#23a883; }
.scanner { position:absolute; z-index:2; left:50%; top:50%; display:grid; place-items:center; width:84px; height:84px; transform:translate(-50%,-50%); border:2px solid #8fc0ff; border-radius:50%; color:#fff; font-size:2.2rem; background:rgba(13,28,51,.75); box-shadow:0 0 0 13px rgba(80,145,235,.12); }
.scanner i { position:absolute; width:110px; height:2px; background:linear-gradient(90deg,transparent,#7de5c5,transparent); animation:scan 2.8s ease-in-out infinite; }
.data-card { position:absolute; z-index:3; width:72px; padding:.45rem; border:1px solid rgba(255,255,255,.35); border-radius:.55rem; color:#fff; background:rgba(255,255,255,.12); backdrop-filter:blur(4px); }
.data-card b { font-size:.75rem; }.data-card em { display:block; height:3px; margin-top:5px; border-radius:5px; background:rgba(255,255,255,.45); }
.data-a { left:14px; top:18px; transform:rotate(-5deg); }.data-b { right:16px; bottom:18px; transform:rotate(5deg); }
.human-check { position:absolute; z-index:4; right:14px; top:15px; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; color:#0e4b39; background:#83efc8; font-weight:900; }
@keyframes scan { 0%,100% { transform:translateY(-27px); opacity:.45; } 50% { transform:translateY(27px); opacity:1; } }
.station-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; }
.chip { display: inline-flex; padding: .35rem .62rem; border-radius: 999px; color: #164e83; background: #dceeff; font-size: .75rem; font-weight: 800; }
.chip.expert { color: #4d378f; background: #ebe5ff; }
.lesson-card h1 { max-width: 780px; margin: .8rem 0 .55rem; font-size: clamp(1.8rem, 5vw, 3rem); line-height: 1.05; }
.lead { max-width: 820px; color: var(--muted); font-size: clamp(1.03rem, 2vw, 1.24rem); line-height: 1.55; }
.objective { display: grid; grid-template-columns: 45px 1fr; gap: .8rem; margin: 1.6rem 0; padding: 1rem; border-left: 5px solid var(--yellow); border-radius: .8rem; background: #fff8df; }
.station-illustration { margin:0 0 1.35rem; overflow:hidden; border:1px solid var(--line); border-radius:1.1rem; background:#10233e; box-shadow:0 12px 28px rgba(19,42,73,.14); }
.station-illustration img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }
.station-illustration figcaption { display:flex; align-items:flex-start; gap:.6rem; margin:0; padding:.75rem .9rem; color:#dfeafa; background:#142b49; font-size:.82rem; line-height:1.45; }
.station-illustration figcaption span { display:grid; place-items:center; flex:0 0 26px; height:26px; border-radius:50%; color:#10233e; background:#f5c651; font-weight:900; }
.objective-icon { font-size: 1.6rem; }
.objective strong, .objective span { display: block; }
.objective span { margin-top: .25rem; color: #62562e; line-height: 1.45; }
.content-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.info-card { padding: 1.15rem; border: 1px solid var(--line); border-radius: 1rem; background: #fbfcfe; }
.info-card h2 { margin: 0 0 .55rem; font-size: 1.05rem; }
.info-card p, .info-card li { color: #44546b; line-height: 1.55; }
.info-card ul { margin: .6rem 0 0; padding-left: 1.15rem; }
.example-box { margin: 1.5rem 0; padding: 1.2rem; border-radius: 1rem; background: #eef4ff; }
.example-box h2 { margin: 0 0 .7rem; font-size: 1rem; }
.example-box blockquote { margin: 0; padding-left: 1rem; border-left: 3px solid var(--blue); color: #30486a; line-height: 1.55; }
.expert-panel { margin: 1.5rem 0; padding: 1.25rem; border: 1px solid #cfc3f4; border-radius: 1rem; background: linear-gradient(145deg, #f8f5ff, #eee9ff); }
.expert-panel h2 { margin: 0 0 .6rem; color: #50398c; font-size: 1.08rem; }
.expert-panel p, .expert-panel li { color: #4d4664; line-height: 1.55; }
.task-preview { margin: 1.5rem 0 0; padding: 1.15rem; border: 2px dashed #b6c2d3; border-radius: 1rem; }
.task-preview h2 { margin: 0 0 .5rem; font-size: 1rem; }
.task-preview p { margin: .35rem 0; color: var(--muted); line-height: 1.5; }
.task-status { display: inline-block; margin-top: .6rem; padding: .3rem .55rem; border-radius: .45rem; color: #8a5a00; background: #fff0bf; font-size: .73rem; font-weight: 800; }
.activity-panel { clear:both; margin:1.8rem 0 0; padding:clamp(1rem,3vw,1.5rem); border:1px solid #cbd7e7; border-radius:1.1rem; background:linear-gradient(145deg,#f8fbff,#eef4fb); }
.activity-heading { display:flex; align-items:center; gap:.8rem; margin-bottom:1rem; }.activity-heading h2 { margin:.1rem 0 0; }.activity-heading .eyebrow { color:#2461a5; }
.activity-symbol { display:grid; place-items:center; flex:0 0 44px; height:44px; border-radius:.8rem; color:#fff; background:linear-gradient(135deg,var(--blue),var(--violet)); font-size:1.35rem; }
.question-card { margin:1rem 0; padding:1rem; border:1px solid var(--line); border-radius:.9rem; background:#fff; }.question-card legend { padding:0 .35rem; font-weight:800; line-height:1.4; }
.option-list { display:grid; gap:.55rem; margin-top:.65rem; }.answer-option,.position-option { display:flex; align-items:center; gap:.7rem; width:100%; padding:.75rem; border:1px solid #c9d5e5; border-radius:.75rem; color:var(--ink); text-align:left; background:#fff; cursor:pointer; }
.answer-option:hover,.position-option:hover { border-color:var(--blue); background:#f3f7ff; }.answer-option span { display:grid; place-items:center; flex:0 0 30px; height:30px; border-radius:50%; color:#1d579e; background:#e7f0ff; font-weight:900; }
.answer-option.correct { border-color:var(--green); background:#e9f8f2; }.answer-option.wrong { border-color:var(--red); background:#fff0f1; }.answer-option:disabled { opacity:1; cursor:default; }
.feedback { margin-top:.7rem; padding:.75rem; border-radius:.65rem; line-height:1.45; }.feedback.success { color:#155945; background:#dff5ed; }.feedback.retry { color:#7f3038; background:#ffeaec; }
.dilemma-question { margin:1rem 0; padding:1.1rem; border-left:5px solid var(--violet); border-radius:.7rem; background:#f0ebff; font-size:1.15rem; font-weight:800; }.dilemma-panel h3 { margin:1.25rem 0 .65rem; font-size:1rem; }
.position-list { display:grid; gap:.55rem; }.position-option.selected { color:#fff; border-color:var(--blue); background:var(--blue); }
.criteria-list { display:flex; flex-wrap:wrap; gap:.55rem; }.criteria-list label { padding:.55rem .7rem; border:1px solid #ccd7e5; border-radius:999px; background:#fff; cursor:pointer; }
.notes-label { display:grid; gap:.35rem; margin-top:1rem; font-weight:800; }.notes-label small { color:var(--muted); font-weight:500; }.notes-label textarea { width:100%; padding:.75rem; border:1px solid #bccbdd; border-radius:.7rem; resize:vertical; font:inherit; }
.partner-button,.start-button { display:inline-flex; margin-top:1rem; padding:.8rem 1rem; border:0; border-radius:.75rem; color:#fff; text-decoration:none; background:var(--blue); cursor:pointer; font-weight:800; }.partner-button:disabled { opacity:.45; cursor:not-allowed; }
.partner-box { margin-top:1rem; padding:1rem; border:1px solid #95d9c4; border-radius:.9rem; background:#e7f8f2; }.partner-box li { margin:.4rem 0; }
.contract-box { margin-top:1.4rem; padding:1rem; border-radius:.9rem; background:#fff7dd; }.contract-box .eyebrow { color:#825d00; }.contract-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; }.contract-list label { display:flex; gap:.6rem; padding:.7rem; border:1px solid #ead48b; border-radius:.7rem; background:#fff; cursor:pointer; }.privacy-note { color:#6a5c32; font-size:.8rem; }
.klar-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; margin-top: 1.5rem; }
.klar-item { padding: .8rem; border-radius: .8rem; background: #f1f5fa; font-size: .8rem; line-height: 1.35; }
.klar-item strong { display: block; margin-bottom: .25rem; color: var(--blue); font-size: 1.3rem; }
.lesson-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; width: min(1050px, 100%); margin: 1rem auto 0; }
.nav-button { display:inline-flex; align-items:center; min-height: 48px; padding: .7rem 1rem; border-radius: .8rem; text-decoration:none; cursor: pointer; font-weight: 800; }
.nav-button.primary { justify-self: end; color: #fff; border: 0; background: var(--blue); }
.nav-button.secondary { justify-self: start; color: var(--ink); border: 1px solid var(--line); background: #fff; }
.nav-button:disabled { opacity: .4; cursor: not-allowed; }
#positionText { color: var(--muted); font-size: .82rem; }
.focus-mode .sidebar { display: none; }
.focus-mode { grid-template-columns: 1fr; }
.focus-mode main { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }
button:focus-visible, a:focus-visible { outline: 3px solid #f5bf47; outline-offset: 2px; }
.landing-page { min-height:100vh; background:radial-gradient(circle at 80% 5%,#dcd4ff 0,transparent 29%),var(--canvas); }.landing-shell { width:min(1200px,calc(100% - 2rem)); margin:0 auto; padding:2rem 0 4rem; }
.landing-hero { display:grid; grid-template-columns:1.25fr .75fr; align-items:center; min-height:390px; padding:clamp(1.5rem,5vw,4rem); overflow:hidden; border-radius:1.6rem; color:#fff; background:linear-gradient(135deg,#12223d,#234f87); box-shadow:var(--shadow); }.landing-copy .eyebrow { color:#8fc0ff; }.landing-copy h1 { margin:.25rem 0 .8rem; font-size:clamp(2.8rem,8vw,5.5rem); line-height:.95; }.landing-copy>p:not(.eyebrow) { max-width:650px; color:#d5e2f2; font-size:1.16rem; line-height:1.55; }
.landing-machine { position:relative; min-height:280px; }.machine-core { position:absolute; z-index:3; left:50%; top:50%; display:grid; place-items:center; width:115px; height:115px; transform:translate(-50%,-50%); border:2px solid #9dccff; border-radius:32%; background:linear-gradient(135deg,#276ed3,#7456d8); box-shadow:0 0 60px rgba(111,161,255,.55); font-size:2rem; font-weight:900; }.orbit { position:absolute; left:50%; top:50%; border:1px solid rgba(255,255,255,.35); border-radius:50%; transform:translate(-50%,-50%); }.orbit-a { width:220px; height:150px; }.orbit-b { width:150px; height:230px; }.badge { position:absolute; z-index:4; display:grid; place-items:center; width:42px; height:42px; border-radius:50%; color:#17345a; background:#fff; font-weight:900; }.badge-a { left:12%; top:25%; }.badge-b { right:10%; top:20%; color:#17644d; }.badge-c { right:18%; bottom:12%; color:#9a3d47; }
.landing-content { margin-top:2rem; padding:clamp(1.2rem,4vw,2.5rem); border-radius:1.3rem; background:#fff; box-shadow:var(--shadow); }.landing-content .eyebrow { color:var(--blue); }.landing-content h2 { margin:.2rem 0; }.overview-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.65rem; margin-top:1.5rem; }.overview-grid a { display:flex; align-items:center; gap:.65rem; padding:.8rem; border:1px solid var(--line); border-radius:.75rem; color:var(--ink); text-decoration:none; font-weight:700; }.overview-grid a:hover { border-color:var(--blue); background:#f1f6ff; }.overview-grid span { display:grid; place-items:center; flex:0 0 34px; height:34px; border-radius:50%; color:#fff; background:var(--blue); font-size:.75rem; }
.klar-explainer { display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem; margin-top:1rem; }.klar-explainer div { padding:1rem; border-radius:.9rem; background:#fff; box-shadow:0 5px 18px rgba(25,44,75,.08); }.klar-explainer strong,.klar-explainer span { display:block; }.klar-explainer strong { color:var(--blue); font-size:1.5rem; }
@media (max-width: 820px) {
  .app-shell { grid-template-columns: 1fr; }
  #menuButton { display: inline-grid; place-items: center; }
  .sidebar { position: fixed; inset: 72px auto 0 0; z-index: 30; width: min(88vw, 330px); height: calc(100dvh - 72px); transform: translateX(-105%); transition: transform .22s ease; box-shadow: 12px 0 30px rgba(16,30,51,.2); }
  .sidebar.open { transform: translateX(0); }
  .backdrop { position: fixed; inset: 72px 0 0; z-index: 25; background: rgba(9,18,31,.5); }
  .backdrop:not([hidden]) { display: block; }
  main { padding: 1rem; }
  .content-grid { grid-template-columns: 1fr; }
  .station-illustration { width:100%; margin:0 0 1.2rem; }
  .klar-strip { grid-template-columns: repeat(2, 1fr); }
  .contract-list { grid-template-columns:1fr; }
  .landing-hero { grid-template-columns:1fr; }.landing-machine { min-height:220px; }.overview-grid { grid-template-columns:1fr 1fr; }
  .text-button { font-size: .75rem; }
  .brand div span { display: none; }
}
@media (max-width: 520px) {
  .topbar { padding: 0 .7rem; gap: .55rem; }
  .brand-mark { width: 36px; height: 36px; }
  .brand strong { font-size: .9rem; }
  .lesson-card { padding: 1.15rem; border-radius: 1rem; }
  .lesson-footer { grid-template-columns: 1fr 1fr; }
  #positionText { grid-column: 1 / -1; grid-row: 1; text-align: center; }
  .nav-button.secondary { grid-column: 1; grid-row: 2; }
  .nav-button.primary { grid-column: 2; grid-row: 2; }
  .overview-grid { grid-template-columns:1fr; }.klar-explainer { grid-template-columns:1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }