/* Startseite als Trailer: Szenen, die beim Scrollen stehen bleiben und sich verwandeln. Die Kante ist das orange Feld */
.home { --m: clamp(16px, 1.8vw, 28px); --small: 14px; --mid: clamp(22px, 2.4vw, 34px); --display: clamp(40px, 5vw, 76px); }
.home .wrap { max-width: none; padding-left: var(--m); padding-right: var(--m); }
.home main { position: relative; z-index: 1; background: var(--ground); }

/* Die Kante (Unterseiten): Bildstreifen schräg angeschnitten, das Orange bleibt als Kante stehen */
.cut { position: relative; margin: 0; --k: 34px; clip-path: polygon(0 0, calc(100% - var(--k)) 0, 100% var(--k), 100% 100%, 0 100%); }
.cut::after { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--accent); pointer-events: none; clip-path: polygon(calc(100% - var(--k) - 12px) 0, calc(100% - var(--k)) 0, 100% var(--k), 100% calc(var(--k) + 12px)); }
.hero-photo { height: 52svh; overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% 72%, 0 100%); }
.hero-photo::after { clip-path: polygon(0 calc(100% - 12px), 100% calc(72% - 12px), 100% 72%, 0 100%); }

.hero-nav { position: absolute; z-index: 3; top: 24px; right: var(--m); display: flex; gap: 28px; }
.hero-nav a { font-size: 15px; font-weight: 700; text-decoration: none; color: var(--ink); padding: 8px 0; transition: color .15s; }
.hero-nav a:hover { color: var(--accent); }
.hero-brand { position: absolute; z-index: 3; top: 24px; left: var(--m); padding: 8px 0; font-weight: 900; font-size: 18px; text-decoration: none; letter-spacing: -0.01em; transition: color .15s; }
.hero-brand:hover { color: var(--accent); }

/* Gezeichnete Stadt: Ebenen, die sich mit Maus und Scroll gegeneinander verschieben */
.city { background: var(--accent); }
.skyline { position: absolute; inset: -4% -3% 0; width: 106%; height: 104%; }
.skyline .sky { fill: #0e0f12; }
.skyline g { transform-box: view-box; transform-origin: 50% 100%; will-change: transform; }
.skyline .l0 { fill: #131417; translate: calc(var(--px, 0) * -4px) 0; scale: calc(1 + var(--p, 0) * .08); }
.skyline .l1 { fill: #1a1c20; translate: calc(var(--px, 0) * -10px) calc(var(--py, 0) * -4px); scale: calc(1 + var(--p, 0) * .22); }
.skyline .l2 { fill: #24272c; translate: calc(var(--px, 0) * -22px) calc(var(--py, 0) * -8px); scale: calc(1 + var(--p, 0) * .5); }
.skyline .l3 { fill: #101113; translate: calc(var(--px, 0) * -40px) calc(var(--py, 0) * -12px); scale: calc(1 + var(--p, 0) * 1.1); }
.skyline g { transition: translate .6s cubic-bezier(.2, .7, .2, 1); }
.skyline .w { fill: #e9c48f; opacity: .55; }
.skyline .a { fill: #f28c28; opacity: .9; }
.skyline .b { animation: flicker 5s steps(1) infinite; }
.skyline .b:nth-of-type(3n) { animation-duration: 7s; animation-delay: 2s; }
.skyline .lamp { fill: #f28c28; animation: lamp 2.4s ease-in-out infinite; }
@keyframes flicker { 0%, 100% { opacity: .55; } 40% { opacity: .05; } 62% { opacity: .55; } }
@keyframes lamp { 50% { opacity: .15; } }

/* Szenen: ohne Skript normale Abschnitte, mit Skript bleibt die Bühne stehen, während --p von 0 bis 1 läuft */
.scene { position: relative; }
.scene-stage { position: relative; }
.js .scene.is-live { height: calc((var(--hold, 1) + 1) * 100svh); }
.js .scene.is-live > .scene-stage { position: sticky; top: 0; height: 100svh; overflow: clip; }

/* Szene 1: die Stadt. Beim Scrollen fliegt man hinein, dann verschluckt die Kante den Bildschirm */
.s-city { z-index: 1; background: var(--ground); }
.s-city .scene-stage { min-height: 100svh; display: grid; place-items: center; }
.s-city .city { position: absolute; inset: 0; overflow: hidden; }
.wedge { position: absolute; inset: 0; z-index: 2; background: var(--accent); pointer-events: none;
  clip-path: polygon(0 calc(104% - var(--p, 0) * 135%), 100% calc(86% - var(--p, 0) * 135%), 100% 100%, 0 100%); }
.title { position: relative; z-index: 2; display: grid; justify-items: center; text-align: center; padding: 96px var(--m) 120px;
  translate: 0 calc(var(--p, 0) * -18vh); opacity: calc(1 - var(--p, 0) * 2.2); }
.hero-status { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; background: rgba(20, 21, 23, .82); font-size: 15px; font-weight: 700; }
.hero-status i { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-soft); }
.hero-status.on i { background: var(--ok); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.name { margin-top: 22px; display: flex; align-items: flex-start; gap: .12em; font-weight: 900; font-size: clamp(64px, 13vw, 230px); line-height: .85; letter-spacing: -0.055em; white-space: nowrap; }
.name b { display: inline-block; font-weight: inherit; animation: drop .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 55ms + 150ms); transition: color .2s, translate .25s cubic-bezier(.2, .7, .2, 1); }
.name b:hover { color: var(--accent); translate: 0 -.04em; }
.name em { font-style: normal; font-size: .26em; letter-spacing: 0; line-height: 1; padding: .18em .3em; margin-top: .25em; background: var(--accent); color: var(--on-accent); animation: drop .9s cubic-bezier(.2, .8, .2, 1) .65s both; }
@keyframes drop { from { opacity: 0; translate: 0 -.35em; rotate: -8deg; } }
.hero-lead { margin-top: 26px; max-width: 46ch; font-size: 19px; line-height: 1.5; animation: fade 1s ease .8s both; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; animation: fade 1s ease 1s both; }
.hero-actions .btn { min-height: 54px; }
@keyframes fade { from { opacity: 0; translate: 0 12px; } }
.scroll-hint { position: absolute; z-index: 3; bottom: 22px; left: 50%; translate: -50% 0; font-size: 14px; font-weight: 700; color: var(--on-accent); opacity: calc(1 - var(--p, 0) * 6); animation: bob 2.2s ease-in-out infinite; }
@keyframes bob { 50% { translate: -50% 6px; } }

/* Szene 2: auf Orange, ein Satz nach dem anderen füllt den Schirm */
.s-say { background: var(--accent); color: var(--on-accent); }
.s-say .scene-stage { padding: 96px var(--m); }
.say-label { font-size: 17px; font-weight: 900; }
.say { list-style: none; padding: 0; display: grid; gap: 72px; margin-top: 48px; }
.say-big { font-weight: 900; font-size: clamp(44px, 7vw, 128px); line-height: .92; letter-spacing: -0.045em; max-width: 19ch; }
.say-small { margin-top: 22px; max-width: 46ch; font-size: 19px; line-height: 1.5; font-weight: 700; }
.say-count { display: none; }
.js .s-say.is-live .scene-stage { display: grid; align-content: center; padding-top: 0; padding-bottom: 0; }
.js .s-say.is-live .say-label { position: absolute; top: 40px; left: var(--m); }
.js .s-say.is-live .say { display: block; position: relative; margin: 0; min-height: 60svh; }
.js .s-say.is-live .say li { position: absolute; inset: 0; display: grid; align-content: center; pointer-events: none; visibility: hidden; transition: visibility 0s .5s; }
.js .s-say.is-live .say li.now { visibility: visible; transition: none; }
.js .s-say.is-live .say-big, .js .s-say.is-live .say-small { opacity: 0; translate: 0 60px; transition: opacity .5s ease, translate .7s cubic-bezier(.2, .8, .2, 1); }
.js .s-say.is-live .say li.past .say-big, .js .s-say.is-live .say li.past .say-small { translate: 0 -60px; }
.js .s-say.is-live .say li.now .say-big { opacity: 1; translate: none; }
.js .s-say.is-live .say li.now .say-small { opacity: 1; translate: none; transition-delay: .12s; }
.js .s-say.is-live .say-count { display: block; position: absolute; bottom: 40px; left: var(--m); font-size: 17px; font-weight: 900; }

/* Einleitung: ruhiger Abschnitt zwischen den Szenen */
.intro { padding-top: 160px; padding-bottom: 160px; }
.intro-head { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: end; }
.intro-head h2 { grid-column: 1 / 8; font-weight: 900; font-size: var(--display); line-height: .95; letter-spacing: -0.03em; }
.intro-note { grid-column: 9 / 13; max-width: 40ch; font-size: 18px; }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 96px; }
.facts div { padding: 28px 24px; background: var(--surface); }
.facts dt { font-size: clamp(30px, 3.2vw, 48px); font-weight: 900; line-height: 1; letter-spacing: -0.02em; }
.facts dd { margin-top: 10px; font-size: 16px; color: var(--ink-soft); }
.live { background: var(--surface-2) !important; }
.live dt { color: var(--accent); }

/* Szene 3: die Jobs fliegen aus der Tiefe auf ihren Platz */
.s-jobs .scene-stage { padding: 120px var(--m); perspective: 1100px; }
.jobs-head { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: end; }
.jobs-head h2 { grid-column: 1 / 8; font-weight: 900; font-size: var(--display); line-height: .95; letter-spacing: -0.03em; }
.jobs-head p { grid-column: 9 / 13; font-size: 18px; max-width: 40ch; }
.jobs { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 56px; transform-style: preserve-3d; }
.jobs li { position: relative; display: grid; gap: 8px; padding: 26px 26px 30px; background: var(--surface); overflow: hidden; transition: background .2s; }
.jobs li::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--accent); }
.jobs li:hover { background: var(--surface-2); }
.jobs b { font-size: clamp(24px, 2.2vw, 32px); font-weight: 900; letter-spacing: -0.015em; line-height: 1.1; }
.jobs span { font-size: 17px; color: var(--ink-soft); }
.js .s-jobs.is-live .scene-stage { display: grid; align-content: center; padding-top: 0; padding-bottom: 0; }
.js .s-jobs.is-live .jobs li { opacity: var(--t, 0); transform: translateZ(calc((1 - var(--t, 0)) * -1400px)) rotateX(calc((1 - var(--t, 0)) * 24deg)) rotateY(calc((1 - var(--t, 0)) * var(--ry, 0deg))); }
.js .s-jobs.is-live .jobs li:nth-child(3n + 1) { --ry: 28deg; }
.js .s-jobs.is-live .jobs li:nth-child(3n) { --ry: -28deg; }

/* So kommst du rein: eine Treppe aus Sätzen */
.stairs { padding-top: 160px; padding-bottom: 200px; }
.stairs ol { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 56px; }
.stairs li { grid-column-end: 13; }
.st-1 { grid-column-start: 1; } .st-2 { grid-column-start: 3; } .st-3 { grid-column-start: 5; } .st-4 { grid-column-start: 7; }
.st-line { font-size: clamp(36px, 4.4vw, 72px); font-weight: 900; line-height: 1; letter-spacing: -0.035em; }
.stairs li > p:not(.st-line) { margin-top: 12px; max-width: 36ch; font-size: 17px; color: var(--ink-soft); }
.accent { color: var(--accent); }
.copy { display: inline-flex; align-items: center; gap: 18px; margin-top: 18px; min-height: 52px; padding: 0 20px; border: 0; border-radius: 0; background: var(--surface-2); color: var(--ink); font: inherit; cursor: pointer; transition: background .15s, translate .15s; }
.copy:hover { background: #2e3036; }
.copy:active { translate: 0 1px; }
.copy code { background: none; padding: 0; font-size: 16px; white-space: nowrap; }
.copy-state { color: var(--accent); font-weight: 900; font-size: 15px; }
.copy.done .copy-state { color: var(--ok); }

/* Regelwerk-Übersicht: Kapitel als Kacheln mit allen Paragraphen-Titeln */
.rules-map { padding-top: 40px; padding-bottom: 200px; }
.rm-head { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: end; margin-bottom: 56px; }
.rm-head h2 { grid-column: 1 / 7; font-weight: 900; font-size: var(--display); line-height: .95; letter-spacing: -0.03em; }
.rm-head p { grid-column: 8 / 13; font-size: 18px; max-width: 44ch; }
.rm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }
.rm-item { position: relative; display: grid; gap: 6px; align-content: start; min-height: 150px; padding: 22px 24px; background: var(--surface); text-decoration: none; overflow: hidden; transition: background .2s, translate .25s cubic-bezier(.2, .7, .2, 1); }
.rm-item::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.rm-item:hover, .rm-item:focus-visible { background: var(--surface-2); translate: 0 -3px; }
.rm-item:hover::after, .rm-item:focus-visible::after { transform: scaleX(1); }
.rm-n { color: var(--accent); font-weight: 900; font-size: 15px; font-variant-numeric: tabular-nums; }
.rm-t { font-weight: 900; font-size: 24px; line-height: 1.15; letter-spacing: -0.01em; }
.rm-s { font-size: 16px; line-height: 1.45; color: var(--ink-soft); }
.rm-dc { background: var(--surface-2); }

/* Abschluss: ganzes orange Feld, die Stadt als Silhouette am Boden */
.close-cta { position: relative; overflow: hidden; min-height: 100svh; display: flex; flex-direction: column; justify-content: space-between; gap: 64px; padding: 14vh var(--m) 48px; background: var(--accent); color: var(--on-accent); }
.close-cta h2 { position: relative; z-index: 1; font-size: clamp(56px, 10vw, 180px); font-weight: 900; line-height: .9; letter-spacing: -0.05em; }
.cta-row { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }
.cta-row p { max-width: 40ch; font-size: 20px; line-height: 1.45; font-weight: 700; color: var(--ink); }
.close-cta .btn.primary { min-height: 56px; background: var(--ground); color: var(--ink); }
.close-cta .btn.primary:hover { background: #000; }
.cta-city { position: absolute; inset: auto 0 0 0; height: 46%; pointer-events: none; }
.cta-city .skyline { inset: 0; width: 100%; height: 100%; }
.cta-city .sky, .cta-city .l0, .cta-city .l1 { display: none; }
.cta-city .l2 { fill: #1d1f23; }
.cta-city .l3 { fill: #141517; }

/* Fußzeile liegt unter der Seite und wird freigelegt */
.foot { position: sticky; bottom: 0; z-index: 0; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto auto; padding: 40px var(--m) 24px; }
.foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; font-size: 15px; max-width: 900px; }
.foot-cols p { color: var(--ink); font-weight: 700; margin-bottom: 8px; }
.foot-cols ul { list-style: none; padding: 0; display: grid; gap: 4px; color: var(--ink-soft); }
.foot-cols a { text-decoration: none; transition: color .15s; }
.foot-cols a:hover { color: var(--accent); }
.foot-mark { grid-row: 3; display: block; width: 100%; height: auto; transform-origin: 50% 100%; }
.foot-mark text { font: 900 160px Lato, sans-serif; fill: var(--ink); }
.legal { grid-row: 4; margin-top: 20px; max-width: 75ch; font-size: 14px; color: var(--ink-soft); }

/* Auftritte der ruhigen Abschnitte. Ohne Skript bleibt alles sichtbar */
.js .home [class*="in-"], .js .stairs li { opacity: 0; translate: 0 28px; transition: opacity .7s ease, translate .8s cubic-bezier(.2, .7, .2, 1); }
.js .home .in-2 { transition-delay: 80ms; } .js .home .in-3 { transition-delay: 160ms; } .js .home .in-4 { transition-delay: 240ms; }
.js .stairs li { translate: -48px 0; }
.js .stairs li:nth-child(2) { transition-delay: 90ms; } .js .stairs li:nth-child(3) { transition-delay: 180ms; } .js .stairs li:nth-child(4) { transition-delay: 270ms; }
.js .home .shown [class*="in-"], .js .home .shown.stairs li { opacity: 1; translate: none; }

@media (max-width: 1000px) {
  .intro-head h2, .jobs-head h2 { grid-column: 1 / 13; }
  .intro-note, .jobs-head p { grid-column: 1 / 13; margin-top: 20px; }
  .facts { grid-template-columns: 1fr 1fr; }
  .jobs { grid-template-columns: 1fr 1fr; }
  .st-1 { grid-column-start: 1; } .st-2 { grid-column-start: 2; } .st-3 { grid-column-start: 3; } .st-4 { grid-column-start: 4; }
}
@media (max-width: 700px) {
  .hero-nav { gap: 20px; top: 16px; }
  .hero-nav .wide-only { display: none; }
  .hero-nav a { font-size: 14px; }
  .hero-brand { top: 16px; font-size: 16px; }
  .title { padding-top: 80px; }
  .name { font-size: 17vw; }
  .hero-lead { font-size: 16px; }
  .hero-actions { width: 100%; }
  .hero-actions .btn { flex: 1 1 100%; justify-content: center; }
  .hero-actions .btn:not(.primary) { display: none; }  /* FiveM gibt es auf dem Handy nicht */
  .s-say .scene-stage { padding: 72px var(--m); }
  .say-big { font-size: 10.4vw; max-width: none; }
  .say-small { font-size: 16px; }
  .intro { padding-top: 96px; padding-bottom: 96px; }
  .intro-head h2, .jobs-head h2 { font-size: 11vw; }
  .facts { margin-top: 48px; }
  .s-jobs .scene-stage { padding: 96px var(--m); }
  .jobs { grid-template-columns: 1fr; }
  .rm-head h2, .rm-head p { grid-column: 1 / 13; }
  .rm-head p { margin-top: 16px; }
  .stairs { padding-top: 96px; padding-bottom: 120px; }
  .stairs ol { row-gap: 40px; }
  .st-line { font-size: 8.4vw; }
  .stairs li > p:not(.st-line) { font-size: 16px; }
  .copy { width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; padding: 14px 18px; }
  .copy code { font-size: 14px; }
  .close-cta { min-height: 90svh; }
  .close-cta h2 { font-size: 15vw; }
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row p { font-size: 17px; }
  .close-cta .btn { justify-content: center; }
  .foot { min-height: auto; position: relative; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .foot-mark { margin-top: 20svh; }
}