/* Startseite (DE und EN, früher Variante C): die Figuren im Mittelpunkt, wie die Figurenwahl in einem Spiel.
   Roter Faden: Wähl deinen Kämpfer (001), stell dich der Kamera (002), geh den Weg (003), lern die Welt kennen (004).
   Fette Grotesk statt Mincho, helle Kacheln auf Papiergrau, dunkle Bühnen, Kirschblütenrosa als einziger Akzent.
   Bewegung in c.js, bei „Bewegung reduzieren“ steht alles still. */
:root {
  color-scheme: dark;
  --bg:#EFEDE9; --card:#FFFFFF; --ink:#111113; --ink2:#55535A; --mute:#8D8A92;
  --night:#0B0B0D; --night2:#17171B;
  --pink:#FF5C78; --pink2:#E0435F; --pinksoft:#FFE3E8;
  --jade:#7FCFA6; --amber:#F2A541;
  --r:22px;
  --font:"Zen Kaku Gothic New", "Hiragino Sans", system-ui, sans-serif;
  --display:"Zen Old Mincho", "Hiragino Mincho ProN", Georgia, serif;
  --plum:#B8324A;
  --pad:max(20px, calc((100vw - 1280px) / 2));
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--night); color:#fff; font-family:var(--font); line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:clip; }
img, video { display:block; max-width:100%; }
a { color:inherit; }
h1, h2, h3 { margin:0; font-family:var(--display); font-weight:900; line-height:1.04; letter-spacing:-.01em; text-wrap:balance; }
h2 { font-size:clamp(34px, 5vw, 72px); }
p { margin:0; }
.skip { position:absolute; left:16px; top:-60px; z-index:60; background:#fff; color:var(--ink); padding:10px 16px; font-weight:700; border-radius:8px; }
.skip:focus { top:12px; }
:focus-visible { outline:3px solid var(--pink2); outline-offset:3px; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.wrap { max-width:1280px; margin:0 auto; }

.btn { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 26px; border:0; border-radius:999px; background:#fff; color:var(--ink); font:700 14px/1 var(--font); letter-spacing:.06em; text-transform:uppercase; text-decoration:none; cursor:pointer; transition:transform .25s, background .25s; }
.btn:hover { transform:translateY(-2px); background:#E6E3DE; }
.link { color:inherit; font-weight:700; font-size:14px; text-decoration:none; border-bottom:2px solid currentColor; padding-bottom:3px; }

/* Kopfzeile */
.bar { position:fixed; top:0; left:0; right:0; z-index:40; display:flex; align-items:center; justify-content:space-between; padding:14px var(--pad); color:#fff; background:rgba(11,11,13,.88); backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2); border-bottom:1px solid rgba(255,255,255,.08); transition:transform .35s ease, opacity .35s ease; }
/* Erst sichtbar, wenn der Aufmacher halb gescrollt ist (home.js setzt .show); ohne JS immer sichtbar */
.js .bar:not(.show) { transform:translateY(-100%); opacity:0; pointer-events:none; }
.logo { display:block; line-height:0; margin:0; }
.logo img { height:34px; width:auto; }
.bar nav { display:flex; align-items:center; gap:26px; }
.bar nav a { text-decoration:none; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.pill { border:1.5px solid currentColor; border-radius:999px; padding:9px 16px; }
.hide-s { display:none; }

/* Aufmacher */
.hero { position:relative; min-height:100svh; background:var(--night); color:#fff; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; padding:0 var(--pad) 42px; isolation:isolate; }
.hero::after { content:""; position:absolute; inset:auto 0 0 0; height:46%; z-index:1; background:linear-gradient(0deg, var(--night) 18%, rgba(11,11,13,0)); pointer-events:none; }
.ring { position:absolute; left:-4%; right:-4%; top:7%; width:108%; height:46%; z-index:-1; }
.ring { filter:drop-shadow(0 0 4px rgba(255,110,135,.9)) drop-shadow(0 0 18px rgba(255,92,120,.55)) drop-shadow(0 0 48px rgba(255,92,120,.3)); }
.ring text { font:700 330px/1 var(--font); letter-spacing:-.02em; fill:none; stroke:#FF5C78; stroke-width:5; paint-order:stroke; }
.js .ring { animation:neon 6s 3s infinite; }
@keyframes neon { 0%, 18%, 22%, 60%, 100% { opacity:1; } 20% { opacity:.55; } 61% { opacity:.8; } }
.js .ring text { stroke-dasharray:2400; stroke-dashoffset:2400; animation:draw 2.6s cubic-bezier(.5,0,.2,1) .2s forwards; }
@keyframes draw { to { stroke-dashoffset:0; } }
.cast { position:absolute; left:50%; bottom:0; z-index:0; height:min(88svh, 900px); width:min(80vw, 760px); translate:-50% 0; }
.cast img { position:absolute; left:50%; bottom:0; height:100%; width:auto; max-width:none; translate:-50% 0; opacity:0; transform:translateY(24px) scale(.97); transition:opacity .9s ease, transform 1.2s cubic-bezier(.2,.7,.2,1); }
.cast img.on { opacity:1; transform:none; }
.hero-copy { position:relative; z-index:2; max-width:min(860px, 58vw); }
.hero-copy > p, .hero-copy .ctas { max-width:620px; }
/* Titel bricht nur zwischen den drei Sätzen um, und nur wenn es eng wird */
h1 span, h1 em { white-space:nowrap; }
h1 em { display:inline-block; }
h1 { font-size:clamp(46px, 7.4vw, 112px); line-height:.98; letter-spacing:-.015em; }
h1 em { position:relative; font-style:normal; color:#F2EEE8; }
/* Pinselstrich unter „Dein Jahr.“ */
h1 em::after { content:""; position:absolute; left:-2%; right:-4%; bottom:-.12em; height:.28em; z-index:-1; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cpath d='M4 26c40-9 96-15 160-15 70 0 150 4 232 12-4 3-30 5-58 6 18 1 32 3 40 5-60-4-150-9-232-6-52 2-100 5-138 10 6-5 18-9 30-12-14 1-26 1-34 0z' fill='url(%23g)'/%3E%3Cdefs%3E%3ClinearGradient id='g'%3E%3Cstop offset='0' stop-color='%23F2EEE8' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%23F2EEE8' stop-opacity='.08'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E") center/100% 100% no-repeat; opacity:1; }
.hero-copy > p { margin-top:34px; font-size:17px; color:#C9C6CE; max-width:30em; }
.ctas { margin-top:26px; display:flex; flex-wrap:wrap; align-items:center; gap:16px 26px; }
.hero .lists { display:grid; grid-template-columns:1fr 1fr; gap:24px; width:100%; margin:6px 0 4px; padding-top:20px; border-top:1px solid rgba(255,255,255,.12); }
.lists .lbl { font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:#FF5C78; margin-bottom:12px; }
.lists ul { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.lists li { position:relative; padding-left:18px; font-size:15px; color:#E3E0E7; line-height:1.4; }
.lists li::before { content:""; position:absolute; left:0; top:.55em; width:7px; height:7px; border-radius:50%; background:#FF5C78; box-shadow:0 0 8px rgba(255,92,120,.8); }
.link { color:#fff; }

/* Abschnittskopf wie „neural. 001“ */
.sec { padding:120px var(--pad); background:var(--night); color:#fff; position:relative; }
.sechead { position:relative; display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:56px; }
/* Abschnittstitel groß, Punkte als Neonpunkt (statt der früheren Stichwörter „live.“ usw.) */
.sec h2 { font-size:clamp(36px, 5.2vw, 76px); line-height:1; letter-spacing:-.02em; }
.sec h2 i { font-style:normal; color:#FF5C78; -webkit-text-stroke:0; text-shadow:0 0 10px rgba(255,92,120,.8); }
.sec-h { margin-bottom:40px; }
.key { font-family:var(--display); font-size:clamp(52px, 8vw, 120px); font-weight:900; letter-spacing:-.03em; line-height:.9; }
.key i { font-style:normal; color:var(--pink); text-shadow:0 0 10px rgba(255,92,120,.8); }
.num { font-size:13px; font-weight:700; letter-spacing:.2em; color:#8D8A92; padding-top:8px; }
.lede { color:#B9B6BE; font-size:17px; max-width:32em; }

/* 001 Figurenwahl: die gewählte Figur füllt die Bühne, unten die Auswahlleiste wie im Spiel */
.stage { position:relative; min-height:100svh; background:var(--night); color:#fff; overflow:hidden; isolation:isolate; padding:120px var(--pad) 56px; display:flex; }
.stage-bg { position:absolute; top:0; bottom:0; right:0; width:min(62%, 900px); height:100%; object-fit:cover; object-position:50% 40%; z-index:-2; transition:opacity .45s ease, transform 1s cubic-bezier(.2,.7,.2,1); }
.stage-bg.swap { opacity:0; transform:scale(1.04); }
.stage::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, var(--night) 0%, var(--night) 38%, rgba(11,11,13,.55) 58%, rgba(11,11,13,.1) 80%), linear-gradient(0deg, var(--night) 0%, rgba(11,11,13,0) 30%), linear-gradient(180deg, var(--night) 0%, rgba(11,11,13,0) 22%); }
.stage-in { width:100%; display:flex; flex-direction:column; }
.pick-info { max-width:520px; display:flex; flex-direction:column; gap:14px; }
.camp { align-self:flex-start; font-size:11px; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:#B9B6BE; padding-left:22px; position:relative; }
.camp::before { content:""; position:absolute; left:0; top:50%; width:12px; height:12px; margin-top:-6px; border-radius:50%; background:var(--jade); box-shadow:0 0 10px var(--jade); }
.camp.blade::before { background:#E2735E; box-shadow:0 0 10px #E2735E; }
.pick-info h2 { font-size:clamp(56px, 8vw, 120px); line-height:.95; }
.trait { font-size:20px; font-weight:500; color:#E9E6EC; }
.say { font-family:var(--display); font-weight:700; font-size:19px; color:#B9B6BE; }
.meta { display:flex; gap:40px; margin:14px 0 0; padding-top:18px; border-top:1px solid rgba(255,255,255,.12); }
.meta dt { font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:#8D8A92; }
.meta dd { margin:4px 0 0; font-weight:700; }
.roster { margin-top:auto; padding-top:48px; display:flex; flex-wrap:wrap; gap:18px 28px; }
.thumbs { display:flex; align-items:center; gap:10px; }
.thumbs p { writing-mode:vertical-rl; transform:rotate(180deg); font-size:10px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:#8D8A92; }
.thumbs button { width:76px; height:76px; padding:0; border:0; border-radius:12px; overflow:hidden; cursor:pointer; background:#000; position:relative; transition:transform .3s; }
.thumbs img { width:100%; height:100%; object-fit:cover; filter:grayscale(1) brightness(.6); transition:filter .3s; }
.thumbs button:hover { transform:translateY(-4px); }
.thumbs button:hover img, .thumbs button[aria-pressed="true"] img { filter:none; }
.thumbs button[aria-pressed="true"] { transform:translateY(-6px); }
.thumbs button[aria-pressed="true"]::after { content:""; position:absolute; inset:0; border-radius:12px; box-shadow:inset 0 0 0 2px #FF5C78, 0 0 14px rgba(255,92,120,.7); }
.note { margin-top:28px; max-width:44em; color:#8D8A92; font-size:14px; }

/* 002 Kamera */
.cam-grid { display:grid; gap:48px; align-items:center; }
.cam-text { display:flex; flex-direction:column; gap:22px; align-items:flex-start; }
.cam-text > p { color:#B9B6BE; font-size:17px; max-width:30em; }
.lists { display:grid; grid-template-columns:1fr 1fr; gap:24px; width:100%; margin:6px 0 4px; padding-top:20px; border-top:1px solid rgba(255,255,255,.12); }
.lists .lbl { font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:#FF5C78; margin-bottom:12px; }
.lists ul { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.lists li { position:relative; padding-left:18px; font-size:15px; color:#E3E0E7; line-height:1.4; }
.lists li::before { content:""; position:absolute; left:0; top:.55em; width:7px; height:7px; border-radius:50%; background:#FF5C78; box-shadow:0 0 8px rgba(255,92,120,.8); }
.link { color:#fff; }
.clip { position:relative; }
.clip-head { display:flex; justify-content:space-between; align-items:center; padding:0 2px 12px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#8D8A92; }
.clip-head b { color:#fff; }
.vs { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.vs > div { position:relative; border-radius:16px; overflow:hidden; aspect-ratio:456/760; background:#000; }
.vs video { width:100%; height:100%; object-fit:cover; }
.side-a video { object-position:47% 50%; }
.side-b video { object-position:50% 40%; }
.who { position:absolute; left:10px; top:10px; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; padding:5px 10px; border-radius:999px; background:rgba(11,11,13,.7); color:#fff; }
.side-b .who { background:#fff; color:var(--ink); }
.live { position:absolute; left:10px; right:28px; bottom:10px; padding:10px 12px; border-radius:12px; background:rgba(11,11,13,.72); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); --c:var(--amber); }
.live.good { --c:var(--jade); }
.live b { font-size:34px; line-height:1; color:var(--c); font-variant-numeric:tabular-nums; transition:color .4s; }
.live span { font-weight:700; color:var(--c); margin-left:2px; }
.live small { display:block; font-size:12px; font-weight:700; margin-top:4px; color:#fff; }
/* EU-Kennzeichnung „AI GENERATED“: senkrecht rechts unten */
.euai { position:absolute; right:6px; bottom:8px; width:auto; height:13px; transform-origin:100% 100%; transform:rotate(-90deg) translateX(100%); opacity:.9; }

/* 003 Weg: Zeitleiste */
.way-top { display:grid; gap:20px; margin-bottom:56px; }
.way-top p { color:#B9B6BE; font-size:17px; max-width:34em; }
.phases { list-style:none; margin:0; padding:0; display:grid; gap:0; }
.phases li { position:relative; padding:26px 0 26px 28px; border-left:1px solid rgba(255,255,255,.16); display:flex; flex-direction:column; gap:8px; }
.phases li::before { content:""; position:absolute; left:-5px; top:34px; width:9px; height:9px; border-radius:50%; background:#fff; }
.phases li:last-child::before { background:#FF5C78; box-shadow:0 0 12px rgba(255,92,120,.9); }
.phases span { font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:#8D8A92; }
.phases span::before { content:"Woche "; }
:lang(en) .phases span::before { content:"Week "; }
.phases h3 { font-size:32px; }
.phases p { color:#B9B6BE; font-size:15px; max-width:26em; }
.phases em { font-style:normal; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#fff; }
.fit { margin-top:56px; padding:28px; border-radius:var(--r); background:var(--night2); border:1px solid rgba(255,255,255,.08); }
.fit h3 { font-size:clamp(26px, 3vw, 36px); margin-bottom:22px; }
.fit ul { list-style:none; margin:0; padding:0; display:grid; gap:18px 28px; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); }
.fit li { font-size:14px; color:#B9B6BE; line-height:1.5; }
.fit li b { display:block; font-size:16px; color:#fff; margin-bottom:4px; }
.wide { margin:64px calc(-1 * var(--pad)) 0; position:relative; overflow:hidden; aspect-ratio:21/9; background:#000; }
.wide video { width:100%; height:100%; object-fit:cover; }
.wide::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, var(--night) 0%, rgba(11,11,13,0) 25%, rgba(11,11,13,0) 60%, var(--night) 100%); }
.wide figcaption { position:absolute; z-index:1; left:var(--pad); bottom:30px; max-width:420px; font-size:15px; color:#D9D6DD; }
.wide figcaption b { display:block; font-family:var(--display); font-size:30px; color:#fff; margin-bottom:4px; }

/* 004 Welt: filterbare Sammlung */
.world-top { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:32px; }
.filters { display:flex; flex-wrap:wrap; gap:8px; }
.filters button { border:1px solid rgba(255,255,255,.35); background:transparent; color:#fff; border-radius:999px; padding:9px 18px; font:700 12px/1 var(--font); letter-spacing:.12em; text-transform:uppercase; cursor:pointer; transition:background .25s, color .25s, border-color .25s; }
.filters button:hover { border-color:#fff; }
.filters button[aria-pressed="true"] { background:#fff; color:var(--ink); border-color:#fff; }
.masonry { list-style:none; margin:0; padding:0; columns:2; column-gap:10px; }
.masonry li { break-inside:avoid; margin-bottom:10px; position:relative; border-radius:14px; overflow:hidden; background:#000; }
.masonry li[hidden] { display:none; }
.masonry.mz { columns:auto; display:grid; grid-template-columns:repeat(var(--mcols, 2), minmax(0, 1fr)); column-gap:10px; grid-auto-rows:1px; }
.masonry.mz li { margin-bottom:10px; }
.masonry.mz li:not(.shot) img { height:100%; object-fit:cover; }
.masonry.mz li.shot { display:flex; flex-direction:column; justify-content:center; }
.masonry.mz-measure li { align-self:start; }
.masonry.mz-measure li:not(.shot) img { height:auto; }
.masonry li.shot { background:linear-gradient(160deg, #1B1A21, #0E0E11); padding:22px 22px 64px; }
.masonry li.shot .phone { border-radius:24px; border:5px solid #26262B; overflow:hidden; aspect-ratio:600/1304; background:#000; box-shadow:0 24px 40px -20px rgba(0,0,0,.9); }
.masonry li.shot .phone img { width:100%; height:100%; object-fit:cover; filter:none; }
.masonry li.shot:hover img { transform:none; }
.masonry img { width:100%; height:auto; transition:transform .8s cubic-bezier(.2,.7,.2,1), filter .5s; filter:saturate(.9) brightness(.9); }
.masonry li:hover img { transform:scale(1.04); filter:none; }
.masonry p { position:absolute; left:0; right:0; bottom:0; padding:40px 14px 12px; background:linear-gradient(0deg, rgba(11,11,13,.85), rgba(11,11,13,0)); color:#8D8A92; font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; display:flex; justify-content:space-between; align-items:flex-end; gap:8px; }
.masonry p b { font-family:var(--display); font-size:17px; letter-spacing:0; text-transform:none; color:#fff; }
.phone { border-radius:26px; border:5px solid #26262B; overflow:hidden; aspect-ratio:600/1304; background:#000; box-shadow:0 30px 60px -24px rgba(0,0,0,.9); }
.phone img { width:100%; height:100%; object-fit:cover; }

/* 005 Fragen */
.faq-grid { display:grid; gap:48px; }
/* Preise */
.prices { background:radial-gradient(70% 60% at 70% 40%, rgba(255,92,120,.10), transparent 70%), var(--night); }
.price-h { margin-bottom:48px; }
.price-h em { font-style:normal; color:transparent; -webkit-text-stroke:2px #FF5C78; text-shadow:0 0 18px rgba(255,92,120,.55); }
.editions { display:grid; gap:16px; }
.ed { position:relative; padding:30px 28px; border-radius:var(--r); background:var(--night2); border:1px solid rgba(255,255,255,.1); }
.ed.main { border:1.5px solid #FF5C78; box-shadow:0 0 0 1px rgba(255,92,120,.25), 0 0 40px rgba(255,92,120,.25), inset 0 0 40px rgba(255,92,120,.08); }
.ed .pick { position:absolute; top:-13px; right:24px; padding:6px 12px; border-radius:999px; background:#FF5C78; color:var(--night); font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.fair { grid-column:1 / -1; font-size:14px; color:#8D8A92; padding-top:10px; }
.fair b { color:#fff; }
.ed small { font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:#8D8A92; }
.ed h3 { font-size:44px; margin:6px 0 18px; }
.ed ul { margin:0; padding:0; list-style:none; display:grid; gap:8px; }
.ed li { padding-left:20px; position:relative; font-size:16px; color:#D9D6DD; }
.ed li::before { content:""; position:absolute; left:0; top:.6em; width:10px; height:1px; background:#8D8A92; }
.ed.main h3 { color:#fff; text-shadow:0 0 18px rgba(255,92,120,.35); }
.ed.main li::before { background:#FF5C78; }
.faq { display:grid; align-content:start; border-top:1px solid rgba(255,255,255,.14); }
.faq details { border-bottom:1px solid rgba(255,255,255,.14); }
.faq summary { list-style:none; cursor:pointer; padding:22px 48px 22px 0; position:relative; font-family:var(--display); font-weight:700; font-size:20px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; position:absolute; right:4px; top:50%; translate:0 -50%; font-family:var(--font); font-size:24px; font-weight:400; color:#8D8A92; transition:rotate .3s; }
.faq details[open] summary::after { rotate:45deg; color:#fff; }
.faq details p { padding:0 0 22px; color:#B9B6BE; font-size:15px; max-width:38em; }

/* Finale */
.finale { position:relative; min-height:100svh; display:flex; align-items:flex-end; justify-content:center; padding:120px var(--pad) 22vh; overflow:hidden; isolation:isolate; background:var(--night); }
.fin-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; opacity:.8; }
.finale::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, var(--night) 0%, rgba(11,11,13,0) 26%, rgba(11,11,13,.1) 60%, rgba(11,11,13,.7) 100%); }
.fin-word { position:absolute; left:0; right:0; top:14%; text-align:center; font-weight:700; font-size:clamp(90px, 22vw, 360px); line-height:.8; letter-spacing:-.04em; color:rgba(255,255,255,.88); mix-blend-mode:overlay; z-index:-1; white-space:nowrap; }
.fin-card { width:100%; max-width:620px; background:rgba(11,11,13,.82); border:1px solid rgba(255,255,255,.1); border-radius:var(--r); padding:30px 26px; backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2); box-shadow:0 30px 80px rgba(0,0,0,.5); }
.fin-card h2 { font-size:clamp(30px, 4vw, 48px); color:#fff; }
.fin-card > p { margin:12px 0 20px; color:#C9C6CE; font-size:16px; }
/* Geräte-Kombi neben der Anmeldung: iPad hinten, iPhone links und Watch (ohne Armband) rechts davor */
.fin-row { width:100%; max-width:1280px; display:flex; flex-direction:column; align-items:center; gap:40px; }
.devices { margin:0; width:100%; max-width:620px; }
.dev-stage { position:relative; aspect-ratio:1.42; }
.dev { position:absolute; background:#050506; box-shadow:0 0 0 1px rgba(255,255,255,.16), 0 30px 70px rgba(0,0,0,.6), 0 0 44px rgba(255,92,120,.12); }
.dev img { width:100%; height:100%; object-fit:cover; }
.dev-ipad { left:9%; right:0; top:0; aspect-ratio:1376/1032; padding:2.4%; border-radius:6% / 8%; }
.dev-ipad img { border-radius:3.6% / 4.8%; }
.dev-iphone { left:0; bottom:0; width:27%; aspect-ratio:603/1311; padding:1.6%; border-radius:17% / 8%; }
.dev-iphone img { border-radius:14% / 6.6%; }
.dev-watch { right:4%; bottom:0; width:19%; aspect-ratio:422/514; padding:2.4%; border-radius:26% / 22%; z-index:2; }
.dev-watch img { border-radius:20% / 17%; }
.devices figcaption { margin-top:34px; text-align:center; color:#E4E1E8; font-size:15px; text-shadow:0 1px 12px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,.8); }
.devices figcaption b { color:#fff; }
.news-row { display:flex; gap:8px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); border-radius:999px; padding:6px; }
.news-row input { flex:1; min-width:0; border:0; background:transparent; padding:0 14px; font:16px var(--font); color:#fff; }
.news-row input::placeholder { color:#8D8A92; }
.news-row input:focus { outline:none; }
.news-row:focus-within { outline:3px solid var(--pink2); outline-offset:2px; }
.news-row .btn { background:#fff; color:var(--ink); min-height:46px; }
.news-row .btn:hover { background:#FF5C78; color:var(--night); }
.news-ok { display:flex; gap:10px; margin-top:14px; font-size:12px; color:#AFACB4; line-height:1.5; }
.news-ok a { color:#fff; }
.news-ok input { margin-top:2px; accent-color:#FF5C78; flex:none; }
.hp { position:absolute; left:-9999px; }
.news-msg { margin-top:10px; min-height:1.4em; font-size:14px; font-weight:700; color:#FF5C78; }
.news-msg.ok { color:#7FCFA6; }

.foot { background:var(--night); color:#fff; padding:60px var(--pad) 30px; }
.foot-in { max-width:1280px; margin:0 auto; display:grid; gap:32px; }
.foot .logo img { height:44px; }
.foot .small { margin-top:10px; color:#AFACB4; font-size:14px; max-width:24em; }
.foot nav { display:grid; gap:8px; align-content:start; }
.foot nav p { font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#8D8A92; margin-bottom:4px; }
.foot nav a { text-decoration:none; color:#D9D6DD; font-size:14px; }
.foot nav a:hover { color:var(--pink); }
.copy { max-width:1280px; margin:40px auto 0; padding-top:20px; border-top:1px solid rgba(255,255,255,.12); font-size:12px; color:#8D8A92; }

/* Aufscheinen */
.js .rise { opacity:0; transform:translateY(30px); transition:opacity .8s ease, transform 1s cubic-bezier(.2,.7,.2,1); }
.js .rise.in { opacity:1; transform:none; }

@media (max-width: 760px) {
  .hero-copy { max-width:none; }
  .ring { top:12%; height:30%; }
  .cast { height:62svh; width:100vw; bottom:24svh; }
  .hero::after { height:58%; }
  .hero-copy > p { font-size:16px; }
  .stage { padding-top:96px; }
  .stage-bg { width:100%; height:62%; top:0; bottom:auto; object-position:50% 30%; }
  .stage::before { background:linear-gradient(0deg, var(--night) 0%, var(--night) 42%, rgba(11,11,13,.2) 64%, rgba(11,11,13,.4) 100%); }
  .stage-in .sechead { margin-bottom:34vh; }
  .thumbs button { width:62px; height:62px; }
  .roster { gap:14px; }
  .wide { aspect-ratio:4/5; }
  .masonry p { padding:28px 10px 9px; font-size:0; }
  .masonry p b { font-size:13px; }
  .masonry li.shot { padding:12px 12px 40px; }
  .lists { grid-template-columns:1fr; }
}
@media (min-width: 761px) {
  .hide-s { display:inline; }
  .cast { left:64%; }
  .cam-grid { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:72px; }
  .way-top { grid-template-columns:1fr 1fr; align-items:end; }
  .phases { grid-template-columns:repeat(4, minmax(0, 1fr)); border-top:1px solid rgba(255,255,255,.16); }
  .phases li { border-left:0; padding:34px 24px 0 0; }
  .phases li::before { left:0; top:-5px; }
  .masonry { columns:4; }
  .editions { grid-template-columns:1fr 1fr; gap:24px; }
  .foot-in { grid-template-columns:2fr 1fr 1fr 1fr; }
  .fin-card { padding:40px; }
}
@media (min-width: 1100px) {
  /* Shifu-Video liegt nur in 1280 px vor: auf großen Bildschirmen nicht randlos, sonst wirkt es unscharf (Dan 16.10.) */
  .wide { margin:64px 0 0; border-radius:var(--r); }
  .wide figcaption { left:36px; }
  .fin-row { flex-direction:row; align-items:flex-end; justify-content:space-between; gap:56px; }
  .devices { flex:1 1 0; max-width:640px; }
  .fin-row .fin-card { flex:0 1 560px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .ring text { stroke-dashoffset:0 !important; }
}