/* ============================================================
   CREATIVE AGRAR — cinematic map studio · edition 4
   Vollflächige Bild-Bänder · Tiefe · Rot
   Archivo + Inter + Rajdhani
   ============================================================ */

:root {
  --red: #e0232a;
  --red-bright: #ff473d;
  --red-deep: #9e1519;
  --red-glow: rgba(224, 35, 42, .55);
  --fsgreen: #86d022;

  --bg0: #edece8;
  --bg1: #f6f5f1;
  --panel-tint: rgba(255, 255, 255, .72);
  --panel-solid: #ffffff;
  --row: rgba(20, 18, 16, .04);
  --ink: #14130f;
  --ink-soft: #56534c;
  --ink-faint: #8a867d;
  --line: rgba(20, 18, 14, .1);
  --line-strong: rgba(20, 18, 14, .2);
  --hair: rgba(20, 18, 14, .08);
  --edge-light: rgba(255, 255, 255, .9);
  --topbar-bg: rgba(246, 245, 241, .78);

  --maxw: 1300px;
  --gut: 32px;
  --display: "Archivo", "Segoe UI", system-ui, sans-serif;
  --ui: "Inter", system-ui, sans-serif;
  --hud: "Rajdhani", "Archivo", sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --shadow-1: 0 2px 8px rgba(15, 14, 12, .06), 0 18px 40px rgba(15, 14, 12, .1);
  --shadow-2: 0 6px 18px rgba(15, 14, 12, .12), 0 34px 80px rgba(15, 14, 12, .18);
  --shadow-red: 0 12px 44px rgba(224, 35, 42, .42);
}

:root[data-theme="dark"] {
  --red: #ee2f34;
  --red-bright: #ff574c;
  --red-glow: rgba(255, 71, 61, .5);
  --bg0: #090807;
  --bg1: #0f0d0c;
  --panel-tint: rgba(28, 25, 24, .62);
  --panel-solid: #171413;
  --row: rgba(255, 250, 245, .04);
  --ink: #f5f2ed;
  --ink-soft: #aaa49b;
  --ink-faint: #726d64;
  --line: rgba(245, 240, 235, .1);
  --line-strong: rgba(245, 240, 235, .22);
  --hair: rgba(245, 240, 235, .07);
  --edge-light: rgba(255, 255, 255, .1);
  --topbar-bg: rgba(9, 8, 7, .55);
  --shadow-1: 0 2px 10px rgba(0, 0, 0, .4), 0 22px 50px rgba(0, 0, 0, .5);
  --shadow-2: 0 8px 22px rgba(0, 0, 0, .5), 0 44px 100px rgba(0, 0, 0, .62);
  --shadow-red: 0 14px 48px rgba(238, 47, 52, .45);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --red: #ee2f34; --red-bright: #ff574c; --red-glow: rgba(255, 71, 61, .5);
    --bg0: #090807; --bg1: #0f0d0c; --panel-tint: rgba(28, 25, 24, .62); --panel-solid: #171413;
    --row: rgba(255, 250, 245, .04); --ink: #f5f2ed; --ink-soft: #aaa49b; --ink-faint: #726d64;
    --line: rgba(245, 240, 235, .1); --line-strong: rgba(245, 240, 235, .22); --hair: rgba(245, 240, 235, .07);
    --edge-light: rgba(255, 255, 255, .1); --topbar-bg: rgba(9, 8, 7, .55);
    --shadow-1: 0 2px 10px rgba(0, 0, 0, .4), 0 22px 50px rgba(0, 0, 0, .5);
    --shadow-2: 0 8px 22px rgba(0, 0, 0, .5), 0 44px 100px rgba(0, 0, 0, .62);
    --shadow-red: 0 14px 48px rgba(238, 47, 52, .45);
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--ui); color: var(--ink); background: var(--bg0);
  line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden; transition: background-color .5s var(--ease), color .5s var(--ease);
}
body.no-scroll { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
::selection { background: var(--red); color: #fff; }
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }

.atmos { position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(1200px 620px at 84% -8%, rgba(224, 35, 42, .14), transparent 60%),
    radial-gradient(900px 700px at 6% 14%, rgba(224, 35, 42, .06), transparent 55%); }
:root[data-theme="dark"] .atmos {
  background:
    radial-gradient(1200px 640px at 84% -6%, rgba(238, 47, 52, .16), transparent 60%),
    radial-gradient(1000px 780px at 5% 16%, rgba(120, 20, 24, .14), transparent 55%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .atmos {
  background:
    radial-gradient(1200px 640px at 84% -6%, rgba(238, 47, 52, .16), transparent 60%),
    radial-gradient(1000px 780px at 5% 16%, rgba(120, 20, 24, .14), transparent 55%); } }
.grain { position: fixed; inset: -200%; z-index: 320; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .04; mix-blend-mode: overlay; animation: grainshift 6s steps(5) infinite; }
:root[data-theme="dark"] .grain { opacity: .06; }
@keyframes grainshift { 0%{transform:translate(0,0)}20%{transform:translate(-6%,4%)}40%{transform:translate(4%,-6%)}60%{transform:translate(-3%,5%)}80%{transform:translate(5%,3%)}100%{transform:translate(0,0)} }

::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--bg0); }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--red-deep), var(--red)); }
::-webkit-scrollbar-thumb:hover { background: var(--red-bright); }

/* ---------- Typo-Helfer ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: var(--hud); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .24em; color: var(--red-bright); margin-bottom: 20px; }
.eyebrow::before { content: ""; width: 34px; height: 2px; background: var(--red); }
.eyebrow.on-img { color: #fff; }
.eyebrow.on-img::before { background: var(--red-bright); box-shadow: 0 0 12px var(--red-glow); }
.eyebrow em { font-style: normal; opacity: .55; }

/* ---------- Buttons ---------- */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--display); font-weight: 700; font-size: 13.5px;
  text-transform: uppercase; letter-spacing: .07em;
  padding: 16px 32px; border: 1px solid transparent; cursor: pointer;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .25s, color .25s, background .25s;
}
.btn svg { flex: none; }
.btn--red { color: #fff; background: linear-gradient(180deg, var(--red-bright), var(--red)); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 8px 24px rgba(224,35,42,.34); }
.btn--red::after { content: ""; position: absolute; top: 0; left: -60%; width: 45%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent); transform: skewX(-18deg); transition: left .6s var(--ease-out); }
.btn--red:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), var(--shadow-red); }
.btn--red:hover::after { left: 130%; }
.btn--panel { background: var(--panel-tint); border-color: var(--line); border-top-color: var(--edge-light); color: var(--ink); backdrop-filter: blur(10px); }
.btn--panel:hover { border-color: var(--red); color: var(--red-bright); transform: translateY(-3px); box-shadow: var(--shadow-1); }
.btn--ghost { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.42); color: #fff; backdrop-filter: blur(10px); }
.btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.16); transform: translateY(-3px); }
.btn--lg { padding: 19px 42px; font-size: 15px; }

.link { color: var(--red-bright); font-weight: 600; font-size: 14.5px; }
.link:hover { text-decoration: underline; }

/* ---------- Chips / State ---------- */
.tagchip { display: inline-block; font-family: var(--hud); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .14em; padding: 5px 12px; background: linear-gradient(180deg, var(--red-bright), var(--red)); color: #fff; box-shadow: 0 4px 14px rgba(224,35,42,.34); }
.state { display: inline-flex; align-items: center; gap: 8px; font-family: var(--hud); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; padding: 5px 12px; background: rgba(8,8,10,.5); color: #fff; border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(8px); }
.state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.state--live { color: #a3e85c; border-color: rgba(163,232,92,.5); }
.state--live::before { background: var(--fsgreen); box-shadow: 0 0 8px var(--fsgreen); animation: blinkdot 2s ease-in-out infinite; }
.state--soon { color: #ffcb47; border-color: rgba(255,203,71,.5); }
.state--soon::before { background: #ffb020; }
.state--wip { color: #dcdce0; }
.state--wip::before { background: #a8a8b0; }
.state--onlight { background: var(--panel-tint); color: var(--ink-soft); border-color: var(--line-strong); }
@keyframes blinkdot { 0%,100%{opacity:1}50%{opacity:.3} }

/* ---------- Panels & Key-Value ---------- */
.panel { position: relative; background: linear-gradient(180deg, rgba(255,255,255,.05), transparent 40%), var(--panel-tint); border: 1px solid var(--line); border-top-color: var(--edge-light); backdrop-filter: blur(18px) saturate(1.1); box-shadow: var(--shadow-1); }
.kv { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 20px; font-size: 13.5px; }
.kv + .kv { border-top: 1px solid var(--hair); }
.kv i { font-style: normal; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .1em; font-size: 11.5px; font-weight: 600; }
.kv b { font-family: var(--hud); font-weight: 700; font-size: 15px; letter-spacing: .04em; text-align: right; }
.kv b.red { color: var(--red-bright); } .kv b.green { color: var(--fsgreen); }

/* Auswahl-Ecken */
.sel { position: relative; }
.sel::before, .sel::after { content: ""; position: absolute; width: 20px; height: 20px; z-index: 4; opacity: 0; transition: opacity .25s, transform .35s var(--ease-out); pointer-events: none; }
.sel::before { top: -6px; left: -6px; border-top: 2px solid var(--red-bright); border-left: 2px solid var(--red-bright); transform: translate(7px,7px); }
.sel::after { bottom: -6px; right: -6px; border-bottom: 2px solid var(--red-bright); border-right: 2px solid var(--red-bright); transform: translate(-7px,-7px); }
.sel:hover::before, .sel:hover::after { opacity: 1; transform: translate(0,0); }

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 110; border-bottom: 1px solid transparent; transition: background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s; }
.topbar::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6,6,8,.7), transparent); opacity: 1; transition: opacity .4s var(--ease); pointer-events: none; }
.topbar.is-scrolled { background: var(--topbar-bg); backdrop-filter: blur(20px) saturate(1.2); border-bottom-color: var(--line); }
.topbar.is-scrolled::after { opacity: 0; }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 80px; transition: height .35s var(--ease); }
.topbar.is-scrolled .topbar__inner { height: 64px; }

.brand { display: flex; align-items: center; gap: 13px; }
.brand__svg { height: 36px; width: auto; display: block; color: #fff; transition: color .4s var(--ease); filter: drop-shadow(0 2px 8px rgba(0,0,0,.3)); }
.brand__svg-c { fill: currentColor; } .brand__svg-a { fill: var(--red); }
.topbar.is-scrolled .brand__svg { color: var(--ink); }
.brand__lock { display: flex; flex-direction: column; line-height: 1; padding-left: 13px; border-left: 2px solid var(--red); }
.brand__lock strong { font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: .16em; color: #fff; transition: color .4s var(--ease); }
.brand__lock span { font-family: var(--hud); font-weight: 600; font-size: 9.5px; letter-spacing: .46em; color: var(--red-bright); margin-top: 3px; }
.topbar.is-scrolled .brand__lock strong { color: var(--ink); }

.topbar__actions { display: flex; align-items: center; gap: 8px; }
.topnav { display: flex; align-items: center; gap: 2px; margin-right: 8px; }
.topnav a { font-family: var(--display); font-weight: 600; font-size: 14px; color: rgba(255,255,255,.85); padding: 9px 15px; transition: color .25s, background .25s; }
.topbar.is-scrolled .topnav a { color: var(--ink); }
.topnav a:hover { color: var(--red-bright); }

.hudbox { display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 17px; color: #fff; border: 1px solid transparent; font-family: var(--display); font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; transition: filter .2s, transform .25s var(--ease-out), box-shadow .3s; }
.hudbox svg { flex: none; }
.hudbox--donate { background: linear-gradient(180deg, var(--red-bright), var(--red)); border-color: var(--red); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 4px 16px rgba(224,35,42,.3); }
a.hudbox--donate:hover { filter: brightness(1.08); transform: translateY(-2px); box-shadow: var(--shadow-red); }

.theme-toggle { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; background: rgba(8,8,10,.42); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(12px); cursor: pointer; color: #fff; transition: color .25s, border-color .25s, background .3s, transform .25s var(--ease-out); }
.theme-toggle:hover { color: var(--red-bright); border-color: var(--red-bright); transform: translateY(-2px); }
.topbar.is-scrolled .theme-toggle { color: var(--ink); background: var(--panel-tint); border-color: var(--line); }
.theme-toggle svg { grid-area: 1/1; }
.theme-toggle .theme-toggle__sun { display: none; } .theme-toggle .theme-toggle__moon { display: block; }
:root[data-theme="dark"] .theme-toggle .theme-toggle__sun { display: block; } :root[data-theme="dark"] .theme-toggle .theme-toggle__moon { display: none; }

.menu-btn { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; background: linear-gradient(180deg, var(--red-bright), var(--red)); color: #fff; border: 1px solid var(--red); cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.25); transition: filter .2s, transform .25s var(--ease-out); }
.menu-btn:hover { filter: brightness(1.08); transform: translateY(-2px); }
.menu-btn__lines { display: flex; flex-direction: column; gap: 4px; }
.menu-btn__lines span { display: block; width: 18px; height: 2px; background: #fff; transition: transform .3s var(--ease), opacity .3s; }
.menu-btn.is-open .menu-btn__lines span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-btn.is-open .menu-btn__lines span:nth-child(2) { opacity: 0; }
.menu-btn.is-open .menu-btn__lines span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 860px) { .topnav { display: none; } }

/* ---------- Vollbild-Menü ---------- */
.menu { position: fixed; inset: 0; z-index: 100; background: rgba(7,6,6,.92); backdrop-filter: blur(20px); visibility: hidden; opacity: 0; transition: opacity .4s var(--ease), visibility .4s; }
.menu.is-open { visibility: visible; opacity: 1; }
.menu__inner { min-height: 100vh; display: grid; grid-template-columns: 1.6fr 1fr; align-items: center; gap: 40px; padding-top: 90px; padding-bottom: 60px; }
.menu__links { display: flex; flex-direction: column; }
.menu__links a { display: flex; align-items: center; gap: 22px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.1); font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; font-size: clamp(34px, 5.5vw, 68px); line-height: 1; color: #fff; opacity: 0; transform: translateY(24px); transition: color .25s, transform .3s var(--ease-out); }
.menu.is-open .menu__links a { opacity: 1; transform: none; }
.menu.is-open .menu__links a:nth-child(1){transition-delay:.06s} .menu.is-open .menu__links a:nth-child(2){transition-delay:.12s} .menu.is-open .menu__links a:nth-child(3){transition-delay:.18s} .menu.is-open .menu__links a:nth-child(4){transition-delay:.24s} .menu.is-open .menu__links a:nth-child(5){transition-delay:.3s}
.menu__links a span { font-family: var(--hud); font-weight: 700; font-size: 15px; letter-spacing: .1em; color: var(--red-bright); width: 34px; }
.menu__links a svg { margin-left: auto; opacity: 0; transform: translateX(-10px); transition: opacity .25s, transform .3s var(--ease-out); color: var(--red-bright); }
.menu__links a:hover { color: var(--red-bright); }
.menu__links a:hover svg { opacity: 1; transform: none; }
.menu__aside { align-self: end; }
.menu__note { font-family: var(--display); font-weight: 600; font-size: 18px; line-height: 1.5; color: rgba(255,255,255,.7); margin-bottom: 24px; }
.menu__social { display: flex; flex-wrap: wrap; gap: 10px; }
.menu__social a { font-family: var(--hud); font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: .14em; color: #fff; padding: 9px 16px; border: 1px solid rgba(255,255,255,.2); transition: background .2s, border-color .2s, color .2s; }
.menu__social a:hover { background: var(--red); border-color: var(--red); }
@media (max-width: 820px) { .menu__inner { grid-template-columns: 1fr; align-content: center; } .menu__aside { align-self: start; } }

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; height: 100svh; min-height: 640px; overflow: hidden; background: #0a0807; }
.slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1s var(--ease), visibility 1s; }
.slide__bg { position: absolute; inset: -6% -2% -2%;
  background-image: linear-gradient(80deg, rgba(7,6,6,.92) 5%, rgba(7,6,6,.34) 46%, rgba(7,6,6,.08) 72%), linear-gradient(to top, rgba(7,6,6,.96) 2%, transparent 34%), var(--img);
  background-size: cover; background-position: center; transform: scale(1.06) translateY(var(--par,0)); will-change: transform; }
.slide::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 80% at 18% 92%, rgba(224,35,42,.18), transparent 55%); mix-blend-mode: screen; }
.slide.is-active { opacity: 1; visibility: visible; }
.slide.is-active .slide__bg { animation: heroZoom 12s var(--ease) forwards; }
@keyframes heroZoom { from { transform: scale(1.1) translateY(var(--par,0)); } to { transform: scale(1.17) translateY(var(--par,0)); } }
.hero__grid { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .5; background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(75% 80% at 28% 55%, #000, transparent 92%); }

.slide__inner { position: absolute; left: 0; right: 0; bottom: 130px; z-index: 3; }
.slide__panel { max-width: 780px; color: #fff; opacity: 0; transform: translateY(36px); }
.slide.is-active .slide__panel { animation: riseIn .9s var(--ease-out) .2s forwards; }
@keyframes riseIn { to { opacity: 1; transform: none; } }
.slide__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--hud); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .26em; color: #fff; padding: 9px 16px 9px 14px; margin-bottom: 24px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18); border-left: 2px solid var(--red-bright); backdrop-filter: blur(8px); }
.slide__eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--red-bright); box-shadow: 0 0 12px var(--red-bright); animation: blinkdot 2s infinite; }
.slide__title { font-family: var(--display); font-weight: 800; font-size: clamp(58px, 10vw, 150px); line-height: .9; letter-spacing: -.025em; text-transform: uppercase; margin-bottom: 20px; text-shadow: 0 12px 70px rgba(0,0,0,.6); }
.slide__text { font-size: 18.5px; color: rgba(255,255,255,.86); margin-bottom: 32px; max-width: 520px; line-height: 1.6; }
.slide__actions { display: flex; gap: 13px; flex-wrap: wrap; }

.hero__scrollcue { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 10px; font-family: var(--hud); font-weight: 600; font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.hero__scrollcue span { display: block; width: 1px; height: 46px; background: linear-gradient(rgba(255,255,255,.5), transparent); position: relative; overflow: hidden; }
.hero__scrollcue span::after { content: ""; position: absolute; top: -50%; left: 0; width: 100%; height: 50%; background: var(--red-bright); animation: cue 1.8s var(--ease) infinite; }
@keyframes cue { 0%{top:-50%}100%{top:100%} }

.hero__tabs { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; background: rgba(7,6,6,.72); border-top: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(20px); }
.hero__tab { position: relative; flex: 1; overflow: hidden; display: flex; align-items: center; gap: 14px; text-align: left; padding: 18px 28px; background: none; border: 0; border-left: 1px solid rgba(255,255,255,.08); cursor: pointer; color: rgba(255,255,255,.5); transition: color .25s, background .25s; }
.hero__tab:first-child { border-left: 0; }
.hero__tab:hover { color: #fff; background: rgba(255,255,255,.06); }
.hero__tab i { font-family: var(--hud); font-style: normal; font-weight: 700; font-size: 15px; letter-spacing: .1em; color: var(--red-bright); }
.hero__tab b { font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero__tab::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--red-bright); box-shadow: 0 0 16px var(--red-glow); }
.hero__tab.is-active { color: #fff; background: linear-gradient(180deg, rgba(224,35,42,.22), rgba(224,35,42,.05)); }
.hero__tab.is-active::after { width: 100%; transition: width 6.5s linear; }

/* ============================================================
   STAT-STRIP (unter Hero)
   ============================================================ */
.statstrip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--panel-solid); }
.statstrip__row { display: grid; grid-template-columns: repeat(4, 1fr); }
.statstrip__item { display: flex; flex-direction: column; gap: 4px; padding: 30px 30px; border-left: 1px solid var(--hair); }
.statstrip__item:first-child { border-left: 0; padding-left: 0; }
.statstrip__item b { font-family: var(--display); font-weight: 800; font-size: clamp(26px, 3vw, 40px); line-height: 1; letter-spacing: -.01em; }
.statstrip__item b em { font-style: normal; color: var(--red-bright); }
.statstrip__item span { font-family: var(--hud); font-weight: 600; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); }
@media (max-width: 720px) { .statstrip__row { grid-template-columns: 1fr 1fr; } .statstrip__item { padding: 22px; border-top: 1px solid var(--hair); } .statstrip__item:nth-child(odd) { border-left: 0; padding-left: 22px; } }

/* ============================================================
   SEKTIONEN
   ============================================================ */
.sec { position: relative; padding: 100px 0; }
.sec--tight { padding: 72px 0; }
.sec__head { max-width: 760px; margin-bottom: 52px; }
.sec__head--center { margin-left: auto; margin-right: auto; text-align: center; }
.sec__head--center .eyebrow { justify-content: center; }
.sec__title { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: -.015em; font-size: clamp(34px, 5vw, 66px); line-height: .96; }
.sec__title em { font-style: normal; color: var(--red-bright); }
.sec__sub { color: var(--ink-soft); font-size: 17px; margin-top: 18px; max-width: 580px; }
.sec__head--center .sec__sub { margin-left: auto; margin-right: auto; }

[data-reveal] { opacity: 0; transform: translateY(38px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
[data-reveal="left"] { transform: translateX(-46px); }
[data-reveal="right"] { transform: translateX(46px); }
[data-reveal="scale"] { transform: scale(.96); }
[data-reveal].is-visible { opacity: 1; transform: none; }

/* ============================================================
   FEATURED MAP — vollflächiges Kino-Band
   ============================================================ */
.showcase-map { position: relative; min-height: 88vh; display: flex; align-items: flex-end; overflow: hidden; color: #fff; }
.showcase-map__bg { position: absolute; inset: -6% -2% -2%; z-index: 0; background-image: linear-gradient(70deg, rgba(7,6,6,.9) 12%, rgba(7,6,6,.4) 52%, rgba(7,6,6,.12)), linear-gradient(to top, rgba(7,6,6,.96) 4%, transparent 44%), var(--img); background-size: cover; background-position: center; transform: scale(1.05) translateY(var(--par,0)); will-change: transform; transition: transform 1.4s var(--ease-out); }
.showcase-map:hover .showcase-map__bg { transform: scale(1.09) translateY(var(--par,0)); }
.showcase-map::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(120% 90% at 12% 96%, rgba(224,35,42,.2), transparent 52%); mix-blend-mode: screen; }
.showcase-map__inner { position: relative; z-index: 2; width: 100%; min-width: 0; padding: 0 0 76px; }
.showcase-map__flag { display: inline-flex; align-items: center; gap: 9px; font-family: var(--hud); font-weight: 700; font-size: 12.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--red-bright); margin-bottom: 18px; }
.showcase-map__flag::before { content: ""; width: 26px; height: 2px; background: var(--red-bright); box-shadow: 0 0 12px var(--red-glow); }
.showcase-map__meta { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.showcase-map h2 { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(56px, 9vw, 132px); line-height: .88; letter-spacing: -.025em; margin-bottom: 20px; text-shadow: 0 10px 60px rgba(0,0,0,.6); }
.showcase-map p { color: rgba(255,255,255,.85); font-size: 18px; max-width: 500px; margin-bottom: 30px; line-height: 1.6; }
.showcase-map__stats { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 32px; }
.showcase-map__stat { padding: 14px 22px; background: rgba(12,10,10,.5); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(10px); }
.showcase-map__stat strong { display: block; font-family: var(--hud); font-weight: 700; font-size: 30px; line-height: 1; color: #fff; }
.showcase-map__stat span { display: block; margin-top: 4px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .18em; color: rgba(255,255,255,.6); }
.showcase-map__actions { display: flex; gap: 13px; flex-wrap: wrap; }

/* ============================================================
   SCREENSHOT-BAND (Impressionen, vollflächig)
   ============================================================ */
.shots { position: relative; background: var(--bg1); padding: 0 0 20px; overflow: hidden; border-top: 1px solid var(--line); }
.shots__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 72px var(--gut) 36px; max-width: var(--maxw); margin: 0 auto; }
.shots__track { display: flex; gap: 14px; width: max-content; padding: 0 14px; animation: shots 48s linear infinite; }
.shots:hover .shots__track { animation-play-state: paused; }
.shots__item { position: relative; flex: none; width: 480px; height: 300px; overflow: hidden; background: #1a1412 center/cover no-repeat; box-shadow: var(--shadow-1); }
.shots__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(224,35,42,.16), transparent 60%); opacity: 0; transition: opacity .35s; }
.shots__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.shots__item:hover img { transform: scale(1.07); }
.shots__item:hover::after { opacity: 1; }
@keyframes shots { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 640px) { .shots__item { width: 300px; height: 200px; } }

/* ============================================================
   WEITERE MAPS — dichte Zeilen
   ============================================================ */
.maplist { border-top: 1px solid var(--line-strong); }
.maprow { display: grid; grid-template-columns: 64px 200px 1fr auto; align-items: center; gap: 26px; padding: 22px 16px; border-bottom: 1px solid var(--line); transition: background .3s var(--ease), padding-left .3s var(--ease); }
.maprow:hover { background: var(--panel-tint); padding-left: 26px; }
.maprow__idx { font-family: var(--hud); font-weight: 700; font-size: 15px; letter-spacing: .1em; color: var(--ink-faint); }
.maprow__thumb { position: relative; aspect-ratio: 16/10; overflow: hidden; background: linear-gradient(140deg,#241012,#6b1a1e) center/cover no-repeat; }
.maprow__name { display: flex; flex-direction: column; gap: 8px; }
.maprow__name h3 { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 26px; line-height: 1; letter-spacing: -.01em; transition: color .25s; }
.maprow:hover .maprow__name h3 { color: var(--red-bright); }
.maprow__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.maprow__go { display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid var(--line-strong); color: var(--ink); transition: background .25s, color .25s, border-color .25s, transform .3s var(--ease-out); }
.maprow:hover .maprow__go { background: var(--red); border-color: var(--red); color: #fff; transform: rotate(-45deg); }
@media (max-width: 780px) { .maprow { grid-template-columns: 1fr auto; gap: 14px; } .maprow__idx, .maprow__thumb { display: none; } }

/* ============================================================
   ÜBER UNS
   ============================================================ */
.about { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: center; }
.about__figure { position: relative; }
.about__img { position: relative; aspect-ratio: 4/3; overflow: hidden; background: linear-gradient(140deg,#241012,#6b1a1e) center/cover no-repeat; box-shadow: var(--shadow-2); }
.about__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(7,6,6,.4), transparent 55%); }
.about__figure::before { content: ""; position: absolute; inset: 0; border: 1px solid var(--red); transform: translate(20px,20px); z-index: -1; }
.about__badge { position: absolute; right: -18px; top: 30px; z-index: 3; display: flex; align-items: center; gap: 14px; padding: 16px 22px 16px 18px; }
.about__badge svg { color: var(--red-bright); flex: none; }
.about__badge strong { display: block; font-family: var(--display); font-weight: 800; font-size: 24px; line-height: 1; }
.about__badge small { display: block; margin-top: 3px; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-soft); }
.about__body p { color: var(--ink-soft); font-size: 16.5px; margin-bottom: 16px; }
.about__tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 30px; }
.ptag { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; font-family: var(--hud); font-weight: 600; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); background: var(--panel-tint); border: 1px solid var(--line); }
.ptag svg { color: var(--red-bright); flex: none; }
@media (max-width: 900px) { .about { grid-template-columns: 1fr; gap: 48px; } .about__badge { right: 16px; } }

/* ============================================================
   TEAM
   ============================================================ */
.team { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }
.team--solo { grid-template-columns: minmax(0, 620px); justify-content: center; }
.tmember { position: relative; overflow: hidden; padding: 34px; background: linear-gradient(180deg, rgba(255,255,255,.05), transparent 40%), var(--panel-tint); border: 1px solid var(--line); border-top-color: var(--edge-light); backdrop-filter: blur(18px); box-shadow: var(--shadow-1); text-align: center; transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s; }
.tmember:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); border-color: var(--red); }
.tmember::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--red), var(--red-bright)); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease-out); }
.tmember:hover::before { transform: scaleX(1); }
.tmember__avatar { width: 108px; height: 108px; margin: 0 auto 20px; display: grid; place-items: center; background: linear-gradient(140deg, var(--red), var(--red-deep)) center/cover; color: #fff; font-family: var(--display); font-weight: 800; font-size: 44px; box-shadow: 0 14px 34px rgba(224,35,42,.35); outline: 2px solid var(--red); outline-offset: 4px; }
.tmember h4 { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 25px; letter-spacing: -.01em; }
.tmember__role { display: inline-block; margin-top: 6px; font-family: var(--hud); font-weight: 700; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--red-bright); }
.tmember p { color: var(--ink-soft); font-size: 15px; margin-top: 16px; }

/* ============================================================
   CTA-BAND (Community/Support, vollflächig)
   ============================================================ */
.ctaband { position: relative; overflow: hidden; text-align: center; color: #fff; }
.ctaband__bg { position: absolute; inset: -6% -2% -2%; z-index: 0; background-image: linear-gradient(150deg, rgba(158,21,25,.85), rgba(7,6,6,.86)), var(--img); background-size: cover; background-position: center; transform: scale(1.05) translateY(var(--par,0)); will-change: transform; }
.ctaband__grid { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .35; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(70% 80% at 50% 50%, #000, transparent); }
.ctaband__inner { position: relative; z-index: 2; padding: 130px var(--gut); max-width: 900px; margin: 0 auto; }
.ctaband h2 { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; font-size: clamp(40px, 6.5vw, 92px); line-height: .92; margin-bottom: 18px; }
.ctaband p { font-size: 18.5px; color: rgba(255,255,255,.86); max-width: 520px; margin: 0 auto 34px; }
.ctaband__actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* Support-Streifen */
.support { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 34px; padding: 44px; }
.support__icon { width: 66px; height: 66px; display: grid; place-items: center; background: linear-gradient(180deg, var(--red-bright), var(--red)); color: #fff; box-shadow: var(--shadow-red); animation: heartbeat 2.6s ease-in-out infinite; }
@keyframes heartbeat { 0%,100%{transform:scale(1)}12%{transform:scale(1.12)}24%{transform:scale(1)}36%{transform:scale(1.07)}48%{transform:scale(1)} }
.support__text h3 { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 26px; letter-spacing: -.01em; }
.support__text p { color: var(--ink-soft); font-size: 15px; margin-top: 6px; max-width: 520px; }
@media (max-width: 720px) { .support { grid-template-columns: 1fr; text-align: center; gap: 20px; } .support__icon { margin: 0 auto; } .support__text p { margin-left: auto; margin-right: auto; } }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { position: relative; background: #0a0807; color: #fff; overflow: hidden; }
.footer::before { content: ""; display: block; height: 3px; background: linear-gradient(90deg, var(--red-deep), var(--red-bright), var(--red-deep)); }
.footer__word { font-family: var(--display); font-weight: 800; text-transform: uppercase; text-align: center; font-size: clamp(44px, 9vw, 150px); line-height: 1; letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.14); padding: 56px 12px 4px; user-select: none; transition: -webkit-text-stroke-color .4s; }
.footer__word:hover { -webkit-text-stroke-color: var(--red-glow); }
.footer__top { padding: 36px 0 54px; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 44px; }
.footer__col h5 { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .16em; font-size: 12px; color: #fff; margin-bottom: 18px; }
.footer__col h5::before { content: ""; width: 4px; height: 13px; background: var(--red); }
.footer__col a { display: block; font-size: 14px; color: rgba(255,255,255,.58); padding: 5px 0; transition: color .2s, transform .2s var(--ease-out); }
.footer__col a:hover { color: var(--red-bright); transform: translateX(4px); }
.footer__col--brand .brand { margin-bottom: 16px; }
.footer__col--brand .brand__svg { color: #fff; } .footer__col--brand .brand__lock strong { color: #fff; }
.footer__col--brand p { color: rgba(255,255,255,.52); font-size: 14px; max-width: 320px; margin-bottom: 20px; line-height: 1.7; }
.footer__socials { display: flex; gap: 10px; }
.footer__socials a { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.8); transition: background .25s, color .25s, border-color .25s, transform .25s var(--ease-out); }
.footer__socials a:hover { background: var(--red); border-color: var(--red); color: #fff; transform: translateY(-3px); }
.footer__col--cta p { color: rgba(255,255,255,.52); font-size: 14px; margin-bottom: 20px; line-height: 1.7; }
.donate-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--display); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 13px; color: #fff; background: linear-gradient(180deg, var(--red-bright), var(--red)); border: 1px solid var(--red); box-shadow: inset 0 1px 0 rgba(255,255,255,.28); padding: 15px 34px; transition: filter .2s, transform .25s var(--ease-out), box-shadow .3s var(--ease-out); }
.donate-btn svg { flex: none; transition: transform .3s var(--ease-out); }
.donate-btn:hover { filter: brightness(1.08); transform: translateY(-2px); box-shadow: var(--shadow-red); }
.donate-btn:hover svg { transform: scale(1.15); }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.09); background: rgba(0,0,0,.3); }
.footer__bottom .container { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 18px; padding-bottom: 18px; font-family: var(--hud); font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.42); }
.footer__credit { color: var(--red-bright); letter-spacing: .16em; transition: color .2s; }
a.footer__credit:hover { color: #fff; text-decoration: underline; }
.footer__legal { color: rgba(255,255,255,.48); text-decoration: underline; }
.footer__legal:hover { color: var(--red-bright); }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: 34px; } .footer__col--brand { grid-column: 1/-1; } }
@media (max-width: 640px) { .footer__grid { grid-template-columns: 1fr; gap: 30px; } .footer__bottom .container { justify-content: center; text-align: center; } }

/* ---------- Cookie-Banner ---------- */
.cookie-banner { position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 220; margin: 0 auto; max-width: 760px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: rgba(12,11,10,.9); color: #fff; border: 1px solid rgba(255,255,255,.14); border-left: 4px solid var(--red); backdrop-filter: blur(16px); padding: 18px 22px; box-shadow: 0 24px 60px rgba(0,0,0,.5); opacity: 0; transform: translateY(24px); transition: opacity .45s var(--ease-out), transform .45s var(--ease-out); }
.cookie-banner.is-visible { opacity: 1; transform: none; }
.cookie-banner__icon { font-size: 26px; line-height: 1; }
.cookie-banner p { flex: 1; min-width: 240px; font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.85); }
.cookie-banner a { color: var(--red-bright); text-decoration: underline; }
.cookie-banner .btn { padding: 12px 22px; font-size: 12.5px; }

/* ============================================================
   PROJEKT-SEITE
   ============================================================ */
.phero { position: relative; display: flex; align-items: flex-end; min-height: 620px; padding-top: 176px; color: #fff; overflow: hidden; background: #0a0807; }
.phero__bg { position: absolute; inset: -6% -2% -2%; z-index: 0; background-image: linear-gradient(to top, rgba(7,6,6,.94) 8%, rgba(7,6,6,.28) 56%, rgba(7,6,6,.5)), var(--cover, linear-gradient(140deg,#241012,#6b1a1e)); background-size: cover; background-position: center; transform: scale(1.04) translateY(var(--par,0)); will-change: transform; }
.phero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(120% 80% at 14% 96%, rgba(224,35,42,.2), transparent 54%); mix-blend-mode: screen; }
.phero__inner { position: relative; z-index: 2; width: 100%; min-width: 0; padding-bottom: 44px; }
.phero__back { display: inline-flex; align-items: center; gap: 9px; font-family: var(--display); font-weight: 700; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.8); margin-bottom: 24px; transition: color .2s, transform .2s var(--ease-out); }
.phero__back:hover { color: var(--red-bright); transform: translateX(-4px); }
.phero__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.phero h1 { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(50px, 9vw, 128px); line-height: .88; letter-spacing: -.025em; text-shadow: 0 10px 50px rgba(0,0,0,.6); }
.phero__bar { position: relative; z-index: 3; background: rgba(7,6,6,.8); border-top: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.07); backdrop-filter: blur(20px); }
.phero__bar .container { display: flex; flex-wrap: wrap; }
.phero__fact { flex: 1; min-width: 168px; padding: 17px 26px; border-left: 1px solid rgba(255,255,255,.08); }
.phero__fact:first-child { border-left: 0; padding-left: 0; }
.phero__fact i { display: block; font-style: normal; font-family: var(--hud); font-weight: 700; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--red-bright); margin-bottom: 2px; }
.phero__fact b { font-family: var(--hud); font-weight: 700; font-size: 17px; letter-spacing: .04em; text-transform: uppercase; color: #fff; }

.pgrid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 48px; align-items: start; }
.plead { font-size: 18px; line-height: 1.78; color: var(--ink); margin-bottom: 28px; max-width: 640px; }
.plead::first-letter { font-family: var(--display); font-weight: 800; font-size: 3.4em; float: left; line-height: .78; padding: 4px 14px 0 0; color: var(--red-bright); }
.pdetails { border: 1px solid var(--line); }
.pdetails ul { list-style: none; }
.pdetails li { display: flex; align-items: baseline; gap: 12px; padding: 13px 20px; font-size: 14.5px; color: var(--ink); }
.pdetails li + li { border-top: 1px solid var(--hair); }
.pdetails li::before { content: ""; width: 7px; height: 7px; background: var(--red-bright); transform: rotate(45deg); flex: none; position: relative; top: 6px; }

.download-box { position: sticky; top: 96px; }
.download-box__title { display: flex; align-items: center; gap: 12px; padding: 15px 22px; border-bottom: 1px solid var(--hair); font-family: var(--display); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .14em; }
.download-box__title::before { content: ""; width: 4px; height: 15px; background: var(--red); box-shadow: 0 0 10px var(--red-glow); }
.download-box__inner { padding: 22px; }
.download-box__note { color: var(--ink-soft); font-size: 14.5px; margin-bottom: 18px; }
.download-box__note strong { color: var(--red-bright); }
.download-box__btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 16px 22px; font-family: var(--display); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 13.5px; border: 1px solid transparent; cursor: pointer; transition: background .2s, transform .25s var(--ease-out), box-shadow .3s var(--ease-out); }
a.download-box__btn { background: linear-gradient(180deg, var(--red-bright), var(--red)); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.28); }
a.download-box__btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-red); }
.download-box__btn.is-locked { background: var(--row); color: var(--ink-faint); cursor: not-allowed; border: 1px dashed var(--line-strong); }
.dl-option { display: flex; flex-direction: column; gap: 2px; padding: 15px 18px; margin-bottom: 10px; text-align: left; border: 1px solid var(--line-strong); transition: transform .25s var(--ease-out), border-color .2s, background .2s, box-shadow .3s var(--ease-out); }
.dl-option:last-of-type { margin-bottom: 0; }
.dl-option__head { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 13.5px; }
.dl-option__sub { font-family: var(--hud); font-weight: 600; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; opacity: .72; padding-left: 28px; }
.dl-option--free { background: transparent; color: var(--ink); }
.dl-option--free:hover { border-color: var(--red); transform: translateY(-2px); }
.dl-option--premium { background: linear-gradient(180deg, var(--red-bright), var(--red)); border-color: var(--red); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.24); }
.dl-option--premium:hover { transform: translateY(-2px); box-shadow: var(--shadow-red); }
.dl-option--owned { background: var(--fsgreen); border-color: var(--fsgreen); color: #16290a; }
.dl-option--owned:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(134,208,34,.4); }
.dl-note { font-size: 12px; color: var(--ink-faint); margin-top: 12px; line-height: 1.55; }
.premium-badge { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; padding: 7px 13px; border: 1px solid var(--fsgreen); color: var(--fsgreen); font-family: var(--hud); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.premium-badge svg { flex: none; }
.dl-thanks { margin-top: 12px; font-size: 13px; color: var(--ink-soft); line-height: 1.55; }
.download-info { margin-top: 14px; border: 1px solid var(--line); }
.download-info .kv { border: 0; }
.download-box__countdown { display: block; margin-top: 16px; text-align: center; font-family: var(--hud); font-weight: 700; letter-spacing: .12em; color: var(--red-bright); font-size: 20px; }
.download-box__file { display: block; margin-top: 12px; font-size: 12.5px; color: var(--ink-faint); word-break: break-all; }
.success-check { width: 82px; height: 82px; margin: 0 auto 24px; display: grid; place-items: center; font-size: 38px; color: #16290a; background: var(--fsgreen); box-shadow: 0 12px 36px rgba(134,208,34,.45); }

.factsheet { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; }
.factsheet__item { position: relative; overflow: hidden; padding: 34px 22px 30px; text-align: center; transition: transform .25s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s; }
.factsheet__item::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--red), var(--red-bright)); transform: scaleX(.2); transform-origin: left; transition: transform .4s var(--ease-out); }
.factsheet__item:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); border-color: var(--red); }
.factsheet__item:hover::after { transform: scaleX(1); }
.factsheet__value { display: block; font-family: var(--hud); font-weight: 700; font-size: 56px; line-height: 1; color: var(--red-bright); }
.factsheet__label { display: block; margin-top: 8px; font-family: var(--hud); font-weight: 600; font-size: 12px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .18em; }

.proj-trailers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr)); gap: 22px; }
.proj-embed { position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden; background: #000; border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.proj-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.proj-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.proj-gallery__item { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--panel-solid) center/cover no-repeat; border: 1px solid var(--line); cursor: zoom-in; transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out); }
.proj-gallery__item:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; min-height: 100%; }
.proj-gallery__item::after { content: ""; position: absolute; right: 10px; bottom: 10px; width: 30px; height: 30px; background: rgba(7,6,6,.7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") center/15px no-repeat; border: 1px solid rgba(255,255,255,.3); opacity: 0; transition: opacity .25s; }
.proj-gallery__item:hover { transform: scale(1.015); box-shadow: var(--shadow-2); }
.proj-gallery__item:hover::after { opacity: 1; }

.timeline { list-style: none; max-width: 800px; margin: 0 auto; position: relative; }
.timeline::before { content: ""; position: absolute; left: 15px; top: 22px; bottom: 22px; width: 2px; background: linear-gradient(var(--red), var(--line-strong)); }
.timeline li { position: relative; margin-bottom: 12px; padding: 18px 22px 18px 58px; transition: transform .25s var(--ease-out); }
.timeline li:last-child { margin-bottom: 0; }
.timeline li:hover { transform: translateX(6px); }
.timeline li::before { content: ""; position: absolute; left: 16px; top: 20px; width: 20px; height: 20px; background: var(--bg0); border: 2px solid var(--line-strong); z-index: 1; }
.timeline li.done::before { background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat; border-color: var(--red); }
.timeline li.active::before { border-color: var(--red-bright); background: var(--red-bright); box-shadow: 0 0 0 4px rgba(224,35,42,.2); animation: pulse 2s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(224,35,42,.5)}70%{box-shadow:0 0 0 10px rgba(224,35,42,0)}100%{box-shadow:0 0 0 0 rgba(224,35,42,0)} }
.timeline__date { display: inline-block; font-family: var(--hud); font-weight: 700; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 3px; }
.timeline li.done .timeline__date, .timeline li.active .timeline__date { color: var(--red-bright); }
.timeline h4 { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 16.5px; letter-spacing: .02em; margin: 0 0 4px; color: var(--ink); }
.timeline p { color: var(--ink-soft); font-size: 14px; margin: 0; }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 250; display: none; align-items: center; justify-content: center; background: rgba(6,6,8,.95); backdrop-filter: blur(10px); padding: 30px; cursor: zoom-out; }
.lightbox.is-open { display: flex; animation: fade .3s ease; }
.lightbox img { max-width: 90%; max-height: 86%; border: 1px solid rgba(255,255,255,.18); box-shadow: 0 30px 80px rgba(0,0,0,.7); cursor: default; }
.lightbox__close { position: absolute; top: 18px; right: 26px; background: none; border: 0; color: #fff; font-size: 42px; line-height: 1; cursor: pointer; z-index: 2; }
.lightbox__close:hover { color: var(--red-bright); }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 54px; height: 54px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.3); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; z-index: 2; display: grid; place-items: center; transition: background .2s, transform .2s var(--ease-out); }
.lightbox__nav:hover { background: var(--red); border-color: var(--red); }
.lightbox__prev { left: 24px; } .lightbox__next { right: 24px; }
.lightbox__count { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.85); font-family: var(--hud); font-weight: 600; letter-spacing: .28em; font-size: 13px; }
@keyframes fade { from{opacity:0}to{opacity:1} }

/* ---------- Rechtliches ---------- */
.legal { max-width: 860px; }
.legal h1 { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: -.015em; font-size: clamp(36px, 5vw, 60px); line-height: .98; }
.legal h2 { display: flex; align-items: center; gap: 12px; font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 15px; color: var(--ink); margin: 42px 0 12px; }
.legal h2::before { content: ""; width: 5px; height: 15px; background: var(--red); flex: none; }
.legal p { color: var(--ink-soft); font-size: 15px; line-height: 1.8; }
.legal p a { color: var(--red-bright); text-decoration: underline; }
.legal mark { background: rgba(224,35,42,.14); color: inherit; padding: 1px 6px; font-style: italic; }
.legal__highlight { border-left: 4px solid var(--red); padding: 16px 20px; font-weight: 600; color: var(--ink) !important; background: var(--panel-tint); }

/* ---------- Statusseiten ---------- */
.statuspage { min-height: 82vh; display: grid; place-items: center; padding: 150px 0 100px; text-align: center; }
.statuspage__inner { max-width: 620px; }
.statuspage__code { font-family: var(--display); font-weight: 800; font-size: clamp(96px, 15vw, 176px); line-height: .9; color: var(--red-bright); text-shadow: 0 0 60px var(--red-glow); }
.statuspage h1 { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(26px, 4vw, 42px); margin-top: 6px; }
.statuspage p { color: var(--ink-soft); font-size: 17px; max-width: 460px; margin: 14px auto 30px; }

.ca-sep { display: block; width: 64px; height: 4px; margin: 26px auto; background: var(--red); }
.ca-sep--left { margin-left: 0; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 940px) {
  .sec { padding: 76px 0; }
  .pgrid { grid-template-columns: 1fr; gap: 40px; }
  .download-box { position: static; }
  .proj-gallery { grid-template-columns: repeat(2, 1fr); }
  .hero__scrollcue { display: none; }
  .hudbox--donate span { display: none; }
  .showcase-map { min-height: 78vh; }
}
@media (max-width: 640px) {
  :root { --gut: 18px; }
  .sec { padding: 60px 0; }
  .sec--tight { padding: 52px 0; }
  .topbar__inner { height: 62px; gap: 10px; }
  .topbar__actions { gap: 6px; }
  .brand__lock { padding-left: 10px; }
  .brand__lock strong { font-size: 14px; letter-spacing: .12em; }
  .brand__lock span { letter-spacing: .38em; }

  /* Große Titel skalieren, damit nichts abgeschnitten wird */
  .slide__title { font-size: clamp(40px, 13vw, 66px); letter-spacing: -.02em; }
  .slide__text { font-size: 16px; }
  .slide__inner { bottom: 104px; }
  .slide__actions { width: 100%; }
  .slide__actions .btn { width: 100%; }
  .hero__tab b { display: none; }
  .hero__tab { padding: 14px 12px; justify-content: center; }

  .statstrip__item b { font-size: 24px; }
  .showcase-map { min-height: 0; padding: 96px 0 0; }
  .showcase-map__inner { padding-bottom: 56px; }
  .showcase-map h2 { font-size: clamp(38px, 12vw, 62px); letter-spacing: -.02em; }
  .showcase-map p { font-size: 16px; }
  .showcase-map__stats { gap: 8px; }
  .showcase-map__stat { padding: 10px 15px; }
  .showcase-map__stat strong { font-size: 25px; }
  .showcase-map__actions { flex-direction: column; align-items: stretch; }

  .sec__title { font-size: clamp(30px, 8vw, 44px); }
  .shots__head { padding: 52px var(--gut) 26px; }
  .about__badge { top: auto; bottom: 16px; right: 14px; padding: 12px 16px; }
  .about__figure::before { transform: translate(12px, 12px); }
  .ctaband__inner { padding: 84px var(--gut); }
  .ctaband h2 { font-size: clamp(34px, 10vw, 58px); }

  .phero { min-height: 520px; padding-top: 130px; }
  .phero h1 { font-size: clamp(40px, 13vw, 66px); letter-spacing: -.02em; }
  .phero__fact { min-width: 46%; padding: 13px 16px; }
  .plead::first-letter { font-size: 2.8em; }
  .proj-gallery { grid-template-columns: 1fr; }
  .proj-gallery__item:first-child { grid-column: auto; grid-row: auto; aspect-ratio: 16/10; }
  .lightbox__nav { width: 44px; height: 44px; font-size: 24px; }
  .lightbox__prev { left: 8px; } .lightbox__next { right: 8px; }
}
@media (max-width: 400px) {
  .brand__lock { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .grain { display: none; }
}