/* OPEN TILL DUSK – Webseite. Die Seite läuft wie ein Spieltag ab: html[data-phase] = day | dusk | night
   (setzt site.js beim Scrollen), daraus folgen Hintergrund, Akzentfarbe und Himmel. */

@font-face { font-family: Barlow; src: url(../fonts/Barlow-Medium.ttf) format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: Barlow; src: url(../fonts/Barlow-SemiBold.ttf) format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: Barlow; src: url(../fonts/Barlow-Bold.ttf) format("truetype"); font-weight: 700; font-display: swap; }

:root {
  --amber: #ffb347; --amber-hi: #ffd08a; --amber-lo: #ff8a3c;
  --terra: #c9573c; --teal: #2a8f86; --cyan: #74f1ff; --aurora: #4fe0a6; --violet: #8f77ff; --danger: #ff5a44;
  --ink: #f6efe6; --mute: rgba(246, 239, 230, .68); --line: rgba(255, 255, 255, .1);
  --bg: #19100c; --accent: var(--amber);
  --maxw: 1240px; --pad: clamp(20px, 5vw, 56px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --cut: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c)));
}
html[data-phase="dusk"] { --bg: #1c0d12; --accent: #ff8f66; }
html[data-phase="night"] { --bg: #070a14; --accent: var(--cyan); }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink); transition: background-color 1.4s ease;
  font: 500 17px/1.62 Barlow, "Segoe UI", system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4, p, figure, dl, dd, blockquote { margin: 0; }
::selection { background: var(--amber); color: #1a0f08; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 100; background: var(--amber); color: #1a0f08; padding: 10px 16px; font-weight: 700; }
.skip:focus { top: 12px; }
.wrap { width: min(100% - 2 * var(--pad), var(--maxw)); margin-inline: auto; }
.ic { width: 1.25em; height: 1.25em; flex: none; }

/* ---------- Himmel hinter der Seite */
.sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.sky i { position: absolute; inset: 0; opacity: 0; transition: opacity 1.8s ease; }
.sky-day { background: radial-gradient(1100px 700px at 88% -8%, rgba(255, 164, 92, .24), transparent 62%), radial-gradient(900px 640px at -6% 104%, rgba(201, 87, 60, .16), transparent 60%); }
.sky-dusk { background: radial-gradient(1200px 760px at 50% -10%, rgba(214, 62, 52, .34), transparent 66%); }
.sky-stars {
  background-image: radial-gradient(1.2px 1.2px at 24px 38px, #fff, transparent), radial-gradient(1px 1px at 130px 92px, rgba(255, 255, 255, .8), transparent),
    radial-gradient(1.4px 1.4px at 212px 20px, #cfe9ff, transparent), radial-gradient(1px 1px at 300px 160px, rgba(255, 255, 255, .7), transparent),
    radial-gradient(1px 1px at 76px 212px, rgba(255, 255, 255, .6), transparent), radial-gradient(1.6px 1.6px at 352px 262px, #fff, transparent),
    radial-gradient(1px 1px at 178px 300px, rgba(255, 255, 255, .7), transparent), radial-gradient(1px 1px at 264px 338px, rgba(255, 255, 255, .5), transparent);
  background-size: 400px 380px;
}
.sky-aurora {
  background: radial-gradient(58% 44% at 26% -6%, rgba(79, 224, 166, .3), transparent 70%), radial-gradient(48% 40% at 78% -8%, rgba(143, 119, 255, .28), transparent 70%);
  filter: blur(18px); animation: aurora 18s ease-in-out infinite alternate; transform-origin: 50% 0;
}
@keyframes aurora { from { transform: scaleY(.85) translateX(-3%); } to { transform: scaleY(1.2) translateX(4%); } }
html[data-phase="day"] .sky-day, html[data-phase="dusk"] .sky-dusk, html[data-phase="night"] .sky-stars, html[data-phase="night"] .sky-aurora { opacity: 1; }

/* ---------- Schrift */
.eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; font: 600 13px/1.2 Barlow, sans-serif; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); transition: color 1s; }
.eyebrow::before { content: ""; width: 34px; height: 2px; background: currentColor; flex: none; }
.h-xl, .h-lg, .h-md, .h-sm { font-family: Barlow, sans-serif; font-weight: 700; text-transform: uppercase; text-wrap: balance; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.h-xl { font-size: clamp(42px, 7.2vw, 108px); line-height: .93; letter-spacing: .005em; }
.h-lg { font-size: clamp(30px, 4.4vw, 60px); line-height: 1; }
.h-md { font-size: clamp(25px, 2.8vw, 38px); line-height: 1.06; letter-spacing: .01em; }
.h-sm { font-size: 21px; line-height: 1.15; letter-spacing: .05em; }
.lead { margin-top: 28px; max-width: 62ch; font-size: clamp(18px, 1.65vw, 22px); line-height: 1.55; color: rgba(246, 239, 230, .84); }
.lead strong { color: var(--ink); font-weight: 700; }

/* ---------- Knöpfe */
.btn {
  --c: 11px; display: inline-flex; align-items: center; justify-content: center; gap: .65em; padding: 1.02em 1.55em; border: 0; cursor: pointer;
  font: 700 14px/1 Barlow, sans-serif; letter-spacing: .15em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  transition: transform .35s var(--ease), background-color .25s, color .25s;
}
.btn-primary { background: var(--amber); color: #1c1008; }
.btn-primary:hover { background: var(--amber-hi); transform: translateY(-2px); }
.btn-ghost { background: rgba(255, 255, 255, .11); color: var(--ink); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.btn-ghost:hover { background: rgba(255, 255, 255, .2); transform: translateY(-2px); }
.btn-sm { padding: .82em 1.1em; font-size: 12px; --c: 8px; }
.is-soon { cursor: default; }
.is-soon:hover { transform: none; background: var(--amber); }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* ---------- Kopfleiste */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; height: 68px; padding-inline: var(--pad); display: flex; align-items: center; gap: 28px; transition: background-color .4s, box-shadow .4s; }
.nav.scrolled { background: color-mix(in srgb, var(--bg) 80%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 1px 0 var(--line); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 700 15px/1 Barlow, sans-serif; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.brand-ic { width: 26px; height: 26px; color: var(--amber); }
.nav-links { margin-inline: auto; }
.nav-links ul { display: flex; gap: clamp(14px, 2vw, 30px); list-style: none; margin: 0; padding: 0; }
.nav-links a { position: relative; padding: 8px 0; font: 600 12.5px/1 Barlow, sans-serif; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; white-space: nowrap; color: var(--mute); transition: color .25s; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.nav-links a:hover, .nav-links a.is-active { color: var(--ink); }
.nav-links a.is-active::after { transform: scaleX(1); }
.m-only { display: none; }
.nav-right { display: flex; align-items: center; gap: 16px; }
.clock { display: flex; align-items: center; gap: 9px; font: 700 13px/1 Barlow, sans-serif; letter-spacing: .14em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.clock .led { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 10px var(--amber); animation: blink 2.4s ease-in-out infinite; }
.clock[data-state="dusk"] .led { background: #ff8f66; box-shadow: 0 0 10px #ff8f66; }
.clock[data-state="closed"] .led { background: var(--danger); box-shadow: 0 0 10px var(--danger); }
.clock-state { font-size: 11px; color: var(--mute); }
@keyframes blink { 50% { opacity: .35; } }
.lang { font: 700 12px/1 Barlow, sans-serif; letter-spacing: .14em; text-decoration: none; padding: 8px 9px; border: 1px solid var(--line); color: var(--mute); transition: color .25s, border-color .25s; }
.lang:hover { color: var(--ink); border-color: var(--ink); }
.burger { display: none; width: 42px; height: 42px; background: none; border: 0; padding: 0; cursor: pointer; position: relative; }
.burger i { position: absolute; left: 9px; right: 9px; height: 2px; background: var(--ink); transition: transform .35s var(--ease), top .35s var(--ease); }
.burger i:first-child { top: 16px; } .burger i:last-child { top: 25px; }
.nav.open .burger i:first-child { top: 20px; transform: rotate(45deg); } .nav.open .burger i:last-child { top: 20px; transform: rotate(-45deg); }

/* ---------- Hero */
.hero-stage { position: relative; height: 100svh; min-height: 700px; overflow: hidden; display: flex; align-items: flex-end; isolation: isolate; }
.hero-sky { position: absolute; inset: -3%; z-index: -2; animation: drift 38s ease-in-out infinite alternate; }
@keyframes drift { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.07) translate(-1.2%, -1%); } }
.hero-sky img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 52% 58%; opacity: 0; transition: opacity 2.6s ease; }
.hero-sky img:first-child, [data-hero="1"] .hero-sky img:nth-child(-n+2), [data-hero="2"] .hero-sky img:nth-child(-n+3), [data-hero="3"] .hero-sky img { opacity: 1; }
.hero-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(12, 7, 8, .55) 0%, transparent 18%, transparent 40%, rgba(12, 7, 8, .6) 72%, rgba(12, 7, 8, .9) 92%, var(--bg) 100%), linear-gradient(90deg, rgba(12, 7, 8, .58), transparent 60%); }
.hero-copy { padding-bottom: clamp(128px, 19vh, 184px); }
.hero h1 {
  font: 700 clamp(52px, 10.4vw, 160px)/.88 Barlow, sans-serif; letter-spacing: .02em; text-transform: uppercase; margin-left: -.04em;
  background: linear-gradient(180deg, var(--amber-hi) 6%, var(--amber) 46%, var(--amber-lo) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 34px rgba(255, 130, 50, .38)); transition: filter 1.4s ease;
}
.hero h1.ohne-schein { filter: drop-shadow(0 6px 34px rgba(255, 130, 50, 0)); }
.hero .eyebrow { color: var(--ink); margin-bottom: 20px; }
.hero-tag { margin-top: 22px; font: 700 clamp(21px, 2.9vw, 38px)/1.12 Barlow, sans-serif; letter-spacing: .07em; text-transform: uppercase; }
.hero-tag span { display: inline-block; transition: opacity 1.6s ease, color 1.6s ease, text-shadow 1.6s ease; }
.tag-night { opacity: .42; }
[data-hero="2"] .tag-day, [data-hero="3"] .tag-day { opacity: .42; }
[data-hero="2"] .tag-night { opacity: 1; color: #ffb59a; }
[data-hero="3"] .tag-night { opacity: 1; color: var(--cyan); text-shadow: 0 0 26px rgba(116, 241, 255, .55); }
.hero-sub { margin-top: 18px; max-width: 58ch; font-size: clamp(16px, 1.3vw, 19px); color: rgba(246, 239, 230, .88); }
.hero-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; margin: 26px 0 0; padding: 0; font: 600 12px/1 Barlow, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--mute); }
.hero-meta li + li::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 22px; background: var(--amber); transform: rotate(45deg) translateY(-1px); }
.dial { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); width: min(100% - 2 * var(--pad), var(--maxw)); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.dial-seg { display: block; align-self: start; background: none; border: 0; padding: 0 0 6px; text-align: left; color: var(--ink); cursor: pointer; font-family: Barlow, sans-serif; opacity: .58; transition: opacity .4s; }
.dial-seg:hover, .dial-seg.is-on { opacity: 1; }
.dial-seg .bar { display: block; height: 2px; background: rgba(255, 255, 255, .26); margin-bottom: 12px; overflow: hidden; }
.dial-seg .bar i { display: block; height: 100%; width: 0; background: var(--amber); }
.dial-seg.is-done .bar i { width: 100%; }
.dial-seg.is-on .bar i { animation: fill var(--hold, 5.2s) linear forwards; }
.dial-seg.is-held .bar i { animation: none; width: 100%; }
@keyframes fill { to { width: 100%; } }
.dial-seg b { display: block; font-size: 16px; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.dial-seg em { display: block; margin-top: 6px; font: 600 11px/1.2 Barlow, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--mute); }

/* ---------- LED-Laufschrift (wie die Tafel über dem Laden) */
.ticker { position: relative; overflow: hidden; background: #060504; border-block: 1px solid rgba(255, 179, 71, .22); }
.ticker::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, transparent 0, transparent 1.05px, #060504 1.45px); background-size: 3.5px 3.5px; pointer-events: none; }
.ticker-run { display: flex; width: max-content; animation: lauf 46s linear infinite; }
.ticker-run > div { display: flex; }
.ticker span { padding: 15px 0; font: 700 19px/1 Barlow, sans-serif; letter-spacing: .24em; text-transform: uppercase; white-space: nowrap; color: var(--amber); text-shadow: 0 0 12px rgba(255, 150, 50, .9); }
.ticker span::after { content: "◆"; margin-inline: 34px; color: var(--amber-lo); font-size: 12px; vertical-align: 3px; }
@keyframes lauf { to { transform: translateX(-50%); } }

/* ---------- Abschnitte */
.sec { position: relative; padding-block: clamp(84px, 11vw, 164px); }
.sec-head.has-ctrl { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.cut { --c: 26px; clip-path: var(--cut); overflow: hidden; }
.cut img { width: 100%; height: auto; transition: transform 1.4s var(--ease); }
.cut:hover img { transform: scale(1.035); }

.pitch { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 6vw, 96px); align-items: end; }
.pitch-body .lead { margin-top: 0; }
blockquote { margin-top: 34px; padding-left: 22px; border-left: 3px solid var(--amber); font: 700 clamp(19px, 1.9vw, 27px)/1.2 Barlow, sans-serif; letter-spacing: .05em; text-transform: uppercase; }
.stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: clamp(40px, 5vw, 72px); border-top: 1px solid var(--line); }
.stat { padding-top: 28px; }
.stat dt { font: 700 clamp(46px, 6vw, 86px)/1 Barlow, sans-serif; color: var(--amber); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.stat dd { margin-top: 10px; font: 600 12.5px/1.4 Barlow, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--mute); }

.rows { display: grid; gap: clamp(64px, 9vw, 124px); margin-top: clamp(56px, 7vw, 96px); }
.row { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.row-flip .row-img { order: 2; }
.num { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 18px; font: 700 14px/1 Barlow, sans-serif; letter-spacing: .3em; color: var(--accent); }
.num::after { content: ""; width: 48px; height: 1px; background: currentColor; opacity: .6; }
.row-txt p { margin-top: 18px; color: var(--mute); }
.ticks { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 11px; }
.ticks li { position: relative; padding-left: 26px; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: .58em; width: 8px; height: 8px; background: var(--accent); transform: rotate(45deg); transition: background-color 1s; }
.ticks.big { margin-top: 38px; gap: 15px; }
.ticks.big li { color: var(--mute); } .ticks.big strong { color: var(--ink); font-weight: 600; }

.sub { margin-top: clamp(72px, 9vw, 124px); }
.cards { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 18px; }
.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card { --c: 18px; position: relative; padding: 30px 26px 30px; background: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .025)); clip-path: var(--cut); transition: background-color .4s, transform .5s var(--ease); }
.card::before { content: ""; position: absolute; left: 26px; top: 0; width: 46px; height: 2px; background: var(--accent); transition: width .5s var(--ease), background-color 1s; }
.card:hover { transform: translateY(-4px); } .card:hover::before { width: 92px; }
.card .ic { width: 30px; height: 30px; color: var(--accent); }
.card h4 { margin: 18px 0 8px; font: 700 18px/1.2 Barlow, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.card p { font-size: 15.5px; color: var(--mute); } .card .h-sm + p { margin-top: 10px; }
.card strong { color: var(--ink); font-weight: 600; }

.wide { position: relative; margin-top: clamp(48px, 6vw, 80px); }
.wide img { aspect-ratio: 21 / 9; object-fit: cover; }
.wide figcaption { position: absolute; inset: auto 0 0 0; padding: 70px 30px 22px 50px; background: linear-gradient(0deg, rgba(8, 6, 10, .82), transparent); font: 600 13px/1.4 Barlow, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.sites, .ncards { list-style: none; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.site img { aspect-ratio: 4 / 3; object-fit: cover; } .ncard img { aspect-ratio: 16 / 10; object-fit: cover; }
.site h3, .ncard h3 { margin: 20px 0 8px; } .site p, .ncard p { color: var(--mute); font-size: 16px; }

#world { padding-bottom: 0; }
.events { position: relative; isolation: isolate; overflow: hidden; margin-top: clamp(84px, 10vw, 150px); padding-block: clamp(84px, 10vw, 150px); }
.events-bg, .dusk-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.events::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--bg) 0%, rgba(14, 9, 14, .18) 26%, rgba(14, 9, 14, .42) 72%, var(--bg) 100%); transition: background 1.4s; }
.events-list { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; }
.events-list li { padding: 22px 20px 24px; background: rgba(12, 9, 14, .62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-top: 2px solid var(--amber); }
.events-list strong { display: block; margin-bottom: 8px; font: 700 16px/1.2 Barlow, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--amber); }
.events-list span { font-size: 15px; line-height: 1.5; color: rgba(246, 239, 230, .8); display: block; }

/* ---------- Dämmerung / Morgen */
.dusk { position: relative; isolation: isolate; overflow: hidden; min-height: min(100svh, 920px); display: grid; align-items: center; padding-block: 130px; }
.dusk::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--bg) 0%, rgba(22, 8, 12, .2) 24%, rgba(22, 8, 12, .5) 70%, var(--bg) 100%), linear-gradient(90deg, rgba(22, 8, 12, .7), transparent 70%); transition: background 1.4s; }
.dusk-in { position: relative; }
.bigtime { display: block; margin: 0 0 14px -.03em; font: 700 clamp(96px, 17vw, 250px)/.82 Barlow, sans-serif; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: transparent; -webkit-text-stroke: 2px rgba(255, 170, 110, .78); }
.dawn .bigtime { -webkit-text-stroke-color: rgba(255, 214, 150, .9); }
.dawn::after { background: linear-gradient(180deg, var(--bg) 0%, rgba(30, 14, 8, .05) 22%, rgba(30, 14, 8, .38) 68%, var(--bg) 100%), linear-gradient(90deg, rgba(30, 14, 8, .62), transparent 68%); }
.dawn .dusk-bg { object-position: 50% 20%; }
.dusk .lead { max-width: 46ch; }

/* ---------- Nacht */
.arsenal { margin-top: clamp(64px, 8vw, 110px); }
.arsenal ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.arsenal li { --c: 18px; padding: 30px 24px 20px; text-align: center; background: linear-gradient(180deg, rgba(116, 241, 255, .07), rgba(255, 255, 255, .02)); clip-path: var(--cut); }
.arsenal img { width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: contain; filter: drop-shadow(0 14px 20px rgba(0, 0, 0, .55)); transition: transform .6s var(--ease); }
.arsenal li:hover img { transform: translateY(-6px) rotate(-3deg); }
.arsenal span { display: block; margin-top: 14px; font: 600 12.5px/1 Barlow, sans-serif; letter-spacing: .22em; text-transform: uppercase; color: var(--mute); }

.rail-ctrl { display: flex; gap: 10px; flex: none; }
.rail-btn { --c: 10px; width: 52px; height: 52px; border: 0; background: rgba(255, 255, 255, .09); color: var(--ink); font-size: 20px; cursor: pointer; clip-path: var(--cut); transition: background-color .25s, color .25s; }
.rail-btn:hover { background: var(--cyan); color: #06121a; }
.rail { list-style: none; margin: 48px 0 0; display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: rgba(116, 241, 255, .4) transparent;
  padding: 0 var(--pad) 26px max(var(--pad), calc((100vw - var(--maxw)) / 2)); scroll-padding-left: max(var(--pad), calc((100vw - var(--maxw)) / 2)); }
.alien { --c: 22px; position: relative; flex: 0 0 clamp(236px, 23vw, 292px); aspect-ratio: 3 / 4.25; scroll-snap-align: start; background: #333849; clip-path: var(--cut); overflow: hidden; }
.alien img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; -webkit-mask-image: radial-gradient(125% 95% at 50% 36%, #000 52%, transparent 100%); mask-image: radial-gradient(125% 95% at 50% 36%, #000 52%, transparent 100%); transition: transform 1.2s var(--ease); }
.alien:hover img { transform: scale(1.07); }
.alien::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 42%, rgba(7, 10, 20, .94) 80%); }
.alien-txt { position: absolute; inset: auto 0 0 0; z-index: 1; padding: 20px 22px 24px; }
.alien .tag { font: 700 11px/1 Barlow, sans-serif; letter-spacing: .24em; text-transform: uppercase; color: var(--cyan); }
.alien h3 { margin: 9px 0 6px; font: 700 25px/1.05 Barlow, sans-serif; letter-spacing: .03em; text-transform: uppercase; }
.alien p { font-size: 14.5px; line-height: 1.45; color: var(--mute); }
.is-boss { background: #3b2a36; box-shadow: inset 0 3px 0 var(--danger); }
.is-boss .tag { color: var(--danger); }
.is-boss::after { background: linear-gradient(180deg, rgba(255, 90, 68, .1) 0%, transparent 40%, rgba(20, 6, 10, .95) 80%); }

.timeline { position: relative; margin-top: clamp(48px, 6vw, 80px); }
.tl-line { position: absolute; left: 0; right: 0; top: 67px; height: 2px; background: linear-gradient(90deg, var(--amber), var(--danger)); }
.tl-line i { position: absolute; left: calc(var(--p) * 1%); top: -3px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 10px var(--danger); }
.timeline ol { list-style: none; margin: 0; padding: 0; position: relative; height: 112px; }
.tl-node { position: absolute; left: calc(var(--p) * 1%); transform: translateX(-50%); text-align: center; white-space: nowrap; }
.tl-node b { position: relative; display: block; padding-bottom: 30px; font: 700 34px/1 Barlow, sans-serif; font-variant-numeric: tabular-nums; }
.tl-node small { display: block; margin-bottom: 4px; font: 600 11px/1 Barlow, sans-serif; letter-spacing: .22em; text-transform: uppercase; color: var(--mute); }
.tl-node b::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 14px; height: 14px; margin-left: -7px; background: var(--amber); transform: rotate(45deg); box-shadow: 0 0 0 5px var(--bg); transition: box-shadow 1.4s; }
.tl-node span { font: 600 12.5px/1.2 Barlow, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }
.tl-node.boss b::after { background: var(--danger); } .tl-node.boss span { color: #ff9a8a; }
.tl-node.final b { color: var(--amber); } .tl-node.final b::after { width: 18px; height: 18px; margin-left: -9px; bottom: 2px; }
.tl-node:first-child { transform: none; text-align: left; } .tl-node:first-child b::after { left: 7px; }
.tl-node:last-child { transform: translateX(-100%); text-align: right; } .tl-node:last-child b::after { left: auto; right: 0; margin: 0; }
.tl-note { display: flex; align-items: center; gap: 10px; margin-top: 10px; font: 600 12px/1 Barlow, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--mute); }
.tl-note i { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 10px var(--danger); }
#goal .cards { margin-top: clamp(40px, 5vw, 64px); }
.ach { margin-top: clamp(56px, 7vw, 96px); }
.ach ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; }
.ach img { width: 100%; height: auto; border-radius: 12%; opacity: .92; transition: transform .4s var(--ease), opacity .4s; }
.ach li:hover img { transform: translateY(-5px) scale(1.06); opacity: 1; }
.catch { margin-top: clamp(72px, 9vw, 124px); }

/* ---------- Medien */
.trailer { position: relative; margin-top: clamp(40px, 5vw, 64px); aspect-ratio: 16 / 9; background: #000; }
.trailer video { width: 100%; height: 100%; object-fit: cover; }
.trailer-play { display: none; position: absolute; inset: 0; place-items: center; border: 0; cursor: pointer; color: #1c1008; background: linear-gradient(180deg, rgba(7, 10, 20, .05), rgba(7, 10, 20, .55)); }
.js .trailer-play { display: grid; } .trailer.playing .trailer-play { display: none; }
.trailer-play .ic { --c: 18px; width: 104px; height: 104px; padding: 32px; background: var(--amber); clip-path: var(--cut); transition: transform .45s var(--ease), background-color .25s; }
.trailer-play:hover .ic { transform: scale(1.1); background: var(--amber-hi); }
.trailer-play span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.note { margin-top: 12px; font-size: 13px; color: var(--mute); }
.gallery { list-style: none; padding: 0; margin: clamp(32px, 4vw, 56px) 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; gap: 14px; }
.gallery .w2 { grid-column: span 2; grid-row: span 2; } .gallery .r { grid-column: 3 / span 2; }
.shot { --c: 16px; display: block; height: 100%; cursor: zoom-in; }
.shot img { height: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.glance { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.glance .h-xl, .faq .h-xl { font-size: clamp(36px, 4.8vw, 70px); }
.facts { --c: 22px; padding: 10px 30px 14px; background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025)); clip-path: var(--cut); }
.facts div { display: grid; grid-template-columns: 118px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.facts div:last-child { border-bottom: 0; }
.facts dt { padding-top: 3px; font: 600 11.5px/1.3 Barlow, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.facts dd { font-size: 16px; }

.faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq-list { border-top: 1px solid var(--line); }
details { border-bottom: 1px solid var(--line); }
summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary h3 { font: 600 19px/1.3 Barlow, sans-serif; transition: color .25s; }
summary:hover h3 { color: var(--accent); }
summary i { position: relative; flex: none; width: 16px; height: 16px; }
summary i::before, summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: var(--accent); transition: transform .35s var(--ease); }
summary i::after { transform: rotate(90deg); } details[open] summary i::after { transform: rotate(0); }
details p { padding: 0 44px 26px 0; color: var(--mute); }

/* ---------- Fuß */
.foot { position: relative; padding: 64px 0 34px; border-top: 1px solid var(--line); background: rgba(0, 0, 0, .28); }
.foot-in { display: grid; grid-template-columns: 1.2fr 1fr auto; gap: 40px; align-items: center; }
.foot-brand p, .foot-studio p { margin-top: 10px; font-size: 14px; color: var(--mute); }
.foot-studio { display: flex; align-items: center; gap: 18px; } .foot-studio img { width: 84px; height: auto; opacity: .92; } .foot-studio p { margin: 0; }
.foot-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; text-align: right; }
.foot-links a { font: 600 12.5px/1 Barlow, sans-serif; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; color: var(--mute); transition: color .25s; }
.foot-links a:hover { color: var(--ink); }
.foot-legal { margin-top: 44px; font-size: 12.5px; color: rgba(246, 239, 230, .45); }

/* ---------- Bildbetrachter */
.lb { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink); }
.lb::backdrop { background: rgba(4, 5, 10, .93); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.lb figure { height: 100%; display: grid; place-content: center; justify-items: center; gap: 16px; padding: 60px 16px; }
.lb img { width: auto; height: auto; max-width: min(94vw, 1600px); max-height: 80dvh; }
.lb figcaption { font-size: 14px; letter-spacing: .06em; color: var(--mute); text-align: center; }
.lb button { position: fixed; z-index: 2; width: 52px; height: 52px; border: 0; background: rgba(255, 255, 255, .1); color: var(--ink); font-size: 22px; cursor: pointer; transition: background-color .25s, color .25s; }
.lb button:hover { background: var(--amber); color: #1c1008; }
.lb-x { top: 18px; right: 18px; } .lb-prev { left: 18px; top: 50%; margin-top: -26px; } .lb-next { right: 18px; top: 50%; margin-top: -26px; }

/* ---------- Rechtstexte */
.legal-in { padding: 130px 0 100px; max-width: 760px; }
.legal-in h2 { margin: 36px 0 10px; font: 700 18px/1.2 Barlow, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.legal-in p { color: var(--mute); margin-top: 12px; } .legal-in p a:not(.btn) { color: var(--ink); text-underline-offset: 3px; } .legal-in .btn { margin-top: 40px; }
.warn { padding: 12px 16px; border-left: 3px solid var(--amber); background: rgba(255, 179, 71, .09); color: var(--ink) !important; margin-top: 24px !important; }

/* ---------- 3D-Modelle (modelle.js) */
.m3d { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .9s ease; }
.has3d > .m3d { opacity: 1; }
.alien img { transition: transform 1.2s var(--ease), opacity .6s ease; }
.alien.has3d { background: radial-gradient(84% 54% at 50% 36%, #434c69 0%, #1b2034 70%, #10131f 100%); }
.alien.has3d img { opacity: 0; }
.alien.has3d::before { content: ""; position: absolute; left: 12%; right: 12%; top: 59%; height: 9%; background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, .62), transparent 100%); }
.is-boss.has3d { background: radial-gradient(84% 54% at 50% 36%, #62384a 0%, #27151e 70%, #160c12 100%); }
#world { overflow-x: clip; }
#world > .wrap { position: relative; }
.planet { position: absolute; z-index: -1; right: clamp(-400px, -23vw, -130px); top: clamp(-280px, -15vw, -100px); width: clamp(460px, 62vw, 900px); aspect-ratio: 1; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 52%, transparent 96%); mask-image: linear-gradient(180deg, #000 52%, transparent 96%); }

/* ---------- Animierte Schrift und 3D-Effekte (site.js, zweiter Teil) */
.hero-sky { translate: calc(var(--mx, 0) * -18px) calc(var(--my, 0) * -11px); }
.hero-copy { translate: calc(var(--mx, 0) * 9px) calc(var(--my, 0) * 6px); }
.hero h1 { transform: perspective(1000px) rotateY(calc(var(--mx, 0) * 6deg)) rotateX(calc(var(--my, 0) * -5deg)); transform-origin: 30% 60%; }
/* Solange die Buchstaben einzeln stehen, darf der Titel keinen Filter tragen: Filter am Titel + Perspektive der
   Wörter = unsichtbar (Chrome). site.js setzt den Titel nach der Animation wieder als einfachen Text ein. */
.hero h1.split-ch { background: none; filter: none; transition: none; }
.hero h1 .wd { display: inline-block; white-space: nowrap; perspective: 800px; }
.hero h1 .ch { display: inline-block; transform-origin: 50% 100%; transform: translateY(.38em) rotateX(-94deg); opacity: 0;
  background: linear-gradient(180deg, var(--amber-hi) 6%, var(--amber) 46%, var(--amber-lo) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  transition: transform 1.1s var(--ease) calc(var(--i) * 55ms + .2s), opacity .5s ease calc(var(--i) * 55ms + .2s); }
.hero h1.in .ch { transform: none; opacity: 1; }
.js .split.rv { opacity: 1; transform: none; }
.split .w { display: inline-block; perspective: 700px; vertical-align: top; }
.split .w > span { display: inline-block; transform-origin: 50% 100%; transform: translateY(.5em) rotateX(-82deg); opacity: 0;
  transition: transform 1s var(--ease) calc(var(--i) * 80ms), opacity .45s ease calc(var(--i) * 80ms); }
.split.in .w > span { transform: none; opacity: 1; }
.js .rv.eyebrow::before { width: 0; transition: width .9s var(--ease) .25s; }
.js .rv.eyebrow.in::before { width: 34px; }
.flip3d { transform-origin: 50% 100%; will-change: transform; }
.bigtime.rolle { line-height: 1; margin-bottom: 0; }
.bigtime .dg { display: inline-block; height: 1em; overflow: hidden; vertical-align: top; }
.bigtime .dg > span { display: block; transition: transform 1.9s cubic-bezier(.16, .8, .2, 1) calc(var(--i) * 140ms); }
.bigtime .dg i { display: block; height: 1em; font-style: normal; }
.bigtime.in .dg > span { transform: translateY(-9em); }
.js .timeline .tl-line { transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.7s var(--ease) .2s; }
.js .timeline.in .tl-line { transform: scaleX(1); }
.js .timeline .tl-node { opacity: 0; transition: opacity .6s ease calc(var(--p) * 13ms + .3s); }
.js .timeline.in .tl-node { opacity: 1; }

/* ---------- Bewegte Ausschnitte über den Bildern */
.row-img { position: relative; }
.clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease; pointer-events: none; }
.clip.on { opacity: 1; }
.wide figcaption { z-index: 1; }

/* ---------- Einblenden */
.js .rv { opacity: 0; transform: translateY(26px); transition: opacity .95s var(--ease) var(--d, 0ms), transform .95s var(--ease) var(--d, 0ms); }
.js .rv.in { opacity: 1; transform: none; }

/* ---------- schmalere Bildschirme */
@media (max-width: 1120px) {
  .clock-state { display: none; }
  .nav-links ul { gap: 14px; } .nav-links a { letter-spacing: .12em; }
  .events-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ach ul { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .burger { display: block; flex: none; }
  .m-only { display: block; }
  .nav-links .m-only a { color: var(--amber); font-size: 14px; }
  .nav-cta { display: none; }
  .nav-links { position: fixed; inset: 0; z-index: -1; margin: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--bg) 96%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; }
  .nav.open .nav-links { opacity: 1; visibility: visible; }
  .nav-links ul { flex-direction: column; align-items: center; gap: 26px; } .nav-links a { font-size: 20px; letter-spacing: .2em; }
  .nav-right { margin-left: auto; }
  .pitch, .row, .glance, .faq { grid-template-columns: 1fr; }
  .row-flip .row-img { order: 0; }
  .c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .c3 { grid-template-columns: 1fr; }
  .sites, .ncards { grid-template-columns: 1fr; gap: 40px; }
  .site img, .ncard img { aspect-ratio: 16 / 9; }
  .arsenal ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gallery .w2, .gallery .r { grid-column: span 2; grid-row: auto; }
  .foot-in { grid-template-columns: 1fr; } .foot-links { text-align: left; }
  .wide img { aspect-ratio: 16 / 10; } .wide figcaption { padding: 50px 20px 16px 36px; font-size: 11.5px; }
  .bigtime { -webkit-text-stroke-width: 1.5px; }
  .dusk { align-items: end; padding-bottom: 90px; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .h-xl { font-size: clamp(29px, 8.6vw, 42px); } .glance .h-xl, .faq .h-xl { font-size: clamp(28px, 8vw, 38px); }
  .nav { height: 60px; gap: 12px; } .brand span { font-size: 13px; letter-spacing: .12em; } .brand-ic { width: 22px; height: 22px; }
  .clock { font-size: 12px; } .nav-right { gap: 10px; } .nav-right .lang { display: none; }
  .eyebrow { letter-spacing: .2em; font-size: 12px; }
  .hero-meta { gap: 8px 16px; letter-spacing: .14em; font-size: 11px; } .hero-meta li + li::before { margin-right: 16px; }
  .hero-stage { min-height: 640px; } .hero-copy { padding-bottom: 122px; }
  .hero-sky img { object-position: 50% 58%; }
  .dial { gap: 8px; bottom: 20px; } .dial-seg b { font-size: 14px; } .dial-seg em { font-size: 9.5px; letter-spacing: .12em; }
  .btn { padding: 1em 1.2em; font-size: 13px; letter-spacing: .12em; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; }
  .c4 { grid-template-columns: 1fr; }
  .events-list { grid-template-columns: 1fr; }
  .cut { --c: 18px; }
  .sec-head.has-ctrl { display: block; } .rail-ctrl { margin-top: 26px; }
  .tl-line { display: none; }
  .timeline ol { height: auto; display: grid; gap: 16px; }
  .tl-node, .tl-node:first-child, .tl-node:last-child { position: static; transform: none; text-align: left; display: flex; align-items: baseline; gap: 16px; }
  .tl-node b { padding: 0; min-width: 76px; display: flex; align-items: baseline; gap: 8px; } .tl-node small { margin: 0; } .tl-node b::after { display: none; }
  .tl-note { margin-top: 22px; }
  .facts { padding-inline: 22px; } .facts div { grid-template-columns: 1fr; gap: 4px; }
  details p { padding-right: 0; }
  .lb-prev, .lb-next { top: auto; bottom: 18px; margin: 0; }
  .ticker span { font-size: 16px; }
  .planet { width: 360px; right: -150px; top: -110px; opacity: .6; }
  .arsenal ul { gap: 12px; } .arsenal li { padding: 22px 12px 16px; } .arsenal span { letter-spacing: .12em; font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .js .rv { opacity: 1; transform: none; }
  .js .timeline .tl-line { transform: none; } .js .timeline .tl-node { opacity: 1; }
  .dial-seg.is-on .bar i { width: 100%; }
}