/* MapRaiders story kit, shared stylesheet. Source of truth for the dark story look of the live start page (docs/en/index.html, a7488bd1). Tokens follow the landing page plan chapter 3; camp colours per `welt`. Markup comes from seo-strategy/tools/story_bauteile.mjs, motion from /design/story.js. Entrance states only apply under html.mr-js (set inline in , skipped for reduced motion). */ :root{ --ms-bg:#070A0F; --ms-raised:#0E1520; --ms-panel:#141D2A; --ms-text:#E7E9E6; --ms-muted:#98A2AE; --ms-line:#596575; --ms-accent:#3D68C5; --ms-gold:#B18A42; --ms-seam:#0B1220; --ms-ease:cubic-bezier(.16,1,.3,1); /* camp colours, plan chapter 3 */ --welt-unterwelt:#8D263A; --welt-kapital:#B18A42; --welt-antike:#633A73; --welt-ordnung:#244D73; --welt-stahl:#A9B1B8; --welt-stahl-2:#5A8A9C; --welt-zucht:#4B754B; --welt-himmel:#D7D3C7; --welt-abgrund:#050505; --welt-abgrund-2:#B43B24; --ms-lager:var(--ms-accent); --ms-lager-glow:var(--ms-accent); } [data-welt="unterwelt"]{--ms-lager:var(--welt-unterwelt);--ms-lager-glow:#B8435A} [data-welt="kapital"]{--ms-lager:var(--welt-kapital);--ms-lager-glow:var(--welt-kapital)} [data-welt="antike"]{--ms-lager:var(--welt-antike);--ms-lager-glow:#8F5CA3} [data-welt="ordnung"]{--ms-lager:var(--welt-ordnung);--ms-lager-glow:#3E78AD} [data-welt="stahl"]{--ms-lager:var(--welt-stahl);--ms-lager-glow:var(--welt-stahl-2)} [data-welt="zucht"]{--ms-lager:var(--welt-zucht);--ms-lager-glow:#6A9E6A} [data-welt="himmel"]{--ms-lager:var(--welt-himmel);--ms-lager-glow:var(--welt-himmel)} [data-welt="abgrund"]{--ms-lager:var(--welt-abgrund-2);--ms-lager-glow:var(--welt-abgrund-2)} /* ---------- base ---------- */ body.ms-body{margin:0;background:var(--ms-seam);font-family:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased} .ms-story{position:relative;background:var(--ms-bg);color:var(--ms-text);overflow:hidden;font-family:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif} .ms-story *,.ms-story *::before,.ms-story *::after{box-sizing:border-box} .ms-story img{display:block;max-width:100%} .ms-story h1,.ms-story h2,.ms-story h3,.ms-story h4{font-family:'Outfit',sans-serif;color:var(--ms-text);letter-spacing:-1px;margin:0} .ms-story p{color:var(--ms-muted);margin:0} .ms-story a{color:inherit;text-decoration:none} .ms-story :focus-visible{outline:2px solid var(--ms-accent);outline-offset:3px;border-radius:6px} .ms-story::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:80px;background:linear-gradient(180deg,rgba(7,10,15,0),var(--ms-seam));pointer-events:none} .ms-scene{position:relative;max-width:1200px;margin:0 auto;padding:clamp(64px,9vw,110px) 30px} .ms-scene+.ms-scene{border-top:1px solid rgba(89,101,117,.2)} @media(max-width:620px){.ms-scene{padding-left:16px;padding-right:16px}} .ms-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--ms-muted);margin-bottom:20px} .ms-story .ms-eyebrow{color:var(--ms-muted)} .ms-eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ms-accent)} .ms-lede{font-size:clamp(15px,1.4vw,17px);line-height:1.6;max-width:460px;margin:0 0 28px} .ms-story .ms-lede{margin-bottom:28px} /* ---------- buttons, tags ---------- */ .ms-btn{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;font-weight:700;padding:15px 28px;border-radius:11px;text-decoration:none;transition:transform .22s,box-shadow .22s,border-color .22s;font-family:inherit;cursor:pointer;border:0;background:none;line-height:1.2} .ms-story .ms-btn--primary{background:var(--ms-accent);color:#fff;box-shadow:0 10px 30px -8px rgba(61,104,197,.6)} .ms-story .ms-btn--primary:hover{transform:translateY(-2px);box-shadow:0 14px 36px -6px rgba(61,104,197,.7)} .ms-story .ms-btn--secondary{border:1px solid var(--ms-line);color:var(--ms-text)} .ms-story .ms-btn--secondary:hover{border-color:var(--ms-muted);transform:translateY(-2px)} .ms-story .ms-btn:active{transform:translateY(1px);box-shadow:none} .ms-story .ms-btn--primary[style*="none"]+.ms-btn--secondary{background:var(--ms-accent);border-color:var(--ms-accent);color:#fff} .ms-ctas{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;margin:0 0 16px} .ms-tag{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;padding:4px 10px;border-radius:99px;margin-bottom:12px;color:var(--ms-text)} .ms-tag--demo{background:rgba(180,59,36,.22);border:1px solid rgba(180,59,36,.5)} .ms-tag--planned{background:rgba(61,104,197,.2);border:1px solid rgba(61,104,197,.5)} /* ---------- hero ---------- */ .ms-hero{min-height:min(100dvh,920px);display:flex;align-items:center;padding-top:clamp(64px,9vw,110px)} .ms-hero__world{position:absolute;inset:-40px -30px auto -30px;height:120%;z-index:0;opacity:.85;pointer-events:none} .ms-hero__world svg{width:100%;height:100%} .ms-hero__layout{display:flex;flex-wrap:wrap-reverse;align-items:center;gap:44px 48px;width:100%;position:relative;z-index:2;perspective:1100px} .ms-hero__copy{flex:1 1 380px;min-width:260px;position:relative;z-index:2} .ms-hero__copy h1{font-size:clamp(36px,5vw,64px);font-weight:900;line-height:1.03;margin:0 0 18px} .ms-hero__note{font-size:12.5px;color:var(--ms-muted);margin:10px 2px 0} .ms-hero__visual{flex:1 1 300px;min-width:230px;max-width:360px;margin:0 auto;position:relative;z-index:2} @media(max-width:760px){.ms-hero{min-height:auto;padding-top:48px;padding-bottom:40px}.ms-hero__visual{max-width:280px}} /* ---------- scene with side visual ---------- */ .ms-szene__grid{display:flex;flex-wrap:wrap;gap:36px 48px;align-items:center} .ms-szene__copy{flex:1 1 380px;min-width:260px} .ms-szene__copy h2{font-size:clamp(24px,3.2vw,36px);font-weight:800;line-height:1.12;margin:0 0 14px;max-width:600px} .ms-szene__copy p{font-size:15px;line-height:1.65;max-width:540px;margin:0 0 12px} .ms-szene__visual{flex:1 1 300px;min-width:240px;max-width:460px;margin:0 auto} .ms-szene--rechts .ms-szene__grid{flex-direction:row-reverse} .ms-szene__glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 50% at 80% 40%,color-mix(in srgb,var(--ms-lager-glow) 14%,transparent),transparent 70%)} /* ---------- card with entrance ---------- */ .ms-karte{position:relative;width:100%;max-width:var(--ms-karte-max,300px);margin:0 auto} .ms-karte__inner{position:relative;border-radius:16px;overflow:hidden;background:var(--ms-raised);aspect-ratio:var(--ms-ratio,2/3);box-shadow:0 40px 90px -30px rgba(0,0,0,.8),0 0 0 1px rgba(89,101,117,.35)} .ms-karte__inner::before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ms-lager-glow) 45%,transparent);z-index:3;pointer-events:none} .ms-karte__bild{width:100%;height:100%;object-fit:cover;object-position:center top} .ms-karte__scrim{position:absolute;left:0;right:0;bottom:0;top:52%;background:linear-gradient(180deg,rgba(7,10,15,0) 0%,rgba(7,10,15,.75) 42%,rgba(7,10,15,.95) 100%);z-index:1} .ms-karte__caption{position:absolute;left:12px;right:12px;bottom:14px;display:flex;align-items:flex-end;gap:10px;z-index:2} .ms-karte__caption img{width:34px;height:34px;flex-shrink:0;filter:drop-shadow(0 2px 6px rgba(0,0,0,.7))} /* caption order as on the commander card (Zeile 60): COMMANDER, camp, name */ .ms-karte__kicker{display:block;font-size:9.5px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#D8B36A;text-shadow:0 1px 3px rgba(0,0,0,.8);margin-bottom:2px} .ms-karte__lager{display:block;font-size:11.5px;color:var(--ms-muted);letter-spacing:.3px;line-height:1.3} .ms-karte__name{display:block;font-size:16px;font-weight:800;color:#fff;line-height:1.2;margin-top:1px} .ms-faecher{position:relative;display:flex;justify-content:center;align-items:flex-end;padding:10px 0 20px;perspective:1100px} .ms-faecher .ms-karte{--ms-karte-max:230px;flex:0 0 46%;max-width:230px} .ms-faecher .ms-karte:nth-child(1){transform:translateX(18%) rotate(-7deg);z-index:1} .ms-faecher .ms-karte:nth-child(2){z-index:3;margin-bottom:18px} .ms-faecher .ms-karte:nth-child(3){transform:translateX(-18%) rotate(7deg);z-index:2} .ms-faecher .ms-karte:nth-child(2):only-child{transform:none} .ms-faecher .ms-karte:nth-child(1) .ms-karte__caption{right:32%} .ms-faecher .ms-karte:nth-child(3) .ms-karte__caption{left:32%} /* ---------- crest strip ---------- */ .ms-wappen{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px;max-width:980px} .ms-wappen li{margin:0;display:flex} .ms-wappen li>.ms-wappen__item{flex:1} .ms-wappen__item{display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px 6px 14px;border-radius:14px;background:linear-gradient(180deg,var(--ms-raised),rgba(14,21,32,.4));border:1px solid rgba(89,101,117,.22);position:relative;transition:transform .22s,border-color .22s} .ms-wappen__item::after{content:"";position:absolute;left:22%;right:22%;bottom:-1px;height:2px;border-radius:2px;background:var(--ms-lager-glow);opacity:.75} a.ms-wappen__item:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--ms-lager-glow) 55%,transparent)} .ms-wappen__item img{width:56px;height:56px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.6))} .ms-wappen__item span{font-size:12px;font-weight:700;color:var(--ms-text);text-align:center;line-height:1.2} @media(max-width:860px){.ms-wappen{grid-template-columns:repeat(4,minmax(0,1fr))}} @media(max-width:380px){.ms-wappen__item img{width:46px;height:46px}.ms-wappen__item span{font-size:11px}} /* ---------- symbol list ---------- */ .ms-symbole{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;counter-reset:ms-schritt} .ms-symbole li{counter-increment:ms-schritt;display:flex;gap:14px;align-items:flex-start;padding:18px;border-radius:16px;background:var(--ms-panel);border:1px solid rgba(89,101,117,.22)} .ms-symbol{flex:0 0 56px;width:56px;height:56px;display:flex;align-items:center;justify-content:center} .ms-symbol img{width:56px;height:56px;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.6))} .ms-symbol--siegel{border-radius:50%;background:radial-gradient(circle at 50% 38%,#1d1a14,#0b0a08 70%);box-shadow:inset 0 0 0 3px #6d5424,inset 0 0 0 4px #2a2112,inset 0 0 0 6px #9a7a3c,0 4px 10px rgba(0,0,0,.6)} .ms-symbol--siegel::before{content:counter(ms-schritt);font-size:22px;font-weight:800;color:#d8b36a;text-shadow:0 1px 0 #3a2c12} .ms-symbole h3{font-size:16px;font-weight:700;letter-spacing:-.2px;margin:4px 0 6px} .ms-symbole p{font-size:14px;line-height:1.55} /* ---------- commander introduction ---------- */ .ms-commander{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:36px 56px;align-items:start} .ms-commander__bild{position:relative;border-radius:20px;overflow:hidden;box-shadow:0 50px 100px -40px rgba(0,0,0,.85),0 0 0 1px rgba(89,101,117,.3)} .ms-commander__bild img{width:100%;height:auto} .ms-commander__bild::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(180deg,rgba(7,10,15,0),rgba(7,10,15,.8))} .ms-commander__bild img.ms-commander__wappen{position:absolute;left:18px;bottom:18px;width:64px;height:64px;z-index:2;filter:drop-shadow(0 6px 14px rgba(0,0,0,.7))} .ms-commander__copy h2{font-size:clamp(26px,3.4vw,40px);font-weight:800;line-height:1.08;margin:0 0 8px} .ms-commander__beiname{font-size:15px;color:var(--ms-lager-glow);font-weight:600;margin:0 0 20px} .ms-story .ms-commander__beiname{color:var(--ms-lager-glow)} .ms-commander__copy p{font-size:15px;line-height:1.7;margin:0 0 14px;max-width:560px} .ms-commander__fakten{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:22px 0;padding:18px 0;border-top:1px solid rgba(89,101,117,.25);border-bottom:1px solid rgba(89,101,117,.25);font-size:14px} .ms-commander__fakten dt{color:var(--ms-muted);font-weight:600} .ms-commander__fakten dd{margin:0;color:var(--ms-text)} .ms-commander__faehigkeit{display:flex;gap:14px;align-items:flex-start;padding:16px;border-radius:14px;background:rgba(20,29,42,.7);border:1px solid color-mix(in srgb,var(--ms-lager-glow) 35%,transparent);margin:0 0 18px} .ms-commander__faehigkeit img{width:44px;height:44px;flex-shrink:0} .ms-story .ms-commander__faehigkeit p{margin:0;color:var(--ms-text);font-size:14.5px;line-height:1.6} .ms-commander__karte{max-width:240px;margin-top:8px} @media(max-width:820px){.ms-commander{grid-template-columns:1fr}.ms-commander__bild{max-width:420px}} /* ---------- FAQ (open list, as on the start page) ---------- */ .ms-faq h2{font-size:clamp(22px,2.6vw,30px);font-weight:800;margin:0 0 22px} .ms-faq__item{margin-bottom:20px;max-width:640px} .ms-faq__item h3{font-size:16px;font-weight:700;letter-spacing:-.2px;color:var(--ms-text);margin:0 0 6px} .ms-story .ms-faq__item p{font-size:14px;line-height:1.6} /* ---------- closing CTA ---------- */ .ms-cta{position:relative;text-align:left;border-radius:24px;padding:clamp(28px,5vw,52px);background:radial-gradient(80% 120% at 100% 0%,rgba(61,104,197,.18),transparent 60%),var(--ms-raised);border:1px solid rgba(89,101,117,.28);overflow:hidden} .ms-cta h2{font-size:clamp(24px,3.2vw,36px);font-weight:800;margin:0 0 12px;max-width:620px} .ms-cta p{font-size:15px;line-height:1.6;max-width:560px;margin:0 0 22px} .ms-cta .ms-hero__note{margin:0} /* ---------- entrance ---------- data-ms-in="auf|links|rechts|pop|karte" marks an element. Only transform and opacity move, so nothing reflows. Hero: pure CSS keyframes under html.mr-js (set inline in , skipped for reduced motion), exactly like the start page, so a missing story.js never hides the headline. Below the hero: story.js adds html.ms-io and only then hides what is still off screen; without story.js everything stays visible. */ @keyframes msUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}} @keyframes msCard{from{opacity:0;transform:translateY(30px) rotateY(-8deg) scale(.94)}to{opacity:1;transform:none}} @keyframes msFanL{from{opacity:0;transform:translate(40%,34px)}to{opacity:1;transform:translateX(18%) rotate(-7deg)}} @keyframes msFanM{from{opacity:0;transform:translateY(34px) scale(.96)}to{opacity:1;transform:none}} @keyframes msFanR{from{opacity:0;transform:translate(-40%,34px)}to{opacity:1;transform:translateX(-18%) rotate(7deg)}} .mr-js .ms-hero [data-ms-in]{opacity:0;animation:msUp .9s var(--ms-ease) 1s forwards} .mr-js .ms-hero [data-ms-in="karte"]{animation:msCard 1.3s var(--ms-ease) .5s forwards} .mr-js .ms-hero .ms-faecher .ms-karte:nth-child(1){animation:msFanL 1.2s var(--ms-ease) .75s forwards} .mr-js .ms-hero .ms-faecher .ms-karte:nth-child(2){animation:msFanM 1.2s var(--ms-ease) .45s forwards} .mr-js .ms-hero .ms-faecher .ms-karte:nth-child(3){animation:msFanR 1.2s var(--ms-ease) .9s forwards} .ms-io [data-ms-in]{transition:opacity .9s var(--ms-ease),transform 1.1s var(--ms-ease);transition-delay:var(--ms-delay,0ms)} .ms-io [data-ms-in]:not(.ms-in){opacity:0} .ms-io [data-ms-in="auf"]:not(.ms-in){transform:translateY(26px)} .ms-io [data-ms-in="links"]:not(.ms-in){transform:translate(-28px,16px) rotate(-4deg)} .ms-io [data-ms-in="rechts"]:not(.ms-in){transform:translate(28px,16px) rotate(4deg)} .ms-io [data-ms-in="pop"]:not(.ms-in){transform:scale(.9)} .ms-io [data-ms-in="karte"]:not(.ms-in){transform:translateY(30px) rotateY(-8deg) scale(.94)} .ms-io .ms-faecher .ms-karte[data-ms-in]:not(.ms-in){transform:translateY(34px) scale(.96)} .ms-io .ms-faecher .ms-karte[data-ms-in]:nth-child(1):not(.ms-in){transform:translate(40%,34px)} .ms-io .ms-faecher .ms-karte[data-ms-in]:nth-child(3):not(.ms-in){transform:translate(-40%,34px)} @media (prefers-reduced-motion: reduce){ [data-ms-in]{opacity:1 !important;transition:none !important;animation:none !important} .ms-btn,.ms-wappen__item{transition:none !important} } /* ---------- page shell on platform pages (mr-design.css header/footer stay) ---------- */ body.ms-body.mr{background:var(--ms-seam);color:var(--ms-text)} .ms-body .mr-foot{background:var(--ms-seam);color:#8090b0;padding:28px 16px 36px;text-align:center} .ms-body .mr-foot .mr-foot__legal a{color:#AEB8CC;margin:0 6px} .ms-body .mr-foot .mr-foot__legal a:hover{color:#fff} .ms-body .mr-foot .mr-foot__legal{border-top:0;margin:0;padding:0;color:#8090b0} .ms-breadcrumb{font-size:12.5px;color:var(--ms-muted);margin:0 0 22px} .ms-breadcrumb a{color:var(--ms-text);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(152,162,174,.5)} .ms-hero__visual--breit{max-width:460px} @media(max-width:760px){.ms-hero__visual--breit{max-width:380px}} .ms-zaehler{font-size:15px;font-weight:700;color:var(--ms-text);margin:14px 2px 0;min-height:1.4em} /* ---------- status ladder ---------- */ .ms-stufen{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:0;max-width:620px;position:relative} .ms-stufen li{position:relative;padding:0 0 22px 34px} .ms-stufen li::before{content:"";position:absolute;left:6px;top:6px;width:10px;height:10px;border-radius:50%;background:var(--ms-bg);box-shadow:0 0 0 2px var(--ms-line)} .ms-stufen li::after{content:"";position:absolute;left:10px;top:20px;bottom:0;width:2px;background:linear-gradient(180deg,rgba(89,101,117,.55),rgba(89,101,117,.15))} .ms-stufen li:last-child::after{display:none} .ms-stufen li:last-child::before{background:var(--ms-gold);box-shadow:0 0 0 2px var(--ms-gold),0 0 14px rgba(177,138,66,.6)} .ms-stufen b{display:block;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--ms-muted);margin-bottom:3px} .ms-story .ms-stufen p{color:var(--ms-text);font-size:15px;line-height:1.5} @media(max-width:620px){ .ms-faecher .ms-karte{flex-basis:34%} .ms-faecher .ms-karte:nth-child(2){flex-basis:54%} .ms-faecher .ms-karte:not(:nth-child(2)) .ms-karte__caption,.ms-faecher .ms-karte:not(:nth-child(2)) .ms-karte__scrim{display:none} } /* ---------- side panels, CTA with visual, balanced headings ---------- */ .ms-story h1,.ms-story h2{text-wrap:balance} .ms-szene__panel{background:var(--ms-panel);border:1px solid rgba(89,101,117,.22);border-radius:18px;padding:24px 24px 6px} .ms-szene__panel h3{font-size:15px;font-weight:800;letter-spacing:-.2px;margin:0 0 4px} .ms-szene__panel .ms-stufen{margin-top:16px} .ms-szene__visual .ms-symbole{margin-top:0;grid-template-columns:repeat(2,minmax(0,1fr))} .ms-szene__copy .ms-symbole{margin:22px 0 18px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))} @media(max-width:520px){.ms-szene__visual .ms-symbole{grid-template-columns:1fr}} .ms-cta--visual{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:28px 48px;align-items:center} @media(max-width:700px){.ms-cta--visual{grid-template-columns:1fr}.ms-cta__visual .ms-karte{--ms-karte-max:200px}} .ms-szene__visual:has(>.ms-symbole){max-width:560px;flex-basis:420px} /* ---------- camp gallery (factions overview) ---------- */ .ms-galerie{list-style:none;margin:34px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px} .ms-galerie li{margin:0;display:flex} .ms-galerie__item{position:relative;flex:1;display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:var(--ms-raised);border:1px solid rgba(89,101,117,.25);transition:transform .35s var(--ms-ease),border-color .35s,box-shadow .35s} .ms-galerie__item::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--ms-lager-glow);opacity:.8;z-index:3} .ms-galerie__bild{position:relative;display:block;aspect-ratio:2/3;overflow:hidden;background:var(--ms-panel)} .ms-galerie__bild>img:first-child{width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .7s var(--ms-ease)} .ms-galerie__bild::after{content:"";position:absolute;left:0;right:0;bottom:0;height:45%;background:linear-gradient(180deg,rgba(14,21,32,0),var(--ms-raised));pointer-events:none} .ms-story .ms-galerie__wappen{position:absolute;left:12px;bottom:10px;width:52px;height:52px;z-index:2;filter:drop-shadow(0 6px 12px rgba(0,0,0,.75))} .ms-galerie__text{display:flex;flex-direction:column;gap:3px;padding:12px 16px 18px;flex:1} .ms-galerie__lager{font-size:10.5px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--ms-lager-glow)} [data-welt="abgrund"] .ms-galerie__lager,[data-welt="unterwelt"] .ms-galerie__lager{color:#E0775F} [data-welt="antike"] .ms-galerie__lager{color:#B994CC} [data-welt="ordnung"] .ms-galerie__lager{color:#78A9D8} .ms-galerie__name{font-size:17px;font-weight:800;line-height:1.2;color:var(--ms-text);letter-spacing:-.3px} .ms-galerie__satz{font-size:13.5px;line-height:1.55;color:var(--ms-muted);margin-top:6px} .ms-galerie__mehr{margin-top:auto;padding-top:12px;font-size:12.5px;font-weight:700;color:var(--ms-text)} .ms-galerie__mehr::after{content:" \2192";display:inline-block;transition:transform .25s var(--ms-ease)} a.ms-galerie__item:hover,a.ms-galerie__item:focus-visible{transform:translateY(-6px);border-color:color-mix(in srgb,var(--ms-lager-glow) 60%,transparent);box-shadow:0 34px 70px -34px color-mix(in srgb,var(--ms-lager-glow) 70%,transparent)} a.ms-galerie__item:hover .ms-galerie__bild>img:first-child{transform:scale(1.06)} a.ms-galerie__item:hover .ms-galerie__mehr::after{transform:translateX(4px)} @media(max-width:980px){.ms-galerie{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:560px){ .ms-galerie{grid-template-columns:1fr;gap:12px} .ms-galerie__item{flex-direction:row} .ms-galerie__bild{flex:0 0 38%;aspect-ratio:auto;min-height:196px} .ms-galerie__bild::after{top:0;left:auto;width:40%;height:auto;background:linear-gradient(90deg,rgba(14,21,32,0),var(--ms-raised))} .ms-galerie__text{padding:14px 14px 14px 10px} .ms-story .ms-galerie__wappen{width:40px;height:40px;left:8px;bottom:8px} } /* ---------- card with numbered markers ---------- */ .ms-hinweise{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:28px 64px;align-items:center;margin-top:34px;max-width:1040px} .ms-hinweise__karte{position:relative;margin:0} .ms-story .ms-hinweise__karte img{width:100%;height:auto;border-radius:16px;box-shadow:0 40px 90px -30px rgba(0,0,0,.8),0 0 0 1px rgba(89,101,117,.35)} .ms-hinweise__punkt{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:#1a1408;background:linear-gradient(180deg,#F0D08A,#B18A42);box-shadow:0 0 0 3px rgba(7,10,15,.85),0 0 0 5px rgba(216,179,106,.55),0 6px 16px rgba(0,0,0,.6);z-index:2} .mr-js .ms-hinweise__karte.ms-in .ms-hinweise__punkt{animation:msPuls 1.6s var(--ms-ease) .9s 2} @keyframes msPuls{0%,100%{box-shadow:0 0 0 3px rgba(7,10,15,.85),0 0 0 5px rgba(216,179,106,.55)}50%{box-shadow:0 0 0 3px rgba(7,10,15,.85),0 0 0 16px rgba(216,179,106,0)}} .ms-hinweise__liste{list-style:none;margin:0;padding:0;display:grid;gap:16px;max-width:520px} .ms-hinweise__liste li{display:flex;gap:16px;align-items:flex-start;padding:18px;border-radius:16px;background:var(--ms-panel);border:1px solid rgba(89,101,117,.22)} .ms-hinweise__nr{flex:0 0 34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;color:#1a1408;background:linear-gradient(180deg,#F0D08A,#B18A42)} .ms-hinweise__liste h3{font-size:16px;font-weight:700;letter-spacing:-.2px;margin:4px 0 6px} .ms-story .ms-hinweise__liste p{font-size:14.5px;line-height:1.6} @media(max-width:760px){.ms-hinweise{grid-template-columns:1fr}.ms-hinweise__karte{width:100%;max-width:260px;margin:0 auto}} @media (prefers-reduced-motion: reduce){.ms-hinweise__punkt{animation:none !important}.ms-galerie__item,.ms-galerie__bild>img:first-child,.ms-weiter__item{transition:none !important}} /* ---------- onward links ---------- */ .ms-weiter h2{font-size:clamp(22px,2.6vw,30px);font-weight:800;margin:0 0 22px} .ms-weiter__liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px} .ms-weiter__item{position:relative;display:flex;flex-direction:column;gap:6px;padding:20px 52px 20px 20px;border-radius:16px;background:linear-gradient(180deg,var(--ms-raised),rgba(14,21,32,.5));border:1px solid rgba(89,101,117,.25);transition:transform .25s var(--ms-ease),border-color .25s} .ms-weiter__item:hover{transform:translateY(-3px);border-color:rgba(61,104,197,.6)} .ms-weiter__titel{font-size:16px;font-weight:800;color:var(--ms-text)} .ms-story .ms-weiter__zeile{font-size:14px;line-height:1.5;color:var(--ms-muted)} .ms-weiter__pfeil{position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:20px;color:var(--ms-accent);transition:transform .25s var(--ms-ease)} .ms-weiter__item:hover .ms-weiter__pfeil{transform:translate(4px,-50%)} /* footer note and hero lede on story pages */ .ms-body .mr-foot .mr-muted{color:#8090b0;max-width:640px;margin:0 auto 10px} .ms-hero__copy .ms-lede{max-width:460px} /* ---------- walked border on a real map ---------- */ .ms-lauf{margin:34px auto 0;max-width:860px;border-radius:22px;overflow:hidden;border:1px solid rgba(89,101,117,.3);background:var(--ms-raised);box-shadow:0 40px 90px -40px rgba(0,0,0,.85)} .ms-lauf__karte{position:relative;aspect-ratio:960/720;background:var(--ms-raised)} .ms-story .ms-lauf__karte>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .ms-lauf__karte>svg{position:absolute;inset:0;width:100%;height:100%} .ms-lauf__flaeche{fill:rgba(61,104,197,.26);stroke:none;transition:opacity .9s var(--ms-ease) 3.4s} .ms-lauf__spur{fill:none;stroke:#5B8BFF;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;filter:drop-shadow(0 0 6px rgba(91,139,255,.8));transition:stroke-dashoffset 3.2s cubic-bezier(.45,.05,.55,.95) .5s} .ms-lauf__start{fill:#5B8BFF;stroke:#fff;stroke-width:3.5} .ms-io .ms-lauf:not(.ms-in) .ms-lauf__spur,.ms-lauf--neu .ms-lauf__spur{stroke-dashoffset:1;transition:none} .ms-io .ms-lauf:not(.ms-in) .ms-lauf__flaeche,.ms-lauf--neu .ms-lauf__flaeche{opacity:0;transition:none} .ms-lauf__nochmal{display:none;position:absolute;left:14px;top:14px;z-index:3;align-items:center;gap:8px;font:700 13px/1 'Outfit',sans-serif;padding:12px 16px;border-radius:99px;border:1px solid rgba(231,233,230,.35);background:rgba(7,10,15,.78);color:var(--ms-text);cursor:pointer;backdrop-filter:blur(6px)} .ms-io .ms-lauf__nochmal{display:inline-flex} .ms-lauf__nochmal:hover{border-color:var(--ms-text)} .ms-lauf__werte{position:relative;z-index:2;display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px;height:56px;margin-top:-56px;padding:0 14px 14px} .ms-lauf__werte span{display:inline-flex;align-items:baseline;gap:6px;padding:8px 12px;border-radius:10px;background:rgba(7,10,15,.8);border:1px solid rgba(89,101,117,.4);font-size:12.5px;color:var(--ms-muted);backdrop-filter:blur(6px)} .ms-lauf__werte b{font-size:15px;color:var(--ms-text);letter-spacing:-.3px} .ms-lauf__werte span:last-child{background:var(--ms-accent);border-color:var(--ms-accent);color:rgba(255,255,255,.85)} .ms-lauf__werte span:last-child b{color:#fff} .ms-lauf figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 14px;padding:11px 16px;font-size:11.5px;color:var(--ms-muted);line-height:1.5} @media(max-width:520px){.ms-lauf__werte{height:auto;margin-top:0;padding:12px 12px 0}.ms-lauf__werte span{padding:6px 9px;font-size:11.5px}.ms-lauf__werte b{font-size:13.5px}.ms-lauf__nochmal{padding:9px 12px;font-size:12px}} .ms-lauf__werte span:last-child{transition:opacity .9s var(--ms-ease) 3.4s} .ms-io .ms-lauf:not(.ms-in) .ms-lauf__werte span:last-child,.ms-lauf--neu .ms-lauf__werte span:last-child{opacity:.35;transition:none} /* ---------- two cards meeting ---------- */ .ms-begegnung{position:relative;display:flex;justify-content:center;align-items:center;padding:20px 0;max-width:520px;margin:0 auto} .ms-begegnung>div{flex:0 0 50%;display:flex;justify-content:center} .ms-begegnung .ms-karte{--ms-karte-max:240px} .ms-begegnung__links .ms-karte{transform:translateX(3%) rotate(-5deg);z-index:1} .ms-begegnung__rechts .ms-karte{transform:translateX(-3%) rotate(5deg) translateY(18px);z-index:2} .ms-begegnung>.ms-begegnung__funke{position:absolute;left:50%;top:44%;width:120px;height:120px;margin:-60px 0 0 -60px;flex:none;border-radius:50%;background:radial-gradient(circle,rgba(240,208,138,.55),rgba(177,138,66,.15) 45%,transparent 70%);z-index:3;pointer-events:none;opacity:.9} .ms-io .ms-begegnung__links .ms-karte[data-ms-in]:not(.ms-in){transform:translateX(-45%) rotate(-14deg)} .ms-io .ms-begegnung__rechts .ms-karte[data-ms-in]:not(.ms-in){transform:translateX(45%) rotate(14deg) translateY(18px)} .mr-js .ms-begegnung__funke{opacity:0;transition:opacity .6s ease 1s} .mr-js .ms-begegnung:has(.ms-in) .ms-begegnung__funke{opacity:.9} @media(max-width:520px){.ms-begegnung{padding:10px 0 34px;max-width:340px}.ms-begegnung .ms-karte{--ms-karte-max:150px}} .ms-szene__visual:has(>.ms-begegnung){padding-bottom:12px} /* ---------- compact symbol legend ---------- */ .ms-symbole--kompakt{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} @media(max-width:820px){.ms-symbole--kompakt{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:460px){.ms-symbole--kompakt{grid-template-columns:1fr}} .ms-symbole--kompakt li{padding:12px 14px;align-items:center;gap:12px} .ms-symbole--kompakt .ms-symbol,.ms-symbole--kompakt .ms-symbol img{flex-basis:40px;width:40px;height:40px} .ms-symbole--kompakt h3{font-size:14.5px;margin:0 0 2px} .ms-story .ms-symbole--kompakt p{font-size:13px;line-height:1.45} .ms-story .ms-panel__satz{font-size:13.5px;line-height:1.55;margin:4px 0 18px;color:var(--ms-muted)} .ms-unten__titel{font-size:15px;font-weight:800;letter-spacing:-.2px;margin:40px 0 0} /* ---------- walked clock slider ---------- */ .ms-uhr{margin:0 auto;max-width:460px;border-radius:20px;overflow:hidden;border:1px solid rgba(89,101,117,.3);background:var(--ms-panel);box-shadow:0 40px 90px -40px rgba(0,0,0,.85)} .ms-uhr__karte{position:relative;aspect-ratio:4/3;background:var(--ms-raised)} .ms-story .ms-uhr__karte>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:filter .5s} .ms-uhr__karte>svg{position:absolute;inset:0;width:100%;height:100%} .ms-uhr__flaeche{fill:rgba(61,104,197,.3);stroke:#5B8BFF;stroke-width:6;stroke-linejoin:round;transition:fill .5s,stroke .5s,opacity .5s} .ms-uhr[data-zustand="verfaellt"] .ms-uhr__flaeche{fill:rgba(216,179,106,calc(.34 - .26 * var(--ms-uhr-anteil,0)));stroke:#D8B36A;stroke-dasharray:18 14;opacity:calc(1 - .45 * var(--ms-uhr-anteil,0))} .ms-uhr[data-zustand="verfallen"] .ms-uhr__flaeche{fill:rgba(0,0,0,0);stroke:rgba(152,162,174,.5);stroke-dasharray:4 14} .ms-uhr[data-zustand="verfallen"] .ms-uhr__karte>img{filter:grayscale(1) brightness(.7)} .ms-uhr__tag{position:absolute;left:12px;top:12px;padding:7px 12px;border-radius:99px;background:rgba(7,10,15,.8);border:1px solid rgba(89,101,117,.45);font-size:12.5px;color:var(--ms-muted);display:none} .ms-uhr__tag b{color:var(--ms-text);font-size:14px} .ms-uhr__regler{display:none;padding:16px 18px 18px;gap:10px;flex-direction:column} .ms-uhr--an .ms-uhr__regler{display:flex} .ms-uhr--an .ms-uhr__tag{display:inline-block} .ms-uhr__regler label{font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--ms-muted)} .ms-uhr__regler input{width:100%;accent-color:#D8B36A;height:28px;cursor:pointer} .ms-uhr__regler output{font-size:15px;line-height:1.45;color:var(--ms-text);min-height:2.9em} .ms-story .ms-panel__satz--frei{margin:14px 4px 0;max-width:520px} .ms-tag+.ms-eyebrow{margin-left:12px} .ms-uhr__regler input{-webkit-appearance:none;appearance:none;height:28px;background:transparent} .ms-uhr__regler input::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:rgba(152,162,174,.35)} .ms-uhr__regler input::-moz-range-track{height:6px;border-radius:3px;background:rgba(152,162,174,.35)} .ms-uhr__regler input::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-11px;border-radius:50%;background:linear-gradient(180deg,#F0D08A,#B18A42);box-shadow:0 0 0 3px rgba(7,10,15,.9),0 4px 10px rgba(0,0,0,.6)} .ms-uhr__regler input::-moz-range-thumb{width:28px;height:28px;border:0;border-radius:50%;background:linear-gradient(180deg,#F0D08A,#B18A42);box-shadow:0 0 0 3px rgba(7,10,15,.9)} .ms-uhr__marken{position:relative;display:block;height:16px;margin:-6px 14px 0;font-size:11px;color:var(--ms-muted)} .ms-uhr__marken span{position:absolute;transform:translateX(-50%)} .ms-stufen--uhr li{opacity:.45;transition:opacity .3s} .ms-stufen--uhr li.ms-aktiv{opacity:1} .ms-stufen--uhr li.ms-aktiv::before{background:var(--ms-gold);box-shadow:0 0 0 2px var(--ms-gold),0 0 14px rgba(177,138,66,.6)} .ms-stufen--uhr li:last-child:not(.ms-aktiv)::before{background:var(--ms-bg);box-shadow:0 0 0 2px var(--ms-line)} @media(min-width:760px){.ms-uhr--an .ms-uhr__regler output{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}} .ms-story .ms-symbole--kompakt .ms-symbol img{object-fit:contain} .ms-symbole--kompakt .ms-symbol,.ms-symbole--kompakt .ms-symbol img{flex-basis:52px;width:52px;height:52px} .ms-story .ms-unten__titel{margin:40px 0 0} /* ---------- card backs in a row ---------- */ .ms-ruecken{list-style:none;margin:34px auto 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;max-width:860px} .ms-ruecken li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px} .ms-story .ms-ruecken img{width:100%;max-width:220px;height:auto;border-radius:14px;margin-bottom:10px;box-shadow:0 30px 60px -30px rgba(0,0,0,.85)} .ms-ruecken h3{font-size:18px;font-weight:800;letter-spacing:-.3px;margin:0} .ms-story .ms-ruecken p{font-size:14px;line-height:1.5;max-width:240px} @media(max-width:560px){.ms-ruecken{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.ms-ruecken h3{font-size:14px}.ms-story .ms-ruecken p{font-size:12px}} .ms-hero__wappen .ms-wappen{grid-template-columns:repeat(4,minmax(0,1fr));margin:0;gap:12px} .ms-hero__wappen .ms-wappen__item img{width:78px;height:78px} .ms-hero__wappen .ms-wappen__item{padding:20px 6px 16px} @media(max-width:380px){.ms-hero__wappen .ms-wappen__item img{width:46px;height:46px}} /* ---------- season finale commanders ---------- */ .ms-seasons{list-style:none;margin:34px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;max-width:980px} .ms-seasons li{position:relative;display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:var(--ms-raised);border:1px solid rgba(89,101,117,.25)} .ms-seasons li::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--ms-lager-glow);opacity:.8;z-index:2} .ms-seasons__bild{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;background:radial-gradient(55% 55% at 50% 50%,color-mix(in srgb,var(--ms-lager-glow) 30%,transparent),transparent 72%),var(--ms-panel)} .ms-story .ms-seasons__wappen{width:44%;height:auto;filter:drop-shadow(0 10px 24px rgba(0,0,0,.7))} .ms-seasons__text{display:flex;flex-direction:column;gap:4px;padding:14px 18px 18px} .ms-seasons__etikett{font-size:10.5px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#D8B36A} .ms-seasons h3{font-size:19px;font-weight:800;letter-spacing:-.3px;margin:0} .ms-story .ms-seasons p{font-size:13.5px} .ms-story .ms-seasons .ms-seasons__titel{color:#E0775F;font-weight:600} .ms-story .ms-seasons [data-welt="zucht"] .ms-seasons__titel,.ms-story .ms-seasons li[data-welt="zucht"] .ms-seasons__titel{color:#8FC18F} .ms-seasons li.ms-seasons--offen{justify-content:flex-end;background:transparent;border:1px dashed rgba(152,162,174,.4)} .ms-seasons--offen::before{display:none} .ms-seasons--offen h3{color:var(--ms-muted)} @media(max-width:700px){ .ms-seasons{grid-template-columns:1fr;gap:12px} .ms-seasons li{flex-direction:row;align-items:center} .ms-seasons__bild{flex:0 0 108px;aspect-ratio:1/1} .ms-story .ms-seasons__wappen{width:66%} .ms-seasons li.ms-seasons--offen{padding:4px 0;justify-content:flex-start} } .ms-hero .ms-breadcrumb+.ms-tag{margin-bottom:14px} /* ---------- season month slider ---------- */ .ms-monat{margin:0 auto;max-width:480px;border-radius:20px;overflow:hidden;border:1px solid rgba(89,101,117,.3);background:var(--ms-panel);box-shadow:0 40px 90px -40px rgba(0,0,0,.85)} .ms-monat__bahn{position:relative;display:grid;gap:10px;padding:52px 18px 22px;background:radial-gradient(80% 90% at 90% 0%,rgba(61,104,197,.16),transparent 60%),var(--ms-raised)} .ms-monat__tag{position:absolute;left:14px;top:12px;padding:6px 11px;border-radius:99px;background:rgba(7,10,15,.8);border:1px solid rgba(89,101,117,.45);font-size:12.5px;color:var(--ms-muted);display:none} .ms-monat__tag b{color:var(--ms-text)} .ms-monat--an .ms-monat__tag{display:inline-block} .ms-monat__wochen{display:grid;grid-template-columns:7fr 7fr 7fr 9fr;gap:4px} .ms-monat__wochen span{padding:12px 4px;border-radius:9px;text-align:center;font-size:12px;font-weight:700;color:var(--ms-muted);background:rgba(20,29,42,.9);border:1px solid rgba(89,101,117,.3);transition:background .3s,color .3s,border-color .3s} .ms-monat[data-woche="1"].ms-monat--an [data-w="1"],.ms-monat[data-woche="2"] [data-w="2"],.ms-monat[data-woche="3"] [data-w="3"],.ms-monat[data-woche="4"] [data-w="4"]{background:rgba(61,104,197,.28);border-color:rgba(91,139,255,.7);color:var(--ms-text)} .ms-monat__leiste{position:relative;min-height:30px;border-radius:9px;background:repeating-linear-gradient(90deg,rgba(216,179,106,.16) 0 10px,transparent 10px 16px),rgba(20,29,42,.9);border:1px dashed rgba(216,179,106,.45)} .ms-monat__leiste b{position:relative;display:block;padding:6px 10px;font-size:12px;color:var(--ms-text)} .ms-monat__finale{display:grid;grid-template-columns:27fr 3fr} .ms-monat__finale span{grid-column:2;padding:8px 2px;border-radius:9px;text-align:center;font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:#D8B36A;border:1px dashed rgba(216,179,106,.55);white-space:nowrap;overflow:visible;direction:rtl} .ms-monat[data-finale="1"] .ms-monat__finale span{background:rgba(216,179,106,.22);border-style:solid;color:#F0D08A} .ms-monat__zeiger{position:absolute;bottom:4px;width:0;height:0;margin-left:-7px;left:calc(18px + (100% - 36px) * var(--ms-monat-pos,0));border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:9px solid #F0D08A;filter:drop-shadow(0 0 6px rgba(240,208,138,.8));display:none} .ms-monat--an .ms-monat__zeiger{display:block} .ms-monat .ms-uhr__regler{display:none} .ms-monat--an .ms-uhr__regler{display:flex} @media(min-width:760px){.ms-monat--an .ms-uhr__regler output{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}} .ms-wappen--hervor li:not(.ms-wappen__hervor) .ms-wappen__item{filter:saturate(.25) brightness(.6)} .ms-wappen--hervor li.ms-wappen__hervor .ms-wappen__item{border-color:color-mix(in srgb,var(--ms-lager-glow) 60%,transparent);box-shadow:0 0 28px -8px color-mix(in srgb,var(--ms-lager-glow) 70%,transparent)} .ms-seasons__text{padding-top:22px} .ms-seasons li:not(.ms-seasons--offen){background:linear-gradient(180deg,color-mix(in srgb,var(--ms-lager-glow) 14%,transparent),transparent 70%),var(--ms-raised)} @media(max-width:560px){#mr-plat .mp-marke img{height:31px!important}}