:root{--font-display:var(--font-head);}
.pn-intro--one{grid-template-columns:1fr}
/* ===== Privatnorsk-Design-Rahmen (tokens.css + components.css), nur Theme Midnattssol ===== */
:root,[data-theme="midnattssol"]{
  color-scheme:light;
  --pn-red:#B84A4F; --pn-red-hover:#9E3D42; --pn-navy:#263759; --pn-navy-2:#1B2945; --pn-navy-3:#34466B;
  --pn-white:#FFFFFF; --pn-snow:#F3F2EF; --pn-paper:#F3EFE8; --pn-rose:#E9B9B7; --pn-rose-soft:#F3D3D1; --pn-sun:#F2B36B;
  --bg:#F3F2EF; --head:#F3F2EF; --ink:#263759; --muted:#4A5470; --muted2:#59627C;
  --card:#FFFFFF; --line:#DCD8CF; --chip:#EAE8E2; --soft:#F3F2EF; --dim:#8A91A6; --rose-soft:#F3D3D1;
  --accent-t:#B84A4F; --hl:#F2B36B;
  --ok:#17653F; --ok-bg:#DAF2E4; --bad:#A8231B; --bad-bg:#FDE1DE;
  --n-bg:#F7E7D2; --n-h:#263759; --n-tile:#FFF5E8; --n-mtn:#E9C9A7;
  --q-bg:#263759; --q-ink:#F3F2EF; --q-muted:#C6CCDB; --q-kick:#E9B9B7; --q-line:rgba(243,242,239,.28);
  --btn-bg:var(--pn-red); --btn-bg-hover:var(--pn-red-hover); --btn-ink:#FFFFFF;
  /* ERGÄNZT für diese Übung: Ziel-Markierung (Ocker statt --hl, weil --hl nur 1.7:1 hat).
     #A8710E: 3.87:1 auf --n-tile #FFF5E8, 4.17:1 auf Weiß, 3.73:1 auf --soft */
  --target:#A8710E; --target-bg:#FFF5E8;
  --font-display:'Schibsted Grotesk',system-ui,sans-serif; --font-body:'Figtree',system-ui,sans-serif;
  --fw-regular:400; --fw-medium:500; --fw-semi:600; --fw-bold:700;
  --body-size:17px; --body-lh:1.55; --tracking-display:-0.025em; --tracking-kicker:0.02em;
  --fs-h1:clamp(40px,5.2vw,62px); --lh-h1:1.04; --fs-h3:clamp(22px,2.4vw,27px); --lh-h3:1.2;
  --fs-lead-s:19px; --fs-body:17px; --fs-sm:15px; --fs-xs:14px; --fs-xxs:13px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px;
  --pad-card:clamp(22px,3vw,32px); --wrap-read:860px; --wrap-pad:24px;
  --r-sm:8px; --r-lg:16px; --r-xl:20px; --r-2xl:24px; --r-3xl:32px; --r-pill:40px; --r-round:50%;
  --border:1px solid var(--line); --border-ui:1.5px solid var(--line);
  --focus-ring:2px solid var(--pn-red); --focus-offset:3px;
  --tap-min:44px; --btn-h:48px; --opt-h:52px;
  --ease-out:cubic-bezier(.3,0,.2,1); --ease-move:cubic-bezier(.5,0,.15,1); --ease-draw:cubic-bezier(.6,0,.2,1);
  --dur-fast:.2s; --dur-base:.25s; --dur-slow:.45s; --dur-enter:.6s; --rise-y:20px;
  --head-h:64px;
}
.pn-page{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:var(--body-size);line-height:var(--body-lh);-webkit-text-size-adjust:100%;overflow-x:clip;padding-bottom:120px}
.pn-page *,.pn-page *::before,.pn-page *::after{box-sizing:border-box}
.pn-page h1,.pn-page h2,.pn-page h3{font-family:var(--font-display);font-weight:var(--fw-semi);letter-spacing:var(--tracking-display);margin:0;text-wrap:balance}
.pn-page p{margin:0}
.pn-page a{color:var(--ink);text-underline-offset:.18em}
.pn-page :focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
.pn-page img{max-width:100%;height:auto;display:block}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pn-wrap{max-width:var(--wrap-read);margin:0 auto;padding-left:max(var(--wrap-pad),env(safe-area-inset-left,0px));padding-right:max(var(--wrap-pad),env(safe-area-inset-right,0px))}

/* Kopf mit Wortmarke wie auf der Website */
.pn-head{position:sticky;top:0;z-index:20;background:var(--head);border-bottom:var(--border)}
.pn-head__in{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);min-height:var(--head-h)}
.pn-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);min-height:var(--tap-min)}
.pn-brand svg{width:38px;height:38px;flex:none}
.pn-brand__name{font-family:'Schibsted Grotesk',sans-serif;font-weight:700;font-size:21px;letter-spacing:-0.02em}
.pn-head__prog{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--hl);transform-origin:0 50%;transform:scaleX(var(--p,0));transition:transform var(--dur-slow) var(--ease-move)}
.pn-nav{display:flex;gap:4px}
.pn-nav a{display:inline-flex;align-items:center;min-height:var(--tap-min);padding:0 14px;border-radius:var(--r-pill);font-size:var(--fs-sm);font-weight:var(--fw-medium);text-decoration:none;color:var(--muted)}
.pn-nav a:hover{background:var(--chip);color:var(--ink)}
@media (max-width:600px){.pn-nav{display:none}}

/* Einleitung */
.pn-intro{padding:var(--sp-12) 0 var(--sp-8);display:grid;gap:var(--sp-8);align-items:center}
@media (min-width:760px){.pn-intro{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}}
.pn-intro__txt{display:flex;flex-direction:column;gap:var(--sp-4)}
.pn-kicker{font-size:var(--fs-sm);font-weight:var(--fw-semi);color:var(--accent-t);letter-spacing:var(--tracking-kicker)}
.pn-title{font-size:var(--fs-h1);line-height:var(--lh-h1)}
.pn-lead{font-size:var(--fs-lead-s);color:var(--muted);max-width:32em}
.pn-meta{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:var(--fs-sm);color:var(--muted);padding-top:var(--sp-4);border-top:var(--border)}
.pn-hl{position:relative;display:inline-block;white-space:nowrap}
.pn-hl::after{content:"";position:absolute;left:-2%;right:-2%;bottom:-.06em;height:.14em;border-radius:1em;background:var(--hl);transform-origin:0 50%;animation:pn-draw 1.1s .3s var(--ease-draw) both}
@keyframes pn-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.pn-ill{margin:0;border-radius:var(--r-xl);overflow:hidden;border:var(--border);background:var(--card)}
.pn-ill img{width:100%;aspect-ratio:16/9;object-fit:cover}
.pn-toc{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 var(--sp-8)}
.pn-toc a,.t3-jump a{display:inline-flex;align-items:center;gap:8px;min-height:var(--tap-min);padding:0 18px;border-radius:var(--r-pill);border:var(--border-ui);background:var(--card);font-size:var(--fs-sm);font-weight:var(--fw-semi);text-decoration:none;color:var(--ink);transition:border-color var(--dur-fast)}
.pn-toc a:hover,.t3-jump a:hover{border-color:var(--ink)}
.pn-toc b{font-family:var(--font-display);font-weight:var(--fw-semi)}

/* Karten: Radius 20, Linie statt Schatten */
.pn-stack{display:flex;flex-direction:column;gap:var(--sp-8)}
.pn-card{background:var(--card);color:var(--ink);border-radius:var(--r-xl);border:var(--border);padding:var(--pad-card);display:flex;flex-direction:column;gap:var(--sp-4);scroll-margin-top:calc(var(--head-h) + 12px)}
.pn-task__head{display:flex;gap:var(--sp-4);align-items:center}
.pn-num{flex:none;width:46px;height:46px;border-radius:var(--r-round);background:var(--pn-navy);color:var(--pn-snow);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:var(--fw-semi);font-size:18px}
.pn-task__title{font-size:var(--fs-h3);line-height:var(--lh-h3)}
.pn-task__pts{display:block;font-family:var(--font-body);font-size:var(--fs-xs);font-weight:var(--fw-semi);letter-spacing:var(--tracking-kicker);color:var(--muted2);margin-bottom:2px}
.pn-task__instr{color:var(--muted)}
.pn-task__instr strong{color:var(--ink);font-weight:var(--fw-semi)}
.t3-sub{font-weight:var(--fw-semi);color:var(--ink)}

/* Buttons */
.pn-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--btn-h);padding:0 22px;border-radius:var(--r-3xl);font-family:inherit;font-weight:var(--fw-semi);font-size:16px;line-height:1.2;text-decoration:none;border:0;cursor:pointer;touch-action:manipulation;white-space:nowrap;transition:background-color var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast),transform var(--dur-fast)}
.pn-btn:active{transform:translateY(1px)}
.pn-btn--primary{background:var(--btn-bg);color:var(--btn-ink)}
.pn-btn--primary:hover{background:var(--btn-bg-hover)}
.pn-btn--ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.pn-btn--ghost:hover{background:var(--ink);color:var(--bg)}
.pn-btn svg{flex:none}

/* Wortspeicher: durchgehende Chip-Fläche, sticky */
.bankwrap{position:sticky;top:calc(var(--head-h) + 1px);z-index:6;margin:0 calc(var(--pad-card) * -.35);padding:8px 0;background:var(--card)}
.bank{display:flex;flex-wrap:wrap;gap:8px;padding:10px;background:var(--chip);border-radius:var(--r-xl)}
.chip{flex:none;display:inline-flex;align-items:center;min-height:var(--tap-min);padding:0 16px;border-radius:var(--r-pill);border:1.5px solid var(--muted2);background:var(--card);color:var(--ink);font:inherit;font-size:16px;font-weight:var(--fw-semi);cursor:grab;user-select:none;-webkit-user-select:none;touch-action:manipulation;transition:background-color var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast)}
.chip:hover{border-color:var(--ink)}
.chip.selected{background:var(--pn-navy);color:var(--pn-snow);border-color:var(--pn-navy)}
.chip.used{background:transparent;color:var(--muted2);border-style:dashed;text-decoration:line-through}
.hint{font-size:var(--fs-sm);color:var(--muted);padding:8px 4px 0}
.hint:empty{display:none}

/* Lücken */
ol.gaps{margin:0;padding-left:1.7em;display:flex;flex-direction:column;gap:14px;line-height:2.1}
ol.gaps li::marker{font-weight:var(--fw-semi);color:var(--muted2)}
.gw{white-space:nowrap}
.gf{position:relative;display:inline-block;vertical-align:baseline}
.gap{display:inline-block;width:9em;max-width:62vw;min-height:var(--tap-min);vertical-align:baseline;font:inherit;font-size:17px;font-weight:var(--fw-semi);line-height:1.3;text-align:center;color:var(--ink);background:var(--soft);border:0;border-bottom:2px solid var(--ink);border-radius:var(--r-sm) var(--r-sm) 0 0;padding:6px 26px 6px 10px;transition:background-color var(--dur-fast),border-color var(--dur-fast)}
.gap:focus{outline:2px solid var(--ink);outline-offset:2px}
.gap.drop-hover,.gap.target{background:var(--target-bg);border-bottom:3px solid var(--target)}
.gap.ok{background:var(--ok-bg);border-bottom-color:var(--ok);color:var(--ok)}
.gap.bad{background:var(--bad-bg);border-bottom-color:var(--bad);color:var(--bad)}
.gap.revealed{background:var(--chip);border-bottom-color:var(--muted2);color:var(--muted);font-style:italic}
.fb{position:absolute;right:7px;top:50%;transform:translateY(-50%);font-weight:var(--fw-bold);line-height:1;pointer-events:none}
.fb:empty{display:none}
.fb.ok{color:var(--ok)} .fb.bad{color:var(--bad)}
.tr{display:block;font-size:var(--fs-sm);line-height:1.4;color:var(--ok);margin-top:2px}
.tr:empty{display:none}
.tr.rev{color:var(--muted)}
.tr [lang="nb"]{font-weight:var(--fw-semi)}

/* Quiz */
#mc{display:flex;flex-direction:column;gap:14px}
.mc-item{border:var(--border);border-radius:var(--r-lg);padding:16px 18px;display:flex;flex-direction:column;gap:4px}
.mc-q{font-family:var(--font-display);font-weight:var(--fw-semi);font-size:20px;letter-spacing:var(--tracking-display);line-height:1.25}
.mc-ctx{color:var(--muted);font-style:italic;font-size:var(--fs-sm);margin-bottom:8px}
.mc-opts{display:grid;gap:10px}
@media (min-width:600px){.mc-opts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mc-opt{text-align:left;min-height:var(--opt-h);padding:12px 18px;border-radius:var(--r-lg);font:inherit;font-size:16px;cursor:pointer;touch-action:manipulation;background:var(--soft);color:var(--ink);border:var(--border-ui);transition:background-color var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast)}
.mc-opt:hover:not(:disabled){border-color:var(--ink)}
.mc-opt:disabled{cursor:default;color:var(--muted2)}
.mc-opt.ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok);font-weight:var(--fw-semi)}
.mc-opt.bad{background:var(--bad-bg);color:var(--bad);border-color:var(--bad)}
.mc-opt.ok::after{content:" \2713"} .mc-opt.bad::after{content:" \2717"}
.mc-res{font-weight:var(--fw-semi);margin-top:6px;font-size:16px}
.mc-res:empty{display:none}
.mc-res.ok{color:var(--ok)} .mc-res.bad{color:var(--bad)}
.mc-res:not(.ok):not(.bad){color:var(--muted)}

/* Teil 3: Akkordeon A/B/C */
.t3-jump{display:flex;flex-wrap:wrap;gap:8px}
.t3-jump .pg{font-variant-numeric:tabular-nums;color:var(--muted2);font-weight:var(--fw-medium)}
.t3-jump a.done .pg{color:var(--ok);font-weight:var(--fw-semi)}
#t3{display:flex;flex-direction:column;gap:12px}
.t3-group{border:var(--border);border-radius:var(--r-lg);scroll-margin-top:calc(var(--head-h) + 12px)}
.t3-group>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 16px}
.t3-group>summary::-webkit-details-marker{display:none}
.t3-letter{flex:none;width:34px;height:34px;border-radius:var(--r-round);background:var(--chip);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:var(--fw-semi)}
.t3-group.complete .t3-letter{background:var(--ok-bg);color:var(--ok)}
.t3-name{flex:1 1 auto;font-family:var(--font-display);font-weight:var(--fw-semi);font-size:19px;letter-spacing:var(--tracking-display);line-height:1.25}
.t3-prog{flex:none;font-size:var(--fs-sm);font-weight:var(--fw-semi);color:var(--muted2);font-variant-numeric:tabular-nums}
.t3-group.complete .t3-prog{color:var(--ok)}
.t3-group>summary::after{content:"+";flex:none;font-size:26px;line-height:1;font-weight:400;width:20px;text-align:center;transition:transform var(--dur-base)}
.t3-group[open]>summary::after{transform:rotate(45deg)}
.t3-body{padding:0 16px 16px;display:flex;flex-direction:column;gap:12px}
.t3-body .bankwrap{margin:0 -8px}

/* Glossar (Site-FAQ-Muster, standardmäßig zu) */
.pn-details{border-top:var(--border);border-bottom:var(--border)}
.pn-details summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:10px 0;min-height:var(--tap-min);font-family:var(--font-display);font-weight:var(--fw-semi);font-size:17px;color:var(--ink)}
.pn-details summary::-webkit-details-marker{display:none}
.pn-details summary::after{content:"+";font-family:var(--font-body);font-size:26px;line-height:1;font-weight:400;transition:transform var(--dur-base)}
.pn-details[open] summary::after{transform:rotate(45deg)}
.gloss-list{display:grid;gap:0 24px;margin:0 0 16px;padding:0;list-style:none;font-size:var(--fs-sm);color:var(--muted)}
@media (min-width:600px){.gloss-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.gloss-list li{padding:7px 0;border-bottom:var(--border)}
.gloss-list b{color:var(--ink);font-weight:var(--fw-semi)}

/* Punkteleiste (Navy-Aktionsleiste aus dem Rahmen) */
.bar{position:fixed;left:0;right:0;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:15;pointer-events:none}
.bar__in{pointer-events:auto;--ink:var(--q-ink);--bg:var(--q-bg);background:var(--q-bg);color:var(--q-ink);max-width:calc(var(--wrap-read) - 2 * var(--wrap-pad));margin:0 auto;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 22px;border-radius:var(--r-pill)}
.score{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.score__n{font-family:var(--font-display);font-weight:var(--fw-semi);font-size:22px;letter-spacing:-0.02em;font-variant-numeric:tabular-nums}
.score__n .of{color:var(--q-muted);font-size:17px}
.score small{font-size:var(--fs-xxs);color:var(--q-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.score .sm{display:none}
.bar .pn-btn .sm{display:none}
@media (max-width:600px){
  .bar{left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px))}
  .bar__in{max-width:none;padding:6px 6px 6px 18px;gap:6px;border-radius:32px}
  .score .lg,.bar .pn-btn .lg{display:none}
  .score .sm,.bar .pn-btn .sm{display:inline}
  .bar .pn-btn{padding:0 14px;font-size:15px}
}

/* Fuß + Bergkante */
.pn-mountains{display:block;width:100%;height:56px;margin-top:var(--sp-12)}
.pn-mountains path{fill:var(--n-mtn)}
.pn-foot{background:var(--n-mtn);margin-top:-1px;padding:4px 0 40px;font-size:var(--fs-sm);color:var(--n-h)}

/* Mobil */
@media (max-width:600px){
  :root{--wrap-pad:14px}
  .pn-intro{padding:28px 0 20px;gap:20px}
  .pn-card{padding:20px 16px;border-radius:var(--r-xl)}
  .bankwrap{margin:0 -8px}
  .bank{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:thin;padding:8px}
  .chip{scroll-snap-align:start}
  ol.gaps{padding-left:1.6em;line-height:1.95;gap:12px}
  .gap{width:7.2em;padding-right:22px}
  .t3-group>summary{padding:8px 12px;gap:10px}
  .t3-name{font-size:17px}
  .t3-body{padding:0 10px 14px}
  .t3-body .bankwrap{margin:0 -4px}
  .mc-item{padding:14px}
}

/* Motion: dezente Reveals */
@supports (animation-timeline:view()){
  .pn-reveal{animation:pn-rise linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
}
@keyframes pn-rise{from{opacity:.15;transform:translateY(var(--rise-y))}to{opacity:1;transform:none}}
@supports not (animation-timeline:view()){
  .pn-io .pn-reveal{opacity:0;transform:translateY(var(--rise-y));transition:opacity var(--dur-enter) var(--ease-out),transform var(--dur-enter) var(--ease-out)}
  .pn-io .pn-reveal.is-in{opacity:1;transform:none}
}
.pn-pop{animation:pn-in .35s var(--ease-out) both}
@keyframes pn-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (max-width:860px){.pn-reveal{animation:none!important}}
@media (prefers-reduced-motion:reduce){
  .pn-page,.pn-page *{scroll-behavior:auto!important}
  .pn-reveal,.pn-pop,.pn-hl::after{animation:none!important;opacity:1!important;transform:none!important}
  .pn-io .pn-reveal{transition:none!important}
  .pn-head__prog,.t3-group>summary::after,.pn-details summary::after{transition:none}
}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Druck */
@media print{
  .pn-page{font-size:12pt;background:#fff;padding-bottom:0}
  .pn-head{position:static}
  .bar,.pn-toc,.pn-nav,.t3-jump{display:none!important}
  .pn-card{break-inside:auto}
  .bankwrap{position:static}
  .pn-reveal{animation:none!important;opacity:1!important;transform:none!important}
  .gap{background:#fff}
}
.pn-head__in .pn-nav a.cur{color:var(--ink)}
.tabs-wrap{margin:0 0 var(--sp-6);scroll-margin-top:calc(var(--head-h)+8px)}
.tabs{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;padding:4px 2px 10px;scrollbar-width:thin}
@media(min-width:900px){.tabs{flex-wrap:wrap;overflow:visible}}
.tab{flex:none;scroll-snap-align:start;display:inline-flex;align-items:center;gap:8px;min-height:var(--tap-min);padding:0 14px 0 6px;border-radius:var(--r-pill);border:var(--border-ui);background:var(--card);font:inherit;font-size:var(--fs-sm);font-weight:var(--fw-semi);color:var(--ink);cursor:pointer}
.tab b{flex:none;width:32px;height:32px;border-radius:var(--r-round);background:var(--chip);display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:var(--fw-semi)}
.tab[aria-selected="true"]{background:var(--pn-navy);border-color:var(--pn-navy);color:var(--pn-snow)}
.tab[aria-selected="true"] b{background:var(--pn-snow);color:var(--pn-navy)}
.tab.done b{background:var(--ok-bg);color:var(--ok)}
.task-body{display:flex;flex-direction:column;gap:var(--sp-4)}
.panel-nav{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding-top:var(--sp-4);border-top:var(--border)}
.reset-all{display:flex;justify-content:flex-end;margin-top:var(--sp-4)}
.linkbtn{background:none;border:0;padding:8px 0;min-height:var(--tap-min);font:inherit;font-size:var(--fs-sm);color:var(--muted);text-decoration:underline;cursor:pointer}
.instr-de{display:block;margin-top:6px;font-size:var(--fs-xs);color:var(--muted2);font-weight:400}
.instr-audio,.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.learn-box{padding:14px 16px;border-radius:var(--r-lg);background:var(--card);border:var(--border);display:flex;flex-direction:column;gap:8px}
.hint{font-size:var(--fs-sm);color:var(--muted2);margin:0}
.sub{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.foot-links{display:flex;flex-wrap:wrap;gap:0 18px;margin-top:4px!important}
.pn-page .foot-links a{color:var(--n-h);display:inline-flex;align-items:center;min-height:var(--tap-min)}
@media(max-width:600px){.pn-nav{display:flex}.pn-nav a+a{display:none}}
.img-slot{position:relative;display:block;width:100%;max-width:640px;aspect-ratio:16/9;border-radius:var(--r-lg);border:var(--border);background:var(--card);overflow:hidden}
.img-slot img{width:100%;height:100%;object-fit:cover;display:block}
.map-wrap .img-slot{aspect-ratio:900/1100;max-width:420px}
.map-play .map-label{display:none}
.play.playing{background:var(--pn-navy);color:var(--pn-snow);border-color:var(--pn-navy)}
.lis,.quiz{display:flex;flex-direction:column;gap:14px}
.lis-head{display:flex;align-items:center;gap:12px}
.lis-n{width:34px;height:34px;border-radius:var(--r-round);background:var(--chip);display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:var(--fw-semi)}
.mc-item{padding:12px;border:var(--border);border-radius:var(--r-lg);display:flex;flex-direction:column;gap:8px}
.mc-opts{display:flex;flex-wrap:wrap;gap:8px}
.mc-opt{min-height:var(--tap-min);padding:0 16px;border-radius:var(--r-pill);border:var(--border-ui);background:var(--card);font:inherit;font-weight:var(--fw-semi);cursor:pointer}
.mc-opt.ok{border-color:var(--ok);background:var(--ok-bg);color:var(--ok)}
.mc-opt.bad{border-color:var(--bad);background:var(--bad-bg);color:var(--bad)}
.mc-opt:disabled{cursor:default}
.mc-res{font-size:var(--fs-sm);min-height:1.2em}.mc-res.ok{color:var(--ok)}.mc-res.bad{color:var(--bad)}
.mc-q{font-weight:var(--fw-semi);margin:0}
.alpha-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}
.alpha-tile{min-height:56px;border-radius:var(--r-md);border:var(--border-ui);background:var(--card);font:inherit;font-family:var(--font-display);font-size:20px;font-weight:var(--fw-semi);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center}
.alpha-tile small{font-size:11px;font-weight:400;color:var(--muted2)}
.alpha-tile.playing{outline:2px solid var(--pn-navy)}
.bank{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:40px;padding:0 14px;border-radius:var(--r-pill);border:var(--border-ui);background:var(--card);font:inherit;font-weight:var(--fw-semi);cursor:pointer}
.gaps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.gaps li{padding:12px;border:var(--border);border-radius:var(--r-lg);line-height:2.1}
.gap{font:inherit;padding:6px 10px;border:2px dashed var(--muted2);border-radius:8px;background:var(--card);min-height:40px;min-width:7em}
.gap.ok{border-color:var(--ok);border-style:solid}.gap.bad{border-color:var(--bad);border-style:solid}
.fb{font-weight:var(--fw-semi);margin-left:4px}.fb.ok{color:var(--ok)}.fb.bad{color:var(--bad)}
.match-row{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:start}
@media(max-width:560px){.match-row{grid-template-columns:1fr}}
.match-col{display:flex;flex-direction:column;gap:8px}
.match-chip{min-height:var(--tap-min);padding:8px 14px;border-radius:var(--r-pill);border:var(--border-ui);background:var(--card);font:inherit;font-weight:var(--fw-semi);text-align:left;cursor:pointer}
.match-chip.selected{border-color:var(--pn-navy);background:var(--pn-navy);color:var(--pn-snow)}
.match-chip.ok{border-color:var(--ok);background:var(--ok-bg);color:var(--ok)}
.match-mid{color:var(--muted2);text-align:center;padding-top:12px}
.story{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.story-card{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:var(--r-lg);border:var(--border-ui);background:var(--card)}
.story-n{width:30px;height:30px;border-radius:var(--r-round);background:var(--chip);display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:var(--fw-semi)}
.story-nb{font-weight:var(--fw-semi);font-size:17px;margin:0}
.transcript{padding:12px;border-radius:var(--r-lg);background:var(--soft);border:var(--border)}
.mem-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media(max-width:560px){.mem-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mem-card{min-height:88px;border-radius:var(--r-lg);border:var(--border-ui);background:var(--pn-navy);color:var(--pn-snow);font:inherit;font-size:14px;font-weight:var(--fw-semi);cursor:pointer;padding:8px}
.mem-card.face{background:var(--card);color:var(--ink);border-color:var(--ink)}
.mem-card.matched{background:var(--ok-bg);color:var(--ok);border-color:var(--ok)}
.mem-learn{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:6px}
.finale{padding:16px;border-radius:var(--r-xl);background:var(--ok-bg);border:1px solid var(--ok);display:flex;flex-direction:column;gap:8px}

.story .img-slot{max-width:512px}

.img-slot.mem-img{max-width:220px;flex:none}

/* Review Bill 07.11. P2: Touch-Ziele >=44 px, nur Markenfarben Rot/Navy/Weiß/Off-White in Deko */
.chip{min-height:44px}
.mc-opt{min-width:44px;min-height:44px}
@media(min-width:760px){.pn-intro.pn-intro--one{grid-template-columns:1fr}}
:root,[data-theme="midnattssol"]{--hl:#B84A4F;--pn-sun:#B84A4F;--pn-paper:#F3F2EF;--n-bg:#F3F2EF;--n-tile:#FFFFFF;--n-mtn:#FFFFFF;--target:#B84A4F;--target-bg:#FFFFFF}
.mc-item .img-slot.q-thumb{max-width:160px;margin:0 0 8px}

/* Teil 9: reference and questions remain adjacent on wide screens. */
.map-study{display:grid;gap:24px;align-items:start;min-width:0}
.map-reference,.map-questions{min-width:0}
.map-wrap .img-slot{max-width:none;aspect-ratio:900/1100}
.map-wrap .img-slot img{object-fit:contain}
.map-reference .map-caption,.map-reference .map-source{font-size:13px;line-height:1.5;margin:12px 0 0;color:#59627C}
.map-reference .map-source{margin-top:8px}
.map-reference>.pn-btn{margin-top:16px;min-height:44px}
.map-legend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px;font-size:13px;line-height:1.5;color:#263759;font-weight:600}
.map-questions .sub:first-child{margin-top:0}
@media(min-width:900px){.map-study{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}.map-reference{position:sticky;top:calc(var(--head-h) + 16px)}}
@media(max-width:359px){.map-legend{grid-template-columns:repeat(2,minmax(0,1fr))}}

@media(min-width:900px){.pn-wrap:has(.map-study){max-width:1200px}.map-study{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}}

/* Teil 9: large reference map; legend remains readable without CSS. */
.map-wrap .img-slot{aspect-ratio:880/1000;max-width:none}
.map-legend{list-style:none;padding:0;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));font-size:15px;gap:8px 12px}
.map-legend li{padding:8px 12px;background:#F3F2EF;border:1px solid #E3E1DC;border-radius:10px}
@media(min-width:900px){
 .pn-wrap:has(.map-study){max-width:1320px}
 .map-study{grid-template-columns:minmax(0,1.85fr) minmax(280px,1fr);gap:28px}
 .map-reference{top:calc(var(--head-h) + 8px)}
 .map-wrap .img-slot{max-height:85vh}
}

/* All exercise navigation targets: clear the header without a focus jump. */
.pn-task__title{scroll-margin-top:calc(var(--head-h) + 16px)}
.pn-task__title:focus{outline:none}

/* Progress belongs to the exercise flow, never over the map or answers. */
.bar{position:static;inset:auto;z-index:auto;pointer-events:auto;margin:24px 0 16px}
.bar__in{--ink:#263759;--bg:#F3F2EF;max-width:none;margin:0;padding:16px 0;border-radius:0;background:transparent;color:#59627C;border-top:1px solid #E3E1DC;flex-wrap:wrap;gap:12px}
.bar .pn-btn{background:transparent;color:#263759;border:1px solid #BDB7AB}
.bar .pn-btn .lg{display:inline}
.bar .pn-btn .sm{display:none}
@media(max-width:600px){.bar__in{align-items:flex-start}.bar .score{flex-basis:100%;font-size:14px}}