/* STATE ZERO: ruhige Filmästhetik, Bildflächen und klare Wege in die Stadt. */
.cinematic-hero{position:relative;isolation:isolate;min-height:680px;overflow:hidden;border-bottom:1px solid var(--sz-border);background:var(--sz-bg)}
.cinematic-backdrop{position:absolute;z-index:-3;inset:-10% 0 auto;width:100%;height:120%;object-fit:cover;object-position:center 48%;opacity:.78}
.cinematic-shade{position:absolute;z-index:-2;inset:0;background:linear-gradient(90deg,var(--sz-bg) 0%,rgba(8,11,16,.89) 26%,rgba(8,11,16,.38) 66%,rgba(8,11,16,.18)),linear-gradient(0deg,var(--sz-bg),transparent 45%,rgba(8,11,16,.2))}
.cinematic-inner{min-height:680px;position:relative;display:flex;flex-direction:column;justify-content:space-between;padding-block:28px 24px}
.hero-topline,.hero-bottomline{display:flex;justify-content:space-between;align-items:center;gap:24px;font-size:10px;letter-spacing:.1em;color:var(--sz-text-2)}
.hero-topline{border-bottom:1px solid rgba(165,175,188,.25);padding-bottom:20px}.hero-topline span:first-child{color:var(--sz-accent)}
.cinematic-copy{padding-block:56px 64px;max-width:900px}.cinematic-copy .eyebrow{margin-bottom:20px}
.cinematic-copy h1{font-size:clamp(60px,7.3vw,104px);font-weight:850;letter-spacing:-.065em;line-height:.98;margin:0 0 28px}.cinematic-copy h1 span{color:var(--sz-accent)}
.cinematic-copy>p:not(.eyebrow){font-size:17px;line-height:1.85;max-width:560px;color:var(--sz-text-2)}.cinematic-copy .hero-actions{margin-top:28px}.cinematic-copy .secondary{background:rgba(8,11,16,.5)}
.hero-signature{position:absolute;right:0;bottom:112px;display:flex;align-items:center;gap:16px}.hero-signature img{width:100px;height:100px;object-fit:cover;border:1px solid var(--sz-border);border-radius:var(--sz-radius-md)}.hero-signature>span{font-size:10px;line-height:1.8;letter-spacing:.04em;color:var(--sz-text-2)}
.hero-bottomline{border-top:1px solid rgba(165,175,188,.25);padding-top:20px;letter-spacing:0}.hero-bottomline>span{display:flex;align-items:center;gap:12px}.hero-bottomline i{width:5px;height:5px;border-radius:50%;background:var(--sz-accent)}.hero-bottomline a{color:var(--sz-accent)}
.chapter-strip{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:80px;border-bottom:1px solid var(--sz-border);font-size:9px;letter-spacing:.1em;color:var(--sz-text-2)}.chapter-strip a{color:var(--sz-accent)}
.welcome-section .story-copy{padding-top:4px}.welcome-section h2{font-size:clamp(32px,3.5vw,48px)}
.story-explorer{background:var(--sz-bg-2);border-block:1px solid var(--sz-border)}.explorer-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:48px;margin-bottom:40px}.explorer-heading h2{margin-bottom:0}.explorer-heading>p{max-width:350px;font-size:13px;margin:0 0 4px}
.role-tablist{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--sz-border);border-bottom:0;border-radius:var(--sz-radius-lg) var(--sz-radius-lg) 0 0;overflow:hidden}.role-tablist button{display:flex;align-items:center;gap:14px;padding:24px;border:0;border-right:1px solid var(--sz-border);border-top:2px solid transparent;background:var(--sz-bg);color:var(--sz-text-2);font-size:14px;font-weight:600;text-align:left}.role-tablist button:last-child{border-right:0}.role-tablist button>span:first-child{font-size:10px;color:var(--sz-text-2)}.role-tablist .tab-arrow{margin-left:auto;color:var(--sz-text-disabled)}.role-tablist button[aria-selected=true]{background:var(--sz-surface);border-top-color:var(--sz-accent);color:var(--sz-text)}.role-tablist button[aria-selected=true] span{color:var(--sz-accent)}.role-tablist button:hover{background:var(--sz-surface)}.role-tablist button:focus-visible{outline-offset:-5px}
.story-panel{display:grid;grid-template-columns:1.15fr 1fr;background:var(--sz-bg);border:1px solid var(--sz-border);overflow:hidden;border-radius:0 0 var(--sz-radius-lg) var(--sz-radius-lg);min-height:440px;animation:story-in 180ms ease-out}.story-panel+.story-panel{margin-top:20px}.role-tablist:not([hidden])~.story-panel{margin-top:0}.story-photo{position:relative;min-height:440px;background:var(--sz-surface);overflow:hidden}.story-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,11,16,.8),transparent 48%)}.story-photo img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;filter:saturate(.65)}.story-photo>span{position:absolute;z-index:1;bottom:24px;left:28px;right:28px;font-size:9px;letter-spacing:.12em;color:var(--sz-text)}.story-panel-copy{padding:48px;align-self:center}.story-panel-copy .eyebrow{font-size:9px;letter-spacing:.12em;margin-bottom:20px}.story-panel-copy h3{font-size:30px;line-height:1.15;letter-spacing:-.04em;margin-bottom:20px}.story-panel-copy>p:not(.eyebrow){color:var(--sz-text-2);font-size:14px}.feature-notes{list-style:none;padding:0;margin:24px 0;font-size:11px;color:var(--sz-text-2)}.feature-notes li{padding:8px 0;border-top:1px solid var(--sz-border)}.feature-notes li::before{content:'↗';color:var(--sz-accent);margin-right:12px}.scene-caption{color:var(--sz-text-2);font-size:10px;margin:16px 0 0;max-width:800px}
.moments-section{padding-block:80px}.moment-row{display:grid;grid-template-columns:40px 1.3fr 1fr;gap:32px;align-items:start;padding:32px 0;border-top:1px solid var(--sz-border)}.moment-row>span{color:var(--sz-accent);font-size:10px;padding-top:5px}.moment-row h3{font-size:28px;font-weight:600;line-height:1.25;margin:0}.moment-row p{color:var(--sz-text-2);font-size:13px;margin:4px 0 0;max-width:330px}
.whitelist-scene{display:grid;grid-template-columns:1.2fr 1fr;gap:88px;align-items:center}.whitelist-scene h2{font-size:clamp(36px,4vw,56px)}.whitelist-scene .lead{font-size:17px}.whitelist-scene .muted{font-size:14px}.whitelist-scene .button{margin-top:16px}.whitelist-footnote{color:var(--sz-text-2);font-size:10px;margin:16px 0 0}.character-file{position:relative;background:var(--sz-bg);border:1px solid var(--sz-border);padding:32px;border-radius:var(--sz-radius-lg)}.character-file::before{content:'';position:absolute;top:-1px;left:32px;width:52px;height:2px;background:var(--sz-accent)}.file-heading{display:flex;justify-content:space-between;gap:16px;font-size:8px;letter-spacing:.12em;color:var(--sz-text-2);padding-bottom:24px;border-bottom:1px solid var(--sz-border)}.file-heading span:first-child{color:var(--sz-accent)}.character-file h3{font-size:30px;margin:28px 0}.character-file dl{margin:0}.character-file dl>div{display:grid;grid-template-columns:72px 1fr;gap:12px;border-top:1px solid var(--sz-border);padding:16px 0}.character-file dt{font-size:9px;letter-spacing:.08em;color:var(--sz-accent)}.character-file dd{font-size:12px;color:var(--sz-text-2);margin:0}.character-file>p{margin:16px 0 0;font-size:10px;color:var(--sz-text-2)}
.community-finale{padding-block:96px;text-align:center;background:var(--sz-bg-2);border-top:1px solid var(--sz-border);position:relative;overflow:hidden}.community-finale::before{content:'SZ';position:absolute;z-index:0;right:-25px;bottom:-100px;font-size:420px;font-weight:900;line-height:1;color:var(--sz-surface);letter-spacing:-.13em;pointer-events:none}.community-finale>.container{position:relative}.community-finale h2{font-size:clamp(44px,6vw,80px);letter-spacing:-.06em;line-height:1.02;margin-bottom:28px}.community-finale>.container>p:not(.eyebrow){font-size:15px;color:var(--sz-text-2)}.finale-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:28px}.community-finale .connection-note{font-size:10px!important;margin-top:20px}
@keyframes story-in{from{opacity:.7;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1100px){.cinematic-copy h1{font-size:80px}.hero-signature>span{display:none}.story-panel-copy{padding:32px}.story-panel-copy h3{font-size:27px}.whitelist-scene{gap:40px}.role-tablist button{padding:20px;font-size:13px}}
@media(max-width:800px){.cinematic-hero,.cinematic-inner{min-height:650px}.cinematic-copy h1{font-size:70px}.hero-signature{right:0;bottom:116px}.hero-signature img{width:72px;height:72px}.hero-topline span:last-child{display:none}.hero-bottomline{align-items:flex-start;font-size:9px}.chapter-strip span:nth-child(3){display:none}.explorer-heading{gap:24px}.role-tablist button{padding:16px 12px;gap:8px;font-size:11px}.story-panel{grid-template-columns:1fr 1fr}.story-panel-copy{padding:24px}.story-photo{min-height:460px}.story-panel-copy h3{font-size:25px}.story-panel-copy>p:not(.eyebrow){font-size:13px}.whitelist-scene{grid-template-columns:1fr 1fr;gap:24px}.character-file{padding:24px}.character-file h3{font-size:26px}.moment-row{grid-template-columns:24px 1.2fr 1fr;gap:20px}.moment-row h3{font-size:24px}}
@media(max-width:640px){.cinematic-hero,.cinematic-inner{min-height:650px}.cinematic-inner{padding-block:20px}.cinematic-backdrop{object-position:62% center;opacity:.65}.cinematic-shade{background:linear-gradient(90deg,rgba(8,11,16,.93),rgba(8,11,16,.45)),linear-gradient(0deg,var(--sz-bg),transparent 70%)}.hero-topline{font-size:7px;letter-spacing:.08em;padding-bottom:16px}.cinematic-copy{padding-block:60px 40px}.cinematic-copy .eyebrow{font-size:8px}.cinematic-copy h1{font-size:clamp(43px,12vw,72px);line-height:1.03;letter-spacing:-.06em;margin-bottom:24px}.cinematic-copy>p:not(.eyebrow){font-size:14px;max-width:330px}.cinematic-copy>p br{display:none}.cinematic-copy .hero-actions{flex-direction:column;align-items:stretch;max-width:320px}.cinematic-copy .button{flex:auto;font-size:12px}.hero-signature{display:none}.hero-bottomline{flex-direction:column;gap:12px;padding-top:16px;font-size:9px}.chapter-strip{min-height:64px;gap:12px;font-size:8px;letter-spacing:.04em}.chapter-strip span:nth-child(2){display:none}.welcome-section{padding-block:56px}.explorer-heading{display:block;margin-bottom:28px}.explorer-heading h2{font-size:36px;margin-bottom:20px}.explorer-heading>p{font-size:12px}.role-tablist button{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;font-size:11px;padding:16px 10px;min-height:92px}.role-tablist .tab-arrow{display:none}.story-panel{grid-template-columns:1fr}.story-photo{min-height:220px}.story-photo img{object-position:center}.story-photo>span{font-size:8px;left:20px;right:20px;bottom:20px}.story-panel-copy{padding:28px 24px}.story-panel-copy h3{font-size:29px}.story-panel-copy>p:not(.eyebrow){font-size:14px}.scene-caption{font-size:9px}.moments-section{padding-block:48px}.moment-row{grid-template-columns:24px 1fr;gap:12px 16px;padding:24px 0}.moment-row h3{font-size:24px}.moment-row p{grid-column:2;max-width:none;font-size:13px}.whitelist-scene{grid-template-columns:1fr;gap:32px}.whitelist-scene h2{font-size:40px}.character-file{padding:28px 24px}.character-file h3{font-size:28px}.community-finale{padding-block:64px}.community-finale h2{font-size:clamp(39px,10vw,60px)}.community-finale>.container>p:not(.eyebrow){font-size:13px}.community-finale .eyebrow{font-size:8px}.community-finale::before{font-size:260px;bottom:-50px}.finale-actions{flex-direction:column;align-items:center}.finale-actions .button{width:100%;max-width:320px}}
@media(prefers-reduced-motion:reduce){.story-panel{animation:none}}
/* Neues Skyline-Motiv im vollständigen Bildrahmen statt vergrößertem Ausschnitt. */
.cinematic-backdrop{inset:0;width:100%;height:100%;object-position:center center}
@media(max-width:640px){.cinematic-backdrop{width:100%;object-position:54% center}}
/* Vom Team bereitgestellte Fraktionsmotive vollständig und ohne Beschnitt zeigen. */
.story-gallery{min-width:0;background:var(--sz-bg-2);align-self:start}.story-shot{margin:0}.story-shot+.story-shot{border-top:1px solid var(--sz-border)}.story-shot img{display:block;width:100%;height:auto;aspect-ratio:1672/941;object-fit:contain}.story-shot figcaption{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 20px;font-size:10px;color:var(--sz-text-2)}.story-shot figcaption>span{font-size:8px;letter-spacing:.12em;color:var(--sz-accent)}
@media(max-width:640px){.story-shot figcaption{padding:12px 16px;font-size:9px}}
/* Polizei und Rettungsdienst als eigenständige Spielwege. */
.role-tablist{grid-template-columns:repeat(4,minmax(0,1fr))}.medic-scene{position:relative;isolation:isolate;min-height:440px;display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding:32px;background:var(--sz-bg-2);overflow:hidden}.medic-scene .eyebrow{font-size:9px;margin:0}.medic-mark{position:absolute;z-index:-1;right:12px;top:50%;transform:translateY(-50%);font-size:clamp(120px,15vw,220px);font-weight:850;letter-spacing:-.1em;line-height:1;color:var(--sz-surface)}.medic-motto{font-size:40px;font-weight:650;letter-spacing:-.04em;line-height:1.2;margin:0;color:var(--sz-text)}.medic-scene-label{font-size:9px;letter-spacing:.1em;color:var(--sz-accent)}
@media(max-width:640px){.role-tablist{grid-template-columns:repeat(2,minmax(0,1fr))}.role-tablist button{min-height:76px}.role-tablist button:nth-child(2){border-right:0}.role-tablist button:nth-child(-n+2){border-bottom:1px solid var(--sz-border)}.medic-scene{min-height:300px;padding:24px}.medic-mark{font-size:160px}.medic-motto{font-size:34px}}

/* Beide Zeilen als zusammenhängende Grafik nach der bereitgestellten Vorlage. */
.cinematic-copy{min-width:0;width:100%}.hero-facts{display:flex;flex-wrap:wrap;gap:8px 20px;list-style:none;margin:20px 0 0;padding:0;font-size:12px;color:var(--sz-text)}.hero-facts li::before{content:'✓';color:var(--sz-accent);margin-right:8px}.first-evening{padding-block:64px}.first-evening-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}.first-evening-grid article{border-top:1px solid var(--sz-border);padding-top:24px}.first-evening-grid h3{font-size:21px}.first-evening-grid p{font-size:14px;color:var(--sz-text-2)}
@media(max-width:800px){.hero-signature{display:none}}
@media(max-width:640px){.first-evening-grid{grid-template-columns:1fr;gap:16px}.first-evening{padding-block:48px}.hero-facts{flex-direction:column;gap:8px}.cinematic-copy{padding-block:36px 32px}.cinematic-inner{min-height:0}.hero-topline{font-size:8px}}
.cinematic-copy h1{width:min(660px,100%);max-width:100%;margin:0 0 24px;line-height:1;font-size:inherit;letter-spacing:normal}
.hero-title-art{display:block;position:relative;left:-3.5%;width:100%;height:auto;mix-blend-mode:screen}
@media(max-width:800px){.cinematic-copy h1{width:min(620px,100%)}}
@media(max-width:640px){.cinematic-copy h1{width:100%;margin-bottom:24px}.cinematic-copy{padding-block:60px 40px}}