:root {
  color-scheme: light;
  --ink: #1d1d1f;
  --muted: #55555b;
  --light: #f5f5f7;
  --line: #d9d9de;
  --blue: #0071e3;
  --link: #005dbb;
  --sky: #2997ff;
  --font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 66px; }
body { margin: 0; min-width: 0; background: #fff; color: var(--ink); font: 17px/1.53 var(--font); -webkit-font-smoothing: antialiased; }
h1,h2,h3,p,dl,dd,figure { margin: 0; }
a { color: inherit; text-decoration: none; }
button, summary { font: inherit; cursor: pointer; }
a,button,summary { touch-action: manipulation; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex="0"]:focus-visible { outline: 3px solid #228af2; outline-offset: 4px; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
.symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico, .offer-icon { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.wrap { width: min(1120px, calc(100% - 80px)); margin-inline: auto; }
.skip { position: fixed; left: 12px; top: -90px; z-index: 10; padding: 8px 18px; color: white; background: var(--blue); border-radius: 20px; }
.skip:focus { top: 8px; }
.masthead { position: sticky; top: 0; z-index: 5; background: #171719f5; color: #f5f5f7; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.header { max-width: 1000px; display: flex; align-items: center; gap: 54px; min-height: 46px; }
.brand,.primary,.primary a,.badge-aside a,.footer a { display: inline-flex; align-items: center; }
.brand { gap: 6px; font-size: 16px; line-height: 1; letter-spacing: -.055em; }
.brand img { width: 21px; height: auto; } .brand strong { font-weight: 650; }
.primary { flex: 1; justify-content: space-between; gap: 20px; font-size: 12px; letter-spacing: .003em; }
.primary a { min-height: 44px; gap: 6px; color: #dfdfe3; }
.primary a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.badge-link .ico { width: 13px; height: 13px; }
.chapter { padding-block: clamp(62px,7vw,105px); }
.chapter-label { display: flex; gap: .55em; align-items: baseline; justify-content: center; text-align: center; margin-bottom: 10px; }
.mini,.chapter-label,.scene-label { font-size: 13px; font-weight: 600; color: var(--muted); }
.chapter-label span, .mini { color: var(--link); }
.chapter-label span::after { content: " /"; color: #76767e; }
.chapter h1,.closing h1 { font-size: clamp(38px,4.15vw,65px); line-height: 1.055; font-weight: 640; letter-spacing: -.055em; text-wrap: balance; }
.split-heading h1,.rank-intro,.story-band h1,.offers-band h1 { text-align: center; }
.prose { max-width: 730px; margin: 26px auto 0; }
.prose p,.scene-copy p,.dispatch p,.offers p,.rules dd,.rank-list dd,.training p { color: #49494e; }
.prose p + p,.scene-copy p + p,.training p + p { margin-top: .8em; }
.shift-note { max-width: 795px; margin: 32px auto 0; padding: 24px 32px; border-radius: 22px; background: var(--light); }
.shift-note h3,.training summary { font-size: 21px; letter-spacing: -.035em; font-weight: 650; }
.shift-note p { margin-top: 6px; color: #49494e; }
.story-band,.offers-band { background: var(--light); }
.section-deck,.rank-intro > p { max-width: 660px; margin: 14px auto 0; color: var(--muted); font-size: clamp(18px,1.6vw,22px); line-height: 1.4; text-align: center; letter-spacing: -.025em; }
.dispatch { display: grid; grid-template-columns: 1.2fr 1fr; align-items: stretch; margin: 36px 0 16px; border-radius: 28px; overflow: hidden; background: #19191b; color: white; }
.dispatch figure { min-height: 290px; }
.dispatch img { height: 100%; width: 100%; object-fit: cover; }
.dispatch > div { padding: clamp(26px,4vw,60px); align-self: center; }
.scene-label,.story-pic figcaption { letter-spacing: .005em; }
.dispatch .scene-label { color: #e8b38b; }
.dispatch h3,.scene-copy h3,.offers h3 { margin-top: 8px; font-size: clamp(25px,2.35vw,36px); line-height: 1.15; letter-spacing: -.045em; }
.dispatch p { margin-top: 14px; color: #e1e1e4; }
.story-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.story-step,.offers article { border-radius: 24px; overflow: hidden; background: #fff; }
.story-pic img { width: 100%; height: auto; aspect-ratio: 1.8; object-fit: cover; }
.story-pic figcaption { margin: 22px 28px 0; color: var(--muted); font-size: 13px; font-weight: 600; }
.folio { color: var(--link); padding-right: .6em; } .folio i,.footer i { font-style: normal; }
.scene-copy { padding: 0 28px 30px; }
.scene-copy h3 { margin-bottom: 12px; }
.tabs { width: fit-content; max-width: 100%; display: flex; gap: 3px; padding: 4px; background: #eaeaec; border-radius: 30px; margin: 30px auto 24px; }
.tabs button { border: 0; background: transparent; color: var(--ink); padding: 9px 17px; font-size: 15px; line-height: 1.3; border-radius: 24px; }
.tabs button[aria-selected="true"] { background: #fff; box-shadow: 0 1px 5px #0002; font-weight: 600; }
.tabs button:hover { color: var(--link); }
.rank-panel,.training { max-width: 890px; margin-inline: auto; }
.rank-panel h3 { margin-block: 1.5rem .5rem; }
.tabs:not([hidden]) ~ .rank-panel h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(100%); margin: 0; }
.rank-list > div { display: grid; grid-template-columns: minmax(180px,.7fr) 1.3fr; column-gap: 22px; padding: 19px 5px; border-bottom: 1px solid var(--line); }
.rank-list dt { display: flex; align-items: baseline; gap: 14px; font-size: 19px; font-weight: 620; letter-spacing: -.032em; }
.rank-list small { color: var(--link); font-size: 13px; font-variant-numeric: tabular-nums; }
.training { margin-top: 28px; padding: 0 24px; background: var(--light); border-radius: 16px; }
.training summary { display: flex; align-items: center; justify-content: space-between; gap: 15px; list-style: none; padding-block: 19px; }
.training summary::-webkit-details-marker { display: none; }
.training summary::after { content: "+"; color: var(--link); font-weight: 400; font-size: 25px; line-height: 1; }
.training[open] summary::after { content: "−"; }
.training p:last-child { padding-bottom: 24px; }
.offers { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin-top: 36px; }
.offers article { padding: clamp(23px,2.6vw,37px); }
.offer-icon { display: block; width: 40px; height: 40px; color: var(--blue); margin-bottom: 23px; }
.offers article:nth-child(2) .offer-icon { color: #a34a22; }
.offers article:nth-child(3) .offer-icon { color: #007264; }
.offers h3 { margin: 6px 0 12px; font-size: clamp(24px,2.1vw,31px); }
.rules { max-width: 760px; margin: 23px auto 0; }
.rules > div { padding: 17px 0; border-bottom: 1px solid var(--line); }
.rules dt { font-size: 20px; font-weight: 650; letter-spacing: -.032em; margin-bottom: 2px; }
.goals { border-top: 1px solid var(--line); }
.closing { color: #f5f5f7; background: #101012; text-align: center; }
.closing-inner { padding-block: clamp(60px,7vw,100px); }
.closing .chapter-label,.closing .chapter-label span { color: #a5cfff; }
.closing h1 { margin-bottom: 22px; }
.closing p { max-width: 690px; margin-inline: auto; color: #dddde1; font-size: 18px; }
.closing .signoff { margin-top: 18px; }
.badge-aside { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 27px; }
.badge-aside img { width: 44px; height: auto; }
.badge-aside a { color: #87c4ff; gap: 6px; font-size: 15px; }
.footer { display: flex; align-items: center; justify-content: space-between; gap: 10px 24px; padding-block: 22px; color: var(--muted); font-size: 13px; }
.footer i { margin: 0 4px; color: #949499; } .footer a { gap: 4px; }
@media (max-width: 800px) {
  .wrap { width: calc(100% - 48px); }
  .header { gap: 28px; } .primary { gap: 14px; }
  .dispatch { grid-template-columns: 1fr 1fr; } .dispatch > div { padding: 24px; }
  .offers { grid-template-columns: 1fr; } .offers article { padding: 25px; }
  .offer-icon { width: 32px; height: 32px; margin-bottom: 12px; }
}
@media (max-width: 640px) {
  .wrap { width: calc(100% - 36px); }
  .header { min-height: 48px; gap: 13px; }
  .primary { gap: 12px; justify-content: flex-end; } .primary a { font-size: 12px; }
  .chapter { padding-block: 56px; }
  .chapter h1,.closing h1 { font-size: clamp(34px,8.3vw,45px); }
  .chapter-label { margin-bottom: 8px; }
  .shift-note { padding: 21px; }
  .dispatch,.story-grid { grid-template-columns: 1fr; }
  .dispatch { margin-top: 25px; } .dispatch figure { min-height: 0; }
  .dispatch img { aspect-ratio: 1.85; height: auto; }
  .dispatch,.story-step,.offers article { border-radius: 18px; }
  .story-pic figcaption { margin: 18px 20px 0; } .scene-copy { padding: 0 20px 22px; }
  .tabs { gap: 0; margin-block: 20px 12px; }
  .tabs button { font-size: 13px; padding: 9px 11px; }
  .rank-list > div { grid-template-columns: 1fr; gap: 4px; padding: 15px 0; }
  .rank-list dt { gap: 9px; }
  .training { padding: 0 17px; } .training summary { font-size: 18px; }
  .footer { align-items: flex-start; flex-wrap: wrap; }
}
@media (max-width: 360px) {
  .primary { gap: 8px; }
  .header { gap: 8px; }
  .tabs button { padding-inline: 8px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }



/* The story is a linear, readable sequence before any enhancement. */
.film { color: #f5f5f7; background: #0b0c0e; position: relative; isolation: isolate; }
.film-stage { display: none; }
.film-step { position: relative; scroll-margin-top: 0; padding-bottom: 38px; }
.film-intro,.film-copy { width: min(850px,calc(100% - 40px)); margin-inline: auto; }
.film-intro { padding: 42px 0 26px; }
.film-series,.chapter-kicker,.film-index,.card-no { font-size: 12px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; }
.film-series { color: #ede3d0; } .film-series span { color: #e0a771; margin: 0 4px; }
.film h1 { font-size: clamp(37px,6.4vw,90px); font-weight: 640; line-height: .99; letter-spacing: -.058em; }
.film h1 span { display: block; }
.film-intro h1 { margin-top: 11px; }
.scene-still { width: min(100%,850px); margin-inline: auto; }
.scene-still img { height: auto; aspect-ratio: 1.76; width: 100%; object-fit: cover; }
.film-copy { padding-top: 24px; }
.film-index { display: flex; align-items: center; gap: 9px; color: #f1c896; margin-bottom: 7px; }
.film-index span { width: 21px; height: 2px; background: currentColor; }
.film-copy h2 { font-size: clamp(32px,3.8vw,58px); line-height: 1.07; letter-spacing: -.045em; }
.scene-text { max-width: 48ch; margin-top: 12px; color: #f0eeeb; font-size: clamp(16px,1.35vw,20px); line-height: 1.5; }
.story-next { display: inline-flex; align-items: center; gap: 9px; margin-top: 18px; min-height: 40px; padding: 7px 15px; color: white; border: 1px solid #aaa9a8; border-radius: 32px; font-size: 14px; }
.story-next:hover { background: #ffffff24; }
.is-cinematic { --stage-height: calc(100svh - 46px); }
.is-cinematic .film-stage { display: block; position: sticky; top: 46px; height: var(--stage-height); z-index: 0; overflow: hidden; background: #101011; }
.film-frame { position: absolute; inset: 0; } .film-frame + .film-frame { opacity: 0; }
.film-frame img { display: block; height: 100%; width: 100%; object-fit: cover; object-position: 56% 47%; }
.film-stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(4,7,10,.92) 0%,rgba(4,7,10,.77) 30%,rgba(4,7,10,.52) 49%,rgba(4,7,10,.04) 76%),linear-gradient(0deg,#08090b66,transparent 28%); }
.is-cinematic .film-steps { position: relative; margin-top: calc(-1 * var(--stage-height)); }
.is-cinematic .film-step { min-height: var(--stage-height); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 26px max(5.8vw,calc((100vw - 1500px)/2)); }
.is-cinematic .film-intro,.is-cinematic .film-copy { width: min(51vw,690px); margin: 0; }
.is-cinematic .film-intro { padding: 0 0 clamp(22px,4vh,48px); }
.is-cinematic .film-intro h1 { font-size: clamp(44px,min(5.35vw,9.4vh),82px); }
.is-cinematic .film-step:first-child h2 { font-size: clamp(29px,2.5vw,40px); }
.is-cinematic .film-copy { padding-top: 0; }
.is-cinematic .scene-still { display: none; }
.directory { background: var(--light); padding-block: clamp(52px,6.5vw,95px); }
.directory-head { margin-bottom: 30px; }
.chapter-kicker,.card-no { color: var(--link); }
.directory h2 { margin-block: 6px 12px; font-size: clamp(35px,4.3vw,64px); line-height: 1.05; letter-spacing: -.056em; }
.directory-head > p { color: var(--muted); }
.chapter-cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.chapter-card { display: flex; flex-direction: column; min-width: 0; background: #fff; border-radius: 22px; overflow: hidden; box-shadow: 0 2px 9px #00000007; }
.card-art { display: grid; grid-template: minmax(0,1fr) / minmax(0,1fr); place-items: center; height: clamp(140px,14vw,200px); overflow: hidden; }
.card-art img { width: 100%; height: 100%; object-fit: cover; }
.art-rettungswagen { background: #000; } .art-rettungswagen img { object-fit: contain; width: 96%; height: auto; }
.art-abzeichen { background: radial-gradient(ellipse at 45% 20%,#344f56,#10272e); }
.art-abzeichen img { width: 126px; height: 76%; object-fit: contain; }
.art-aid { color: #7e430d; background: linear-gradient(125deg,#f5e8db,#e7c395); }
.art-radio { color: #343e67; background: linear-gradient(125deg,#dce1ee,#b0bedd); }
.art-route { color: #185950; background: linear-gradient(125deg,#e3efeb,#a8cfc1); }
.motif-icon { width: 30%; height: 58%; fill: none; stroke: currentColor; stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; }
.card-copy { position: relative; padding: 20px 42px 24px 23px; }
.card-copy h3 { margin: 4px 0 6px; font-size: clamp(21px,1.9vw,28px); line-height: 1.13; letter-spacing: -.042em; }
.card-copy p { color: var(--muted); font-size: 15px; line-height: 1.45; } .card-no { font-size: 10px; }
.card-arrow { position: absolute; right: 15px; top: 25px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #f0f1f4; color: var(--link); }
.card-arrow svg { width: 13px; }
.reader-bar,.chapter-nav { display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.reader-bar { min-height: 54px; border-bottom: 1px solid var(--line); font-size: 14px; }
.reader-bar span { color: var(--muted); font-variant-numeric: tabular-nums; }
.reader-bar a,.chapter-nav a { color: var(--link); } .reader-bar a:hover,.chapter-nav a:hover { text-decoration: underline; }
.reader .chapter { padding-block: clamp(43px,5vw,80px); }
.reader .prose h3 { font-size: 24px; line-height: 1.22; letter-spacing: -.035em; margin-bottom: 8px; }
.conversation { margin-block: 12px; }
.conversation dt { font-size: 14px; color: var(--link); font-weight: 600; }
.conversation dd { margin-bottom: 8px; }
.offers p+p,.shift-note p+p,.closing p+p { margin-top: 12px; }
.chapter-nav { padding-block: 24px; border-block: 1px solid var(--line); font-size: 15px; }
.next-page { display: block; text-align: right; font-size: 18px; font-weight: 600; }
.next-page small { display: block; font-size: 12px; color: var(--muted); font-weight: 400; } .next-page .ico { width: 13px; }
@media (min-width: 641px) {
  .chapter-card:last-child { grid-column: 1 / -1; flex-direction: row; align-items: center; }
  .chapter-card:last-child .card-art { width: 41%; flex: none; }
  .chapter-card:last-child .card-copy { flex: 1; padding-inline: 30px 48px; }
}
@media (max-width: 799px) {
  .chapter-cards { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .film-step { scroll-margin-top: 0; }
}
@media (max-width: 640px) {
  .primary .nav-extra { display: none; }
  .chapter-cards { grid-template-columns: 1fr; }
  .card-art { height: auto; aspect-ratio: 2.2; }
  .film-series { font-size: 10px; }
  .film-copy h2 { font-size: 32px; } .scene-text { font-size: 17px; }
  .next-page { font-size: 16px; }
}
@media (max-width: 360px) { .brand img { width: 17px; } .header .primary a { gap: 2px; font-size: 11px; } }
@media (prefers-reduced-motion: no-preference) {
  .reader main,.has-arrived .film-copy,.has-arrived .scene-still { animation: rise-in .5s ease-out both; }
  .chapter-card,.card-art img,.card-art .motif-icon { transition: transform .22s ease, box-shadow .22s ease; }
  .chapter-card:is(:hover,:focus-visible) { transform: translateY(-3px); box-shadow: 0 12px 24px #0a17370f; }
  .chapter-card:is(:hover,:focus-visible) .card-art > * { transform: scale(1.035); }
  @keyframes rise-in { from { opacity: .2; transform: translateY(9px); } to { opacity: 1; transform: none; } }
}