/* AI Production — Scroll-Experience „One idea. Everywhere.“
   .px = langer Scroll-Abschnitt; .px-stage klebt im Viewport. Die Dose (.px-can) bleibt in der Mitte,
   die Welten (.px-w) blenden nacheinander ein. Maße hängen an der Dosenhöhe --ch. */

.px { position: relative; height: 700vh; background: var(--ink); }
/* Einrasten auf die Stationen: „proximity“ = nur wenn man in der Nähe einer Station ausrollt; danach scrollt die Seite frei */
/* kein CSS-Snapping: die Stationen steuert ai-production.js schrittweise */
.px-snaps { position: absolute; inset: 0; pointer-events: none; }
.px-snaps i { position: absolute; left: 0; top: calc(var(--n) * 100vh); width: 1px; height: 1px; scroll-snap-align: start; }
.px-stage {
  position: sticky; top: var(--nav-h); height: calc(100svh - var(--nav-h)); overflow: hidden; isolation: isolate;
  --ch: min(58vh, 540px);            /* Höhe der Dose */
  --cw: calc(var(--ch) * 0.4075);    /* Breite der Dose (Seitenverhältnis des Freistellers) */
}
.px-grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(rgb(226 255 79 / 0.07) 1px, transparent 1px) 0 0 / 80px 80px,
    linear-gradient(90deg, rgb(226 255 79 / 0.07) 1px, transparent 1px) 0 0 / 80px 80px;
  transition: opacity 0.6s var(--ease);
}
.px[data-station="2"] .px-grid, .px[data-station="3"] .px-grid, .px[data-station="4"] .px-grid,
.px[data-station="5"] .px-grid, .px[data-station="6"] .px-grid { opacity: 0.25; }

.px-w { position: absolute; inset: 0; z-index: 1; opacity: 0; visibility: hidden; will-change: opacity; }
.px-w img { display: block; }
/* Hilfsmaß: Mittelpunkt der Bühne */
.px-sketch, .px-phone, .px-spread { position: absolute; left: 50%; top: 50%; }

/* ---------- Die Dose: Anker ---------- */
.px-can {
  position: absolute; left: 50%; top: 50%; z-index: 5; height: var(--ch); width: auto; pointer-events: none;
  transform: translate(-50%, -50%) translateY(var(--cy, 0%)) scale(var(--cs, 1)) rotate(var(--cr, 0deg));
  opacity: var(--co, 0);
  filter: drop-shadow(0 30px 40px rgb(0 0 0 / 0.5));
  will-change: transform, opacity;
}

/* 3D-Dose: Canvas über der ganzen Bühne; Größe, Lage und Drehung rechnet can3d.js, hier nur die Deckkraft */
.px-can3d { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; pointer-events: none; opacity: var(--co, 0); } /* Schlagschatten setzt ai-production.js je Station (drop/dropY/dropBlur) */
.has-3d .px-can { display: none; }
/* mit 3D zeichnet das Drahtgitter die Skizze — CSS-Kontur nur als Ersatz */
.has-3d .px-sketch { border-color: transparent; }
.has-3d .px-sketch::before, .has-3d .px-sketch.is-ghost { display: none; }

/* ---------- Stationen-Index unten rechts ---------- */
/* immer unten rechts, wie der Index bei AI Photography */
.px-rail { position: absolute; right: var(--gutter); bottom: 7vh; z-index: 6; filter: drop-shadow(0 0 4px rgb(0 0 0 / 0.5)); }
.px-rail ol { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 1px solid rgb(242 239 233 / 0.18); counter-reset: st; }
.px-rail li {
  counter-increment: st; height: 28px; display: flex; align-items: center; gap: 10px; cursor: pointer;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(242 239 233 / 0.42);
  transition: color 0.3s var(--ease);
}
.px-rail li::before { content: counter(st, decimal-leading-zero); }
.px-rail li:hover { color: var(--bone); }
.px-rail li.is-on { color: var(--lumen); }
.px-rail__bar { position: absolute; left: 0; top: 3px; width: 1px; height: 22px; background: var(--lumen); transition: transform 0.4s var(--ease); }

/* ---------- Bildunterschrift je Station ---------- */
.px-cap { position: absolute; left: var(--gutter); bottom: 7vh; z-index: 6; max-width: 560px; }
.px-cap .label { color: var(--lumen); }
.px-cap h2 { margin: 12px 0 0; font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.2vw, 48px); line-height: 1; }
.px-cap__tags { margin-top: 8px !important; color: var(--bone) !important; opacity: 0.85; }

/* ---------- 01 Idee ---------- */
.px-sketch {
  width: var(--cw); height: var(--ch); transform: translate(-50%, -50%) rotate(calc(var(--d, 0) * -3deg));
  border: 1.5px dashed var(--lumen); border-radius: 22px / 16px;
}
.px-sketch::before { content: ""; position: absolute; left: -1.5px; right: -1.5px; top: -18px; height: 34px; border: 1.5px dashed var(--lumen); border-radius: 50%; }
.px-sketch__axis { position: absolute; left: 50%; top: -48px; bottom: -48px; width: 1px; background: rgb(226 255 79 / 0.35); }
.px-dim { position: absolute; color: var(--bone); opacity: 0.6; font-size: 9px; white-space: nowrap; }
.px-dim--h { left: calc(100% + 26px); top: 50%; padding-left: 10px; border-left: 1px solid rgb(242 239 233 / 0.4); height: 60%; transform: translateY(-50%); display: flex; align-items: center; }
.px-dim--d { left: 0; right: 0; top: calc(100% + 26px); text-align: center; border-top: 1px solid rgb(242 239 233 / 0.4); padding-top: 8px; }
.px-sketch.is-ghost { opacity: 0.4; transform: translate(calc(-50% - 14px), calc(-50% - 10px)); }
.px-note { position: absolute; margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(18px, 1.8vw, 26px); color: var(--bone); opacity: 0.75; white-space: nowrap; }
.px-note--a { left: calc(50% + var(--cw) / 2 + 40px); top: calc(50% - var(--ch) / 2 - 4px); color: var(--lumen); opacity: 1; transform: rotate(-4deg); }
.px-note--b { left: calc(50% + var(--cw) / 2 + 70px); top: calc(50% + var(--ch) * 0.36); transform: rotate(3deg); }
.px-note--c { right: calc(50% + var(--cw) / 2 + 90px); top: calc(50% + var(--ch) * 0.03); transform: rotate(-3deg); }
/* Creative Brief: zurückhaltend, wie eine Notiz neben der Skizze */
.px-brief { position: absolute; text-align: right; right: calc(var(--gutter) + 9vw); top: calc(50% - var(--ch) / 2 + 8px); width: 320px; /* zwischen Dose und Seitenkante */ padding: 14px 0 0; border-top: 1px solid rgb(226 255 79 / 0.6); color: var(--bone); }
.px-brief p { margin: 0; }
.px-brief__head { font-size: 10px; color: var(--lumen) !important; }
.px-brief__client { margin-top: 4px !important; font-size: 8.5px; }
.px-brief__q { margin-top: 16px !important; font-family: var(--serif); font-size: 26px; line-height: 1.12; opacity: 0.92; }
.px-hero { position: absolute; left: var(--gutter); bottom: 7vh; z-index: 6; }
.px-hero .display { margin: 14px 0 12px; font-size: clamp(64px, 6.7vw, 96px); line-height: 0.92; }
.px-hero .display em, .px-cap--final .display em { font-size: 0.8333em; } /* wie auf den anderen Seiten: zweite Zeile kursiv und kleiner */
.px-hero__sub { margin: 0; font-size: 18px; opacity: 0.8; }
.px-hero__hint { margin: 18px 0 0; color: var(--mute); }

/* ---------- 02 Produkt: Callouts ---------- */
.px-call { position: absolute; margin: 0; font-size: 9px; color: var(--bone); opacity: 0.85; white-space: nowrap; display: flex; align-items: center; gap: 12px; }
.px-call::before { content: ""; width: 80px; height: 1px; background: rgb(242 239 233 / 0.5); order: 0; }
.px-call--r1, .px-call--r2 { left: calc(50% + var(--cw) / 2 + 8px); }
.px-call--l1, .px-call--l2 { right: calc(50% + var(--cw) / 2 + 8px); flex-direction: row-reverse; }
.px-call--l1 { top: calc(50% - var(--ch) * 0.3); }
.px-call--r1 { top: calc(50% - var(--ch) * 0.08); }
.px-call--r2 { top: calc(50% + var(--ch) * 0.12); }
.px-call--l2 { top: calc(50% + var(--ch) * 0.34); }

/* ---------- Auftritt: scrollgesteuert, gestaffelt (--e kommt aus dem Script, --k = Verzögerung je Element) ---------- */
.px-w { --v: clamp(0, calc((var(--e, 1) - var(--k, 0)) / (1 - var(--k, 0))), 1); }
.px-w [style*="--k"] { --v: clamp(0, calc((var(--e, 1) - var(--k, 0)) / (1 - var(--k, 0))), 1); }

/* ---------- 03 Bildwelt: vollflächiges Raster, großes echtes Foto, Packshot mit 3D-Dose kleiner ---------- */
.px-w--imagery { --g: 0.55vw; --h: calc(51.5% - var(--g)); }
.px-tile, .px-w--imagery .px-photo { position: absolute; margin: 0; overflow: hidden; background: #1b1b1e; transform: none; }
.px-tile { clip-path: inset(0 0 calc((1 - var(--v)) * 100%) 0); }
.px-tile img { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.18 - var(--v) * 0.18)); }
.px-w--imagery .px-photo img { width: 100%; height: 100%; object-fit: cover; }
.px-tile--a { left: 0; top: var(--g); width: 17.55vw; height: var(--h); }
.px-tile--b { left: 18.1vw; top: var(--g); width: 21.05vw; height: var(--h); }
.px-tile--c { left: 27.85vw; top: calc(var(--g) + var(--h) + var(--g)); width: 11.3vw; height: 24%; clip-path: inset(0 0 0 calc((1 - var(--v)) * 100%)); }
.px-tile--hero { left: 39.65vw; top: var(--g); width: 38.5vw; height: calc(100% - var(--g) - 4.6%); }
.px-tile--d { left: 78.7vw; right: 0; top: var(--g); height: var(--h); }
/* ---------- 04 Kampagne ---------- */
.px-full { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }

/* ---------- 05 Film ---------- */
@keyframes px-rec { 50% { opacity: 0; } }

/* ---------- 06 Website ---------- */

/* ---------- 07 Social ---------- */
.px-phone { height: min(84%, 700px); aspect-ratio: 330 / 690; transform: translate(-50%, -50%); padding: 12px; border-radius: 52px; background: #151517; border: 1.5px solid #3a3a40; }
.px-phone > img, .px-app { width: 100%; height: 100%; border-radius: 42px; overflow: hidden; }
.px-phone > img { object-fit: cover; object-position: 50% 50%; }
.px-phone::before { content: ""; position: absolute; left: 50%; top: 14px; width: 26%; height: 22px; transform: translateX(-50%); border-radius: 11px; background: #151517; z-index: 2; }
.px-story { position: absolute; inset: 12px; padding: 14px 14px 22px; color: #fff; display: flex; flex-direction: column; }
.px-story__bars { margin: 18px 0 10px; display: flex; gap: 4px; }
.px-story__bars i { flex: 1; height: 3px; border-radius: 2px; background: rgb(255 255 255 / 0.45); }
.px-story__bars i:first-child { background: #fff; }
.px-story__who { margin: 0; font-size: 11px; line-height: 1.3; padding-left: 36px; position: relative; }
.px-story__who i { position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: #d99aa2; border: 2px solid #fff; }
.px-story__cta { margin: auto auto 0; padding: 9px 18px; border-radius: 20px; background: #fff; color: #111; font-size: 12px; font-weight: 500; }
.px-side { position: absolute; }

/* ---------- 08 Print ---------- */
.px-spread { --sw: min(68vw, 980px); width: var(--sw); aspect-ratio: 1060 / 660; transform: translate(-50%, calc(-50% - 2vh)); display: grid; grid-template-columns: 1fr 1fr; box-shadow: 0 30px 60px rgb(0 0 0 / 0.5); }
.px-w--print { background: #1c1a18; }
.px-page { position: relative; background: #f4efe6; color: #141312; padding: 7% 8%; overflow: hidden; }
.px-page .label { margin: 0; font-size: 8px; color: #5a5550; }
.px-page__h { margin: 8% 0 0; font-family: var(--serif); font-size: clamp(28px, 3.6vw, 56px); line-height: 0.95; }
.px-page__lines { margin-top: 8%; display: grid; grid-template-columns: 1fr 1fr; gap: 9px 18px; }
.px-page__lines i { height: 5px; border-radius: 3px; background: rgb(20 19 18 / 0.12); }
.px-page > img { position: absolute; left: 8%; bottom: 7%; width: 40%; aspect-ratio: 1.2; object-fit: cover; }
.px-page--ad { padding: 0; }
.px-page--ad > img { position: static; width: 100%; height: 100%; aspect-ratio: auto; }
.px-page__logo { position: absolute; left: 6%; bottom: 5%; margin: 0; color: #fff; font-weight: 500; letter-spacing: 0.3em; font-size: clamp(9px, 1vw, 14px); }
.px-page__claim { position: absolute; right: 6%; bottom: 4%; margin: 0; color: #fff; font-family: var(--serif); font-style: italic; font-size: clamp(16px, 2vw, 30px); }
.px-spread::after { content: ""; position: absolute; left: calc(50% - 30px); width: 60px; top: 0; bottom: 0; background: linear-gradient(90deg, transparent, rgb(0 0 0 / 0.35), transparent); }

/* ---------- 09 App ---------- */
.px-phone--app .px-app { background: #0e100c; color: #f2efe9; position: relative; container-type: size; font-family: var(--sans); }
.px-app p { margin: 0; }
.px-app__status { position: absolute; left: 9cqw; right: 8cqw; top: 2.6cqh; display: flex; justify-content: space-between; align-items: center; font-size: 4cqw; }
.px-app__status b { font-weight: 600; }
.px-app__status span { display: flex; align-items: flex-end; gap: 0.8cqw; height: 2.2cqw; }
.px-app__status i { width: 0.9cqw; background: #f2efe9; border-radius: 1px; }
.px-app__status i:nth-child(1) { height: 35%; } .px-app__status i:nth-child(2) { height: 55%; } .px-app__status i:nth-child(3) { height: 78%; } .px-app__status i:nth-child(4) { height: 100%; }
.px-app__status em { width: 6.5cqw; height: 3cqw; margin-left: 1.4cqw; border: 1px solid rgb(242 239 233 / 0.6); border-radius: 1cqw; background: linear-gradient(90deg, #e2ff4f 70%, transparent 70%) content-box; padding: 0.5cqw; }
.px-app__top { position: absolute; left: 7cqw; right: 7cqw; top: 8.5cqh; display: flex; align-items: center; gap: 3cqw; font-size: 3.4cqw; color: #9a978f; line-height: 1.35; }
.px-app__top img { width: 10cqw; aspect-ratio: 1; border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
.px-app__top b { color: #f2efe9; font-weight: 500; font-size: 4.6cqw; }
.px-app__top i { margin-left: auto; width: 9cqw; aspect-ratio: 1; border-radius: 50%; border: 1px solid #2c2f27; background: radial-gradient(circle at 70% 30%, #e2ff4f 0 1.1cqw, transparent 1.3cqw); }
.px-app__hero { position: absolute; left: 5cqw; right: 5cqw; top: 16.5cqh; height: 44cqh; border-radius: 7cqw; overflow: hidden;
  background: radial-gradient(ellipse 70% 55% at 50% 52%, rgb(183 216 26 / 0.55), rgb(183 216 26 / 0.08) 60%, transparent 75%), linear-gradient(160deg, #23281a, #151711); border: 1px solid #262a1f; }
.px-app__tag { position: absolute; left: 5.5cqw; top: 2.4cqh; font-size: 2.8cqw; color: #e2ff4f; }
.px-app__name { position: absolute; left: 5.5cqw; bottom: 2.6cqh; font-family: var(--serif); font-size: 8.6cqw; line-height: 0.95; }
.px-app__mg { position: absolute; right: 5.5cqw; bottom: 2.6cqh; font-size: 3.2cqw; color: #9a978f; }
.px-app__mg b { font-size: 6.4cqw; font-weight: 500; color: #f2efe9; }
.px-app__stats { position: absolute; left: 5cqw; right: 5cqw; top: 62.5cqh; display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; }
.px-app__stats > p { height: 13cqh; padding: 0 4cqw; border-radius: 5cqw; background: #171a13; border: 1px solid #23261d; font-size: 3cqw; color: #9a978f; line-height: 1.3; }
.px-app__stats b { color: #f2efe9; font-weight: 500; font-size: 4.4cqw; }
.px-app__ring { display: flex; align-items: center; gap: 3cqw; }
.px-app__ring i { flex: none; width: 11cqw; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #171a13 58%, transparent 60%), conic-gradient(#e2ff4f var(--v), #2c2f27 0); }
.px-app__streak { display: flex; flex-direction: column; justify-content: center; gap: 1.2cqh; }
.px-app__streak span { display: flex; gap: 1.2cqw; }
.px-app__streak i { width: 2.6cqw; aspect-ratio: 1; border-radius: 50%; background: #e2ff4f; }
.px-app__streak .is-off { background: #2c2f27; }
.px-app__btn { position: absolute; left: 5cqw; right: 5cqw; top: 78cqh; padding: 2cqh 0; border-radius: 8cqw; background: #e2ff4f; color: #0b0b0c; text-align: center; font-size: 4cqw; font-weight: 500; }
.px-app__tabs { position: absolute; left: 0; right: 0; bottom: 0; height: 11cqh; display: flex; justify-content: space-around; align-items: flex-start; padding-top: 1.6cqh; border-top: 1px solid #1f221a; background: #0b0c09; font-size: 2.8cqw; color: #6f6c66; }
.px-app__tabs span { display: grid; justify-items: center; gap: 0.6cqh; }
.px-app__tabs i { width: 5.4cqw; aspect-ratio: 1; border-radius: 1.6cqw; border: 1.5px solid currentColor; }
.px-app__tabs .is-on { color: #e2ff4f; }
.px-app__tabs .is-on i { background: #e2ff4f; }
 .px-map i:nth-child(2) { left: 62%; top: 46%; } .px-map i:nth-child(3) { left: 38%; top: 74%; }

/* ---------- 10 Überall ---------- */

/* =====================================================================
   Nach der Experience
   ===================================================================== */
.pd { padding: clamp(96px, 14vh, 160px) var(--gutter); border-top: 1px solid var(--line); }
.pd > .label { margin: 0 0 18px; }
.pd .display { margin: 0; font-size: clamp(56px, 6.7vw, 96px); line-height: 0.95; }
.pd-chain__list, .pd-process__list { list-style: none; margin: clamp(56px, 8vh, 96px) 0 0; padding: 0; display: grid; gap: 16px; }
.pd-chain__list { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.pd-chain__list li, .pd-process__list li { position: relative; padding-top: 20px; border-top: 1px solid var(--line); }
.pd-chain__list li:first-child { border-top-color: var(--lumen); }
.pd-chain__list li:not(:last-child)::after { content: "→"; position: absolute; right: 8px; top: 18px; color: var(--mute); font-size: 14px; }
.pd-chain__list b, .pd-process__list b { font-family: var(--mono); font-weight: 400; font-size: 10px; color: var(--lumen); }
.pd-chain__list span { display: block; margin-top: 10px; font-family: var(--serif); font-size: clamp(26px, 2.5vw, 36px); }
.pd-chain__list p, .pd-process__list p { margin: 8px 0 0; font-size: 14px; line-height: 1.45; color: var(--mute); }

.pd-nop { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; padding: clamp(96px, 14vh, 150px) var(--gutter); background: var(--lumen); color: var(--ink); }
.pd-nop .display { margin: 0; font-size: clamp(56px, 6.2vw, 88px); line-height: 0.95; }
.pd-nop p { margin: 24px 0 0; font-size: 18px; opacity: 0.75; }
.pd-nop__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pd-nop__list li { padding: 16px 24px; border: 1px solid rgb(11 11 12 / 0.55); border-radius: 30px; font-size: 17px; }

.pd-work__list { list-style: none; margin: clamp(48px, 7vh, 80px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.pd-work__list img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; }
.pd-work__list p { margin: 14px 0 4px; font-family: var(--serif); font-size: 30px; }
.pd-work__list .label { color: var(--mute); font-size: 9px; }

.pd-process__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: 24px; }
.pd-process__list b { display: block; font-family: var(--serif); font-size: 64px; line-height: 1; }
.pd-process__list span { display: block; margin-top: 12px; font-family: var(--serif); font-size: 32px; }


/* =====================================================================
   Stationen 04–10 (Neugestaltung): grafische Flächen, Raster, Bewegung
   --v = Auftritt je Element (0 → 1), kommt aus --e der Station und --k des Elements
   ===================================================================== */
.px-w--campaign, .px-w--video, .px-w--web, .px-w--social, .px-w--print, .px-w--app, .px-w--all { container-type: size; }

/* ---------- 04 Kampagne: Farbkreis, Sortenwechsel ---------- */
/* Sortenabhängige Inhalte: zwei Lagen, die überblenden */
.px-flav { position: absolute; z-index: 2; left: 68%; top: 14%; color: #fff; opacity: var(--v); transform: translateX(calc((1 - var(--v)) * 40px)); }
.px-flav .label { margin: 0 0 12px; color: #fff; display: grid; }
.px-flav__name { margin: 0; display: grid; font-family: var(--serif); font-size: clamp(44px, 4.8vw, 74px); line-height: 0.92; }
.px-w--campaign::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, transparent 72%, rgb(0 0 0 / 0.35)); }

/* ---------- 05 Video: Vollbild-Filmset mit Kamera-Sucher ---------- */
@keyframes px-sweep { from { background-position: 100% 0; } to { background-position: 0% 0; } }
 .px-vf__c--tr { right: 0; top: 0; border-width: 2px 2px 0 0; }
 .px-vf__c--br { right: 0; bottom: 0; border-width: 0 2px 2px 0; }
 .px-vf__meta { right: 50px; }

/* ---------- 06 Website: mehrere Screens ---------- */
.px-web__orb { position: absolute; left: 58%; top: 40%; width: min(64cqh, 40vw); aspect-ratio: 1; border-radius: 50%; background: var(--lumen); transform: translate(-50%, -50%) scale(var(--v)); }
.px-win { position: absolute; background: #f4f1ea; color: #0b0b0c; border-radius: 10px; overflow: hidden; box-shadow: 0 30px 70px rgb(0 0 0 / 0.55); container-type: inline-size; font-family: var(--sans); }
.px-win p { margin: 0; }
.px-win__bar { position: relative; z-index: 2; height: 26px; display: flex; align-items: center; gap: 6px; padding: 0 12px; background: #e6e2da; border-bottom: 1px solid #d6d1c7; }
.px-win__bar i { width: 8px; height: 8px; border-radius: 50%; background: #c9c3b8; }
.px-win__bar span { margin: 0 auto; padding: 2px 30px; border-radius: 10px; background: #f4f1ea; font-size: 10px; color: #6b665e; }
.px-win--main { z-index: 3; left: 50%; top: 46%; width: min(52vw, 820px); aspect-ratio: 16 / 10; transform: translate(-50%, -50%); }
.px-home { position: absolute; inset: 26px 0 0; display: grid; grid-template-columns: 42% 1fr; grid-template-rows: auto 1fr; }
.px-home__nav { grid-column: 1 / -1; display: flex; align-items: center; gap: 3cqw; padding: 2cqw 3.4cqw; font-size: 1.45cqw; }
.px-home__nav b { font-weight: 500; letter-spacing: 0.4em; margin-right: auto; }
.px-home__nav em { font-style: normal; padding: 0.5cqw 1.4cqw; border-radius: 2cqw; background: #0b0b0c; color: #e2ff4f; }
.px-home__copy { align-self: center; padding: 0 2cqw 6cqw 3.4cqw; }
.px-home__copy .label { color: #6b665e; font-size: 1.2cqw; }
.px-home__h { margin-top: 1.6cqw !important; font-family: var(--serif); font-size: 8.4cqw; line-height: 0.9; }
.px-home__h em { font-size: 0.8333em; }
.px-home__p { margin-top: 2cqw !important; font-size: 1.6cqw; color: #4a4741; }
.px-home__btns { margin-top: 3cqw !important; display: flex; gap: 1cqw; font-size: 1.4cqw; }
.px-home__btns span { padding: 1.1cqw 2cqw; border-radius: 3cqw; border: 1px solid #0b0b0c; }
.px-home__btns span:first-child { background: #0b0b0c; color: #e2ff4f; }
.px-home__hero { margin: 0 0 0; min-height: 0; overflow: hidden; }
.px-home__hero img { width: 100%; height: 100%; object-fit: cover; }
.px-cursor { position: absolute; z-index: 4; width: 2.6cqw; left: 70%; top: 70%; filter: drop-shadow(0 4px 8px rgb(0 0 0 / 0.35)); animation: px-cursor 7s var(--ease) infinite; }
@keyframes px-cursor { 0%, 8% { left: 78%; top: 82%; } 38%, 52% { left: 13%; top: 77%; transform: scale(1); } 45% { transform: scale(0.82); } 70%, 100% { left: 78%; top: 82%; } }
.px-win--shop { z-index: 2; left: 64.5%; top: 9%; width: min(21vw, 320px); aspect-ratio: 4 / 3.4; transform: rotate(3deg) translateY(calc((1 - var(--v)) * 50px)); opacity: var(--v); }
.px-win__view { position: absolute; inset: 26px 0 0; overflow: hidden; }
.px-scroll { animation: px-autoscroll 16s ease-in-out infinite alternate; }
@keyframes px-autoscroll { 0%, 12% { transform: translateY(0); } 88%, 100% { transform: translateY(var(--sy, -55%)); } }
.px-shop__h { padding: 5cqw 6cqw 3cqw; font-family: var(--serif); font-size: 9cqw; line-height: 1; }
.px-shop__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; padding: 0 6cqw 6cqw; }
.px-shop__grid figure { margin: 0; }
.px-shop__grid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 1.5cqw; }
.px-shop__grid figcaption { display: flex; justify-content: space-between; margin-top: 1.6cqw; font-size: 3.6cqw; }
.px-shop__grid b { font-weight: 500; }
.px-mob { position: absolute; z-index: 4; left: 14.5%; top: 46%; height: min(60cqh, 520px); aspect-ratio: 9 / 19.5; padding: 7px; border-radius: 30px; background: #151517; border: 1.5px solid #3a3a40;
  box-shadow: 0 30px 60px rgb(0 0 0 / 0.5); transform: translate(-50%, -50%) rotate(-5deg) translateY(calc((1 - var(--v)) * 60px)); opacity: var(--v); container-type: inline-size; }
.px-mob__view { position: relative; height: 100%; border-radius: 24px; overflow: hidden; background: #f4f1ea; color: #0b0b0c; }
.px-scroll--mob { --sy: -62%; animation-duration: 14s; }
.px-mob p { margin: 0; }
.px-mob__nav { display: flex; justify-content: space-between; align-items: center; padding: 14cqw 7cqw 5cqw; font-size: 5cqw; }
.px-mob__nav b { font-weight: 500; letter-spacing: 0.35em; }
.px-mob__nav i { width: 7cqw; height: 4cqw; border-top: 2px solid #0b0b0c; border-bottom: 2px solid #0b0b0c; }
.px-mob__view img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.px-mob__h { padding: 6cqw 7cqw 4cqw; font-family: var(--serif); font-size: 12cqw; line-height: 0.95; }
.px-mob__h em { font-size: 0.8333em; }
.px-mob__btn { display: inline-block; margin: 0 7cqw 7cqw; padding: 3cqw 6cqw; border-radius: 6cqw; background: #0b0b0c; color: #e2ff4f; font-size: 4.4cqw; }
.px-mob__row { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; padding: 0 2cqw; }
.px-ds { position: absolute; z-index: 4; left: 65%; top: 69%; width: min(17vw, 260px); padding: 16px 18px; border-radius: 12px; background: #151517; border: 1px solid #2c2c30; color: var(--bone);
  box-shadow: 0 24px 50px rgb(0 0 0 / 0.5); transform: translateY(calc((1 - var(--v)) * 40px)); opacity: var(--v); }
.px-ds p { margin: 0; }
.px-ds .label { color: var(--lumen); }
.px-ds__sw { margin-top: 12px !important; display: flex; gap: 8px; }
.px-ds__sw i { width: 26px; height: 26px; border-radius: 50%; background: var(--c); border: 1px solid #3a3a40; }
.px-ds__type { margin-top: 12px !important; display: flex; align-items: center; gap: 12px; font-size: 10px; color: var(--mute); line-height: 1.4; }
.px-ds__type b { font-family: var(--serif); font-weight: 400; font-size: 40px; color: var(--bone); line-height: 1; }
.px-ds__btns { margin-top: 12px !important; display: flex; gap: 6px; font-size: 10px; }
.px-ds__btns span { padding: 6px 12px; border-radius: 14px; border: 1px solid var(--bone); }
.px-ds__btns span:first-child { background: var(--lumen); color: var(--ink); border-color: var(--lumen); }

/* ---------- 07 Social: Profil, Story, Reel, Lauftext ---------- */
.px-marquee { position: absolute; left: 0; top: 50%; margin: 0; display: flex; white-space: nowrap; transform: translateY(-50%); pointer-events: none;
  font-family: var(--serif); font-style: italic; font-size: 30cqh; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgb(226 255 79 / 0.35); opacity: var(--v); }
.px-marquee span { padding-right: 0.3em; animation: px-marquee 36s linear infinite; }
@keyframes px-marquee { to { transform: translateX(-100%); } }
.px-phone--story { z-index: 3; }
.px-phone--side { z-index: 2; height: min(64%, 540px); top: calc(50% - min(42%, 350px)); /* oben bündig mit dem mittleren Handy */ padding: 9px; border-radius: 40px; box-shadow: 0 30px 60px rgb(0 0 0 / 0.5); opacity: var(--v); }
.px-phone--side::before { top: 11px; height: 17px; }
.px-phone--profile { left: calc(50% - var(--ch) * 0.7); transform: translate(-50%, 0) translateY(calc((1 - var(--v)) * 70px)); }
.px-phone--reel { left: calc(50% + var(--ch) * 0.7); transform: translate(-50%, 0) translateY(calc((1 - var(--v)) * 70px)); }
.px-ig, .px-reel2 { position: relative; height: 100%; border-radius: 32px; overflow: hidden; container-type: inline-size; }
.px-ig { background: #fff; color: #111; padding: 14% 0 0; }
.px-ig p { margin: 0; }
.px-ig__head { display: flex; gap: 4cqw; align-items: center; padding: 0 5cqw; font-size: 3.6cqw; line-height: 1.35; color: #444; }
.px-ig__head i { flex: none; width: 17cqw; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #b7d81a 55%, transparent 57%), conic-gradient(#e2ff4f, #d98a85, #e2ff4f); }
.px-ig__head b { font-size: 4.4cqw; color: #111; }
.px-ig__stats { display: flex; justify-content: space-around; padding: 5cqw 3cqw; font-size: 3.4cqw; color: #666; }
.px-ig__stats b { display: block; font-size: 4.4cqw; color: #111; text-align: center; }
.px-ig__hl { display: flex; gap: 4cqw; padding: 0 5cqw 4cqw; }
.px-ig__hl i { width: 13cqw; aspect-ratio: 1; border-radius: 50%; border: 2px solid #ddd; background: center / cover no-repeat; } /* Bild kommt direkt per style="background-image" (url() in einer CSS-Variable würde relativ zur CSS-Datei aufgelöst) */
.px-ig__tabs { display: flex; justify-content: space-around; padding: 2.4cqw 0; border-top: 1px solid #eee; font-size: 3.4cqw; color: #999; }
.px-ig__tabs b { color: #111; }
.px-ig__top { display: flex; justify-content: space-between; padding: 0 5cqw 4cqw; font-size: 4.6cqw; font-weight: 600; }
.px-ig__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; }
.px-ig__grid img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.px-reel2 { background: #000; }
.px-reel2 > img { width: 100%; height: 100%; object-fit: cover; animation: px-kenburns 9s ease-in-out infinite alternate; }
@keyframes px-kenburns { to { transform: scale(1.12) translateY(-2%); } }
.px-reel2 .label { position: absolute; left: 7cqw; top: 14cqw; margin: 0; color: #fff; font-size: 3.6cqw; }
.px-reel2__icons { position: absolute; right: 6cqw; bottom: 22cqw; margin: 0; color: #fff; font-size: 6cqw; line-height: 2; text-align: center; }
.px-reel2__bar { position: absolute; left: 6cqw; right: 6cqw; bottom: 9cqw; height: 3px; border-radius: 2px; background: rgb(255 255 255 / 0.3); }
.px-reel2__bar::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left; animation: px-progress 15s linear infinite; }
@keyframes px-progress { from { transform: scaleX(0); } }
.px-heart { position: absolute; right: 8cqw; bottom: 34cqw; color: #ff5a7a; font-size: 9cqw; opacity: 0; animation: px-heart 3.2s ease-out infinite; animation-delay: var(--t); }
@keyframes px-heart { 0% { opacity: 0; transform: translate(0, 0) scale(0.6); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), -46cqw) scale(1.2); } }
.px-pill { position: absolute; z-index: 4; margin: 0; display: flex; align-items: center; gap: 10px; padding: 9px 16px 9px 9px; border-radius: 30px; background: var(--bone); color: var(--ink); font-size: 12px; white-space: nowrap;
  box-shadow: 0 14px 30px rgb(0 0 0 / 0.4); transform: scale(var(--v)); animation: px-float 5s ease-in-out infinite alternate; }
.px-pill i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--lumen); font-style: normal; font-size: 12px; }
.px-pill--a { left: calc(50% + var(--ch) * 0.3); top: 16%; }
.px-pill--b { right: calc(50% + var(--ch) * 0.3); top: 62%; animation-delay: -2s; }
.px-pill--c { left: calc(50% + var(--ch) * 0.34); top: 76%; animation-delay: -3.5s; }
@keyframes px-float { to { translate: 0 -10px; } }

/* ---------- 08 Print: Magazin, Poster, Etikett, Flyer ---------- */
.px-w--print .px-spread { --sw: min(40vw, 640px); width: var(--sw); transform: translate(-50%, -52%); }
.px-crop { position: absolute; width: 20px; height: 20px; border: 0 solid rgb(242 239 233 / 0.6); }
.px-crop--tl { left: -28px; top: -28px; border-width: 0 1px 1px 0; } .px-crop--tr { right: -28px; top: -28px; border-width: 0 0 1px 1px; }
.px-crop--bl { left: -28px; bottom: -28px; border-width: 1px 1px 0 0; } .px-crop--br { right: -28px; bottom: -28px; border-width: 1px 0 0 1px; }
.px-cmyk { position: absolute; left: 0; top: calc(100% + 20px); margin: 0; display: flex; align-items: center; gap: 4px; }
.px-cmyk i { width: 14px; height: 14px; background: var(--c); }
.px-cmyk .label { margin-left: 10px; font-size: 8.5px; }
.px-poster, .px-proof, .px-flyer { position: absolute; margin: 0; }
.px-poster figcaption, .px-proof figcaption, .px-flyer figcaption { margin-top: 10px; font-size: 8.5px; color: var(--mute); }
.px-poster { left: 3.4vw; top: 12%; height: 62%; aspect-ratio: 1 / 1.414; transform: rotate(-2deg) translateY(calc((1 - var(--v)) * -60px)); clip-path: inset(0 0 calc((1 - var(--v)) * 100%) 0); }
.px-poster img { width: 100%; height: 100%; object-fit: cover; box-shadow: 0 30px 60px rgb(0 0 0 / 0.5); }
.px-poster__h { position: absolute; left: 8%; top: 6%; margin: 0; color: #fff; font-family: var(--serif); font-size: clamp(22px, 2.4vw, 38px); line-height: 0.95; }
.px-poster__h em { font-size: 0.8333em; }
.px-poster__logo { position: absolute; left: 8%; bottom: 5%; margin: 0; color: #fff; font-size: 10px; font-weight: 500; letter-spacing: 0.3em; }
.px-proof { left: calc(50% + min(40vw, 640px) / 2 + 3vw); top: 12%; width: min(14vw, 220px); padding: 10px; background: #fff; box-shadow: 0 24px 50px rgb(0 0 0 / 0.5);
  transform: rotate(2deg) translateY(calc((1 - var(--v)) * -50px)); clip-path: inset(0 0 calc((1 - var(--v)) * 100%) 0); }
.px-proof canvas { display: block; width: 100%; height: auto; outline: 1px dashed rgb(226 69 58 / 0.7); outline-offset: 4px; }
.px-proof figcaption { position: absolute; top: calc(100% + 6px); }
.px-flyer { left: calc(50% + min(40vw, 640px) / 2 + 4vw); top: 52%; width: min(11vw, 170px); aspect-ratio: 1 / 1.414; background: #f4efe6; color: #141312; box-shadow: 0 24px 50px rgb(0 0 0 / 0.5);
  transform: rotate(-4deg) translateY(calc((1 - var(--v)) * 50px)); opacity: var(--v); }
.px-flyer img { width: 100%; height: 62%; object-fit: cover; }
.px-flyer p { margin: 0; padding: 8% 9%; font-family: var(--serif); font-size: clamp(14px, 1.3vw, 20px); line-height: 1; }
.px-flyer p em { font-size: 0.8333em; }
.px-flyer figcaption { position: absolute; top: calc(100% + 6px); }

/* ---------- 09 App: drei Screens vor dem Lime-Kreis ---------- */
.px-app__orb { position: absolute; left: 50%; top: 50%; width: min(80cqh, 56vw); aspect-ratio: 1; border-radius: 50%; background: var(--lumen); transform: translate(-50%, -50%) scale(var(--v)); }
.px-phone--app { z-index: 3; }
.px-phone--flav { left: calc(50% - var(--ch) * 0.74); transform: translate(-50%, -50%) rotate(-6deg) translateY(calc((1 - var(--v)) * 70px)); }
.px-phone--track { left: calc(50% + var(--ch) * 0.74); transform: translate(-50%, -50%) rotate(6deg) translateY(calc((1 - var(--v)) * 70px)); }
.px-scr { position: relative; height: 100%; border-radius: 32px; overflow: hidden; container-type: inline-size; padding: 15% 7% 0; }
.px-scr p { margin: 0; }
.px-scr__top { display: flex; justify-content: space-between; font-size: 4.4cqw; }
.px-scr__top b { font-weight: 500; }
.px-scr__top span { color: var(--mute); }
.px-scr--flav { background: #f4f1ea; color: #0b0b0c; }
.px-scr--flav img { width: 100%; aspect-ratio: 1; object-fit: cover; margin-top: 6cqw; border-radius: 6cqw; }
.px-scr__name { margin-top: 6cqw !important; font-family: var(--serif); font-size: 13cqw; line-height: 0.92; }
.px-scr__name em { font-size: 0.8333em; }
.px-scr__dots { margin-top: 5cqw !important; display: flex; gap: 2cqw; }
.px-scr__dots i { width: 2.4cqw; height: 2.4cqw; border-radius: 50%; background: #cfc9be; }
.px-scr__dots .is-on { width: 7cqw; border-radius: 2cqw; background: #0b0b0c; }
.px-scr__row { position: absolute; left: 7cqw; right: 7cqw; bottom: 9cqw; display: flex; justify-content: space-between; align-items: center; font-size: 4.6cqw; }
.px-scr__row b { padding: 3cqw 6cqw; border-radius: 6cqw; background: #0b0b0c; color: #e2ff4f; font-weight: 500; }
.px-scr--track { background: #0e100c; color: var(--bone); }
.px-map2 { display: block; width: 100%; margin-top: 7cqw; border-radius: 5cqw; background: #171a13; background-image: linear-gradient(rgb(242 239 233 / 0.06) 1px, transparent 1px), linear-gradient(90deg, rgb(242 239 233 / 0.06) 1px, transparent 1px); background-size: 12% 15%; }
.px-map2 path { fill: none; stroke: var(--lumen); stroke-width: 1.4; stroke-dasharray: 3 2.4; animation: px-dash 3s linear infinite; }
.px-map2 circle { fill: var(--bone); }
.px-map2 .px-map2__me { fill: var(--lumen); }
@keyframes px-dash { to { stroke-dashoffset: -16; } }
.px-steps { list-style: none; margin: 7cqw 0 0; padding: 0; display: grid; gap: 3.4cqw; font-size: 4.2cqw; color: #6f6c66; }
.px-steps li { display: flex; align-items: center; gap: 3cqw; }
.px-steps li::before { content: ""; width: 3cqw; height: 3cqw; border-radius: 50%; border: 1.5px solid currentColor; }
.px-steps .is-done { color: var(--bone); } .px-steps .is-done::before { background: var(--bone); }
.px-steps .is-now { color: var(--lumen); } .px-steps .is-now::before { background: var(--lumen); border-color: var(--lumen); box-shadow: 0 0 0 3px rgb(226 255 79 / 0.25); }
.px-scr--track .px-scr__row b { background: var(--lumen); color: var(--ink); }
.px-push { position: absolute; z-index: 5; left: 6%; right: 6%; top: 4.5%; margin: 0; padding: 10px 12px; border-radius: 16px; background: rgb(36 38 32 / 0.92); backdrop-filter: blur(10px); color: var(--bone);
  font-size: 11px; line-height: 1.35; box-shadow: 0 10px 30px rgb(0 0 0 / 0.4); animation: px-push 7s var(--ease) infinite; }
.px-push b { display: block; font-size: 9px; letter-spacing: 0.3em; font-weight: 500; color: var(--lumen); margin-bottom: 2px; }
@keyframes px-push { 0%, 12% { transform: translateY(-140%); opacity: 0; } 20%, 70% { transform: translateY(0); opacity: 1; } 80%, 100% { transform: translateY(-140%); opacity: 0; } }

/* ---------- 08 Everywhere: Mosaik über die volle Breite (oben), Bildunterschrift unten links wie überall ---------- */
.px-mosaic { position: absolute; left: 0; right: 0; top: 0.55vw; height: 62%; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(3, 1fr); gap: 0.55vw; }
.px-mosaic::before { content: ""; grid-area: 1 / 4 / 4 / 6; border: 1px dashed rgb(226 255 79 / 0.45); border-radius: 2px; }
.px-mosaic figure { position: relative; margin: 0; min-height: 0; overflow: hidden; background: #1b1b1e; clip-path: inset(calc((1 - var(--v)) * 100%) 0 0 0); }
.px-mosaic img { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.2 - var(--v) * 0.2)); }
.px-mosaic figcaption { position: absolute; left: 10px; bottom: 8px; font-size: 8.5px; color: #fff; text-shadow: 0 1px 6px rgb(0 0 0 / 0.6); }
.px-mosaic span { position: absolute; left: 10px; top: 10px; color: #fff; font-family: var(--serif); font-size: clamp(16px, 1.6vw, 24px); line-height: 0.95; }
.m-web { grid-area: 1 / 1 / 2 / 3; background: #e6e2da !important; }
.m-web .px-mbar { position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 14px; margin: 0; display: flex; gap: 4px; align-items: center; padding: 0 8px; background: #e6e2da; }
.m-web .px-mbar i { width: 5px; height: 5px; border-radius: 50%; background: #c9c3b8; }
.m-web img { position: absolute; inset: 14px 0 0; height: calc(100% - 14px); }
.m-a { grid-area: 1 / 3; } .m-b { grid-area: 1 / 6; } .m-film { grid-area: 1 / 7 / 2 / 9; }
.m-c { grid-area: 2 / 1; } .m-story { grid-area: 2 / 2; } .m-poster { grid-area: 2 / 3; } .m-d { grid-area: 2 / 6; } .m-e { grid-area: 2 / 7; } .m-g { grid-area: 2 / 8; }
.m-ooh { grid-area: 3 / 1 / 4 / 3; } .m-f { grid-area: 3 / 3; } .m-h { grid-area: 3 / 6; } .m-i { grid-area: 3 / 7; } .m-app { grid-area: 3 / 8; }
.m-ooh span { top: auto; bottom: 26px; font-style: italic; font-size: clamp(22px, 2.4vw, 36px); }

/* ---------- Tablet / Handy ---------- */
@media (max-width: 1100px) {
  .px-side, .px-print, .px-brief, .px-note--c, .px-call, .px-tile--a, .px-tile--d, .px-rail { display: none; }
  .px-mob, .px-win--shop, .px-ds, .px-phone--side, .px-pill, .px-poster, .px-proof, .px-flyer, .px-cshot--b { display: none; }
  .pd-chain__list { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 32px; }
  .pd-work__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .px-stage { --ch: min(46svh, 420px); }
  .px-cap { bottom: 4vh; right: var(--gutter); }
  .px-hero .display { font-size: 56px; }
  .px-hero__sub { font-size: 16px; }
  .px-note--a, .px-note--b, .px-dim--h { display: none; }
  .px-tile, .px-cshot, .px-flav { display: none; }
  .px-cdot { left: 64%; top: 60%; width: 28vw; }
  .px-win--main { width: 92vw; }
  .px-timeline { left: 4vw; right: 4vw; width: auto; margin-left: 0; bottom: 18cqh; }
  .px-w--print .px-spread { --sw: 92vw; }
  .px-phone { height: min(68%, 560px); }
  .px-mosaic figure { display: none; }
  .pd-nop { grid-template-columns: 1fr; }
  .pd-chain__list, .pd-process__list { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .px-vf__rec i, .px-vid__sweep, .px-vid__led, .px-playhead--run, .px-ring > *, .px-scroll, .px-cursor, .px-marquee span, .px-reel2 > img, .px-heart,
  .px-pill, .px-push, .px-map2 path, .px-vf__focus, .px-vf__meters i, .px-reel2__bar::after { animation: none; }
}

/* ---------- 02 Produkt: grüner Glow hinter der Dose ---------- */
.px-glow { position: absolute; left: 50%; top: 50%; width: calc(var(--ch) * 1.25); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgb(183 216 26 / 0.2) 0%, rgb(183 216 26 / 0.07) 40%, transparent 70%);
  opacity: var(--v); transform: translate(-50%, -50%) scale(calc(0.55 + var(--v) * 0.45)); }

/* ---------- Hover auf Bildern: leicht größer, Bildinfo blendet ein ---------- */
.px-w figure[data-meta] img, .px-w figure[data-meta-lime] img { transition: scale 0.7s var(--ease), opacity 0.8s var(--ease), transform 1.2s var(--ease); }
.px-w figure[data-meta]:not(.px-photo, .px-poster, .px-flyer, .px-proof):hover img, .px-w figure[data-meta-lime]:hover img { scale: 1.07; }
.px-w figure[data-meta]::after, .px-w figure[data-meta-lime]::after {
  position: absolute; z-index: 3; left: 10px; bottom: 10px; max-width: calc(100% - 20px); padding: 6px 10px; border-radius: 14px;
  background: rgb(11 11 12 / 0.72); backdrop-filter: blur(8px); color: var(--bone); font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.3;
  opacity: 0; translate: 0 8px; transition: opacity 0.35s var(--ease), translate 0.35s var(--ease); pointer-events: none; }
.px-w figure[data-meta]::after { content: attr(data-meta); }
.px-w figure[data-meta-lime]::after { content: attr(data-meta-lime); }
.px-w figure[data-meta]:hover::after, .px-w figure[data-meta-lime]:hover::after { opacity: 1; translate: 0 0; }
.px-mosaic figure:hover figcaption { opacity: 0; }
.px-mosaic figcaption { transition: opacity 0.3s; }

/* =====================================================================
   04 → 05: Kampagnen-Kreis wächst zur Vollfläche, Pop-Loop mit Videorahmen
   --po = Deckkraft, --ps = Auftritt in 04, --pg = Wachstum (0 → 1), --ro = Textring
   ===================================================================== */
.px-stage { container-type: size; }
.px-pop { position: absolute; z-index: 2; left: 49.5%; top: 36%; width: min(52cqh, 34vw); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: var(--popc, #d98a85); transition: background-color 0.8s var(--ease);
  opacity: var(--po, 0); transform: translate(-50%, -50%) scale(calc(var(--ps, 0) * (1 + var(--pg, 0) * 3.6))); }
.px-ring { position: absolute; z-index: 3; left: 49.5%; top: 36%; width: min(66cqh, 43vw); aspect-ratio: 1; pointer-events: none; overflow: visible;
  opacity: var(--ro, 0); transform: translate(-50%, -50%) scale(calc(1 + var(--pg, 0) * 0.6)); }
.px-ring g { transform-origin: 100px 100px; animation: px-spin 40s linear infinite; }
.px-ring__t { font-family: var(--mono); font-size: 6.2px; letter-spacing: 0.2em; fill: #fff; }
@keyframes px-spin { to { transform: rotate(360deg); } }

/* 04: Motive in runden Ausschnitten mit Lime-Rand */
.px-circ { position: absolute; z-index: 2; margin: 0; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 5px solid var(--lumen);
  transform: scale(var(--v)); translate: var(--tx, 0px) var(--ty, 0px); will-change: translate; }
.px-circ img { width: 100%; height: 100%; object-fit: cover; scale: 1.18; translate: var(--ix, 0px) var(--iy, 0px); }
.px-circ--a { left: 4.5%; top: 8%; width: min(46cqh, 19vw); }
.px-circ--b { left: 16.5%; top: 52%; width: min(38cqh, 15.5vw); }
.px-circ--c { left: 66%; top: 55%; width: min(30cqh, 12.5vw); border-color: #d98a85; }
.px-circ[data-meta]::after { left: 50% !important; bottom: 14% !important; transform: translateX(-50%); white-space: nowrap; }
.px-flav { position: absolute; z-index: 2; left: 68%; top: 14%; color: #fff; opacity: var(--v); transform: translateX(calc((1 - var(--v)) * 40px)); }
.px-flav .label { margin: 0 0 12px; color: #fff; }
.px-flav__name { margin: 0; font-family: var(--serif); font-size: clamp(44px, 4.8vw, 74px); line-height: 0.92; }
.px-flav__name em { font-size: 0.8333em; }
.px-w--campaign::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, transparent 72%, rgb(0 0 0 / 0.35)); }

/* 05: Videorahmen über der Szene (liegt über der 3D-Dose), außen leicht abgedunkelt */
.px-w--video { z-index: 6; pointer-events: none; }
.px-vframe { position: absolute; left: 50%; top: 46%; height: 64cqh; width: min(113.8cqh, 66vw); border-radius: 22px; transition: width 0.9s var(--ease), height 0.9s var(--ease);
  border: 1.5px solid rgb(255 255 255 / 0.95); box-shadow: 0 0 0 100vmax rgb(11 11 12 / 0.16);
  opacity: var(--v); transform: translate(-50%, -50%) scale(calc(1.08 - var(--v) * 0.08)); }
.px-vframe p { margin: 0; }
.px-vframe__top { position: absolute; left: 22px; right: 22px; top: 18px; display: flex; justify-content: space-between; color: #fff !important; font-size: 10px; }
.px-vframe__top > span:first-child { display: flex; align-items: center; gap: 8px; }
.px-vframe__top i { width: 8px; height: 8px; border-radius: 50%; background: #e2453a; animation: px-rec 1.2s steps(1) infinite; }
.px-vframe__bot { position: absolute; left: 22px; right: 22px; bottom: 18px; display: flex; align-items: center; gap: 14px; color: #fff; }
.px-vframe__bot b { font-size: 12px; font-weight: 400; }
.px-vframe__bot .label { color: #fff; font-size: 10px; }
.px-vframe__bar { position: relative; flex: 1; height: 3px; border-radius: 2px; background: rgb(255 255 255 / 0.35); overflow: hidden; }
.px-vframe__bar i { position: absolute; inset: 0; background: #fff; transform-origin: left; animation: px-progress 6s linear infinite; }
.px-w--video .px-cap .label, .px-w--video .px-cap h2 { color: var(--ink); }
.px[data-station="4"] .px-rail li { color: rgb(11 11 12 / 0.5); }
.px[data-station="4"] .px-rail ol { border-left-color: rgb(11 11 12 / 0.25); }
.px[data-station="4"] .px-rail { filter: none; }
@media (prefers-reduced-motion: reduce) { .px-ring g, .px-vframe__top i, .px-vframe__bar i { animation: none; } }
@media (max-width: 860px) { .px-circ { display: none; } .px-vframe { height: auto; width: 92vw; max-width: none; } }

/* ---------- 05 Produktfilm: kinetische Typo, runde Formen, Formatwechsel 16:9 / 1:1 / 9:16 ---------- */
.px-stage[data-fmt="11"] .px-vframe { width: 64cqh; height: 64cqh; }
.px-stage[data-fmt="916"] .px-vframe { width: 39.4cqh; height: 70cqh; }
.px-stage[data-fbg="cobalt"] .px-w--video .px-cap .label, .px-stage[data-fbg="cobalt"] .px-w--video .px-cap h2 { color: var(--bone); }
.px-stage[data-fbg="cobalt"] .px-rail li { color: rgb(242 239 233 / 0.55); }
.px-film { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: var(--vt, 0); container-type: size; --cx: 0; --cy: 0; --ink2: #2a1414; }
.px-film [data-b] { opacity: 0; transition: opacity 0.35s var(--ease); }
.px-film[data-beat="f1"] [data-b="f1"], .px-film[data-beat="f2"] [data-b="f2"], .px-film[data-beat="f4"] [data-b="f4"],
.px-film[data-beat="f5"] [data-b="f5"], .px-film[data-beat="f6"] [data-b="f6"] { opacity: 1; }
/* runde Formen, die mit der Dose wandern */
.pf-at { position: absolute; left: calc(50% + var(--cx) * var(--ch)); top: calc(50% + var(--cy) * var(--ch)); border-radius: 50%;
  transform: translate(-50%, -50%) scale(var(--sc, 0)); transition: left 1s var(--ease), top 1s var(--ease), transform 0.8s cubic-bezier(0.34, 1.4, 0.5, 1), background-color 0.6s; }
.pf-disc { width: calc(var(--ch) * 0.62); aspect-ratio: 1; background: #c9b8e0; } /* Soft Lilac: lässt das Lime ruhig wirken */
.px-film[data-beat="f1"] .pf-disc { --sc: 1; }
.px-film[data-beat="f6"] .pf-disc { --sc: 1.55; background: #d99aa2; }
.pf-ring { width: calc(var(--ch) * 0.82); aspect-ratio: 1; border: 2px solid #b9d3e8; }
.px-film[data-beat="f5"] .pf-ring { --sc: 1; }
.px-film[data-beat="f1"] .pf-ring { --sc: 1.32; border-color: rgb(244 235 221 / 0.7); }
.pf-ring b { position: absolute; left: 50%; top: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: #f4ebdd;
  transform-origin: 9px calc(var(--ch) * 0.41 + 9px); animation: pf-orbit 7s linear infinite; }
.pf-ring b + b { width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; background: #d99aa2; transform-origin: 5.5px calc(var(--ch) * 0.41 + 5.5px); animation-duration: 4.6s; animation-direction: reverse; }
@keyframes pf-orbit { to { transform: rotate(360deg); } }
.pf-half { position: absolute; left: 50%; top: calc(46% + 35cqh); width: 30cqh; aspect-ratio: 1; border-radius: 50%; background: #b9d3e8;
  clip-path: inset(0 0 50% 0); transform: translate(-50%, -50%) scale(0); transition: transform 0.8s cubic-bezier(0.34, 1.3, 0.5, 1); }
.px-film[data-beat="f4"] .pf-half { transform: translate(-50%, -50%) scale(1); }
/* Farbwechsel als Kreis aus der Dose */
.pf-wipe { position: absolute; left: calc(50% + var(--cx) * var(--ch)); top: calc(50% + var(--cy) * var(--ch)); width: 20px; aspect-ratio: 1; border-radius: 50%;
  background: var(--wc, #1f4fbf); transform: translate(-50%, -50%) scale(var(--ws, 0)); }
.pf-wipe.is-go { transition: transform 0.95s cubic-bezier(0.65, 0, 0.35, 1); }
/* Wortstapel: die mittlere Zeile ganz, darüber/darunter angeschnittene Kopien (gebaut von ai-production.js) */
.ks { position: absolute; top: 46%; font-family: "Bricolage Grotesque", var(--sans); font-weight: 800; text-transform: uppercase; letter-spacing: -0.035em; color: #f4ebdd; --st: 0; }
.ks[data-b="f1"] { left: 41%; font-size: 13.5cqh; }
.ks[data-b="f5"] { left: 50%; font-size: 12cqh; color: #fff; }
.ks__r { position: absolute; left: 0; top: 0; height: calc(var(--h) * 1em); overflow: hidden; white-space: nowrap; opacity: 0;
  transform: translate(-50%, calc(-50% + var(--y) * 1em * var(--st))) scaleY(calc(0.6 + var(--st) * 0.4));
  transition: transform 0.95s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--k) * 70ms), opacity 0.4s calc(var(--k) * 70ms); }
.ks__r span { display: block; line-height: 0.8; margin-top: calc(var(--m) * 1em); }
.ks.is-in { --st: 1; } .ks.is-in .ks__r { opacity: 1; }
.ks.is-out { --st: 0; } .ks.is-out .ks__r { opacity: 0; transition-duration: 0.45s, 0.3s; transition-delay: 0s, 0.1s; }
/* Every format: Wörter setzen sich in jedes Format neu */
.pf-w { position: absolute; margin: 0; overflow: hidden; font-family: "Bricolage Grotesque", var(--sans); font-weight: 800; text-transform: uppercase; letter-spacing: -0.035em;
  line-height: 0.82; color: #f4ebdd; white-space: nowrap; transition: left 0.7s var(--ease), top 0.7s var(--ease), font-size 0.7s var(--ease), translate 0.7s var(--ease); }
.pf-w span { display: block; transform: translateY(110%); transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.pf-w--2 span { transition-delay: 0.12s; }
.px-film[data-beat="f2"] .pf-w span { transform: none; }
.pf-w--1 { left: calc(50% - 7cqh); top: 46%; translate: -100% -50%; font-size: 11cqh; }
.pf-w--2 { left: calc(50% + 7cqh); top: 46%; translate: 0 -50%; font-size: 11cqh; }
.px-stage[data-fmt="11"] .pf-w--1 { left: 50%; top: calc(46% - 19cqh); translate: -50% -50%; font-size: 9.5cqh; }
.px-stage[data-fmt="11"] .pf-w--2 { left: 50%; top: calc(46% + 19cqh); translate: -50% -50%; font-size: 9.5cqh; }
.px-stage[data-fmt="916"] .pf-w--1 { left: 50%; top: calc(46% - 22cqh); translate: -50% -50%; font-size: 6.4cqh; }
.px-stage[data-fmt="916"] .pf-w--2 { left: 50%; top: calc(46% + 20cqh); translate: -50% -50%; font-size: 6.4cqh; }
.pf-badges { position: absolute; left: 50%; top: calc(46% + 38cqh); margin: 0; display: flex; gap: 10px; translate: -50% 0; }
.pf-badges b { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid #f4ebdd; color: #f4ebdd; font-family: var(--mono); font-size: 10px; font-weight: 400;
  transition: background-color 0.3s, color 0.3s, scale 0.4s cubic-bezier(0.34, 1.5, 0.5, 1); }
.px-stage[data-fmt="169"] .pf-badges b[data-f="169"], .px-stage[data-fmt="11"] .pf-badges b[data-f="11"], .px-stage[data-fmt="916"] .pf-badges b[data-f="916"] { background: #f4ebdd; color: var(--ink2); scale: 1.12; }
/* Every flavour: Wort-Treppe, die endlos nach oben läuft */
.pf-stairs { position: absolute; left: 50%; top: 46%; width: 39.4cqh; height: 70cqh; translate: -50% -50%; overflow: hidden; border-radius: 22px; }
.pf-stairs__col { position: absolute; left: -45%; right: -45%; top: -6%; transform: perspective(900px) rotateX(32deg) rotateZ(-9deg); transform-origin: 50% 30%; }
.pf-stairs__inner { animation: pf-climb 9s linear infinite; }
@keyframes pf-climb { to { transform: translateY(-50%); } }
.pf-stairs p, .sf-stairs p { margin: 0; text-align: center; font-family: "Bricolage Grotesque", var(--sans); font-weight: 800; text-transform: uppercase; letter-spacing: -0.035em; font-size: 9cqh; line-height: 0.82; white-space: nowrap; color: #fff; }
.pf-stairs p.is-tread, .sf-stairs p.is-tread { color: #b9d3e8; transform: scaleY(0.42) skewX(-26deg); margin: -0.2em 0 -0.18em; }
.pf-stairs p { font-size: 11cqh; } /* Wörter füllen das 9:16-Display komplett */
/* Endcard: Claim kreist um die pinke Bühne */
.pf-claim { position: absolute; left: calc(50% + var(--cx) * var(--ch)); top: calc(50% + var(--cy) * var(--ch)); width: calc(var(--ch) * 1.32); overflow: visible;
  transform: translate(-50%, -50%) scale(calc(0.85 + var(--on, 0) * 0.15)); transition: left 1s var(--ease), top 1s var(--ease), opacity 0.4s, transform 0.8s var(--ease); }
.px-film[data-beat="f6"] .pf-claim { --on: 1; }
.pf-claim g { transform-origin: 100px 100px; animation: px-spin 30s linear infinite; }
.pf-claim text { font-family: var(--mono); font-size: 6.4px; letter-spacing: 0.2em; fill: #fff; }
@media (prefers-reduced-motion: reduce) { .ks__r, .pf-w, .pf-w span, .pf-at, .pf-wipe { transition: none !important; } .pf-ring b, .pf-stairs__inner, .pf-claim g { animation: none; } .px-vframe { transition: none; } }

/* ---------- Eigener Mauszeiger in der Experience: Lime-Button mit Fortschrittsring, Klick = nächste Station ---------- */
.px-stage.has-cursor, .px-stage.has-cursor * { cursor: none; }
.px-pointer { position: fixed; left: 0; top: 0; z-index: 80; pointer-events: none; opacity: 0; transition: opacity 0.25s var(--ease); }
.px-pointer.is-on { opacity: 1; }
.px-pointer__btn { position: absolute; left: -29px; top: -29px; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle, var(--lumen) 0 23px, transparent 23.5px), conic-gradient(var(--lumen) var(--pr, 0deg), rgb(226 255 79 / 0.28) 0);
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.3); transition: transform 0.3s cubic-bezier(0.34, 1.5, 0.5, 1); }
.px-pointer__btn::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--lumen); }
.px-pointer svg { position: relative; z-index: 1; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.4s var(--ease); }
.px-pointer__tag { position: absolute; left: 38px; top: -12px; white-space: nowrap; padding: 6px 11px 7px; border-radius: 20px; background: var(--ink); color: var(--lumen);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; transition: opacity 0.25s var(--ease), translate 0.25s var(--ease); }
.px-pointer.is-down .px-pointer__btn { transform: scale(0.86); }
.px-pointer.is-busy .px-pointer__tag { opacity: 0; translate: -6px 0; }
.px-pointer.is-busy svg { animation: px-pointer-nudge 0.7s ease-in-out infinite; }
@keyframes px-pointer-nudge { 50% { transform: translateY(3px); } }
.px-pointer.is-native .px-pointer__btn { transform: scale(0.24); }
.px-pointer.is-native .px-pointer__tag, .px-pointer.is-native svg { opacity: 0; }
@media (hover: none) { .px-pointer { display: none; } }
@media (prefers-reduced-motion: reduce) { .px-pointer svg { animation: none !important; } }

/* ---------- 06 Social: dunkles Kobalt (aus der DQ-Energy-Palette abgedunkelt), ruhiger Hintergrund ---------- */
.px-w--social { background: #0f1f4f; }
.px-w--social .px-phone--side { box-shadow: 0 30px 60px rgb(0 0 0 / 0.45); }

/* ---------- 06 Social: Story als Mini-Film (Hochkant), Dose mittig ---------- */
.px-sfilm { position: relative; width: 100%; height: 100%; border-radius: 42px; overflow: hidden; background: var(--sbg, #d99aa2); transition: background-color 0.4s; container-type: size; --cx: 0; --cy: 0; }
.px-sfilm [data-sb] { opacity: 0; transition: opacity 0.35s var(--ease); }
.px-sfilm[data-beat="s1"] [data-sb="s1"], .px-sfilm[data-beat="s2"] [data-sb="s2"], .px-sfilm[data-beat="s3"] [data-sb="s3"], .px-sfilm[data-beat="s4"] [data-sb="s4"] { opacity: 1; }
.sf-disc, .sf-ring, .sf-wipe { position: absolute; left: 50%; top: 50%; border-radius: 50%; }
.sf-disc { width: 62cqw; aspect-ratio: 1; background: #c9b8e0; transform: translate(-50%, -50%) scale(0); transition: transform 0.8s cubic-bezier(0.34, 1.4, 0.5, 1); }
.px-sfilm[data-beat="s1"] .sf-disc { transform: translate(-50%, -50%) scale(1); }
.sf-ring { width: 84cqw; aspect-ratio: 1; border: 2px solid #b9d3e8; transform: translate(-50%, -50%) scale(0); transition: transform 0.8s cubic-bezier(0.34, 1.4, 0.5, 1); }
.px-sfilm[data-beat="s2"] .sf-ring, .px-sfilm[data-beat="s4"] .sf-ring { transform: translate(-50%, -50%) scale(1); }
.sf-ring b { position: absolute; left: 50%; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #f4ebdd; transform-origin: 7px calc(42cqw + 7px); animation: pf-orbit 6s linear infinite; }
.sf-ring b + b { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; background: #d99aa2; transform-origin: 4.5px calc(42cqw + 4.5px); animation-duration: 4s; animation-direction: reverse; }
.sf-half { position: absolute; left: 50%; bottom: 0; width: 80cqw; aspect-ratio: 1; border-radius: 50%; background: #b9d3e8; clip-path: inset(0 0 50% 0); transform: translate(-50%, 50%) scale(0); transition: transform 0.8s cubic-bezier(0.34, 1.3, 0.5, 1); }
.px-sfilm[data-beat="s4"] .sf-half { transform: translate(-50%, 50%) scale(1); }
.sf-wipe { width: 20px; aspect-ratio: 1; background: var(--wc, #1f4fbf); transform: translate(-50%, -50%) scale(var(--ws, 0)); }
.sf-wipe.is-go { transition: transform 0.85s cubic-bezier(0.65, 0, 0.35, 1); }
.sf-ks { left: 50% !important; top: 22% !important; font-size: 14cqw !important; color: #f4ebdd; }
.px-sfilm[data-bg="cobalt"] .sf-ks { color: #fff; }
.sf-stairs { position: absolute; inset: 0; overflow: hidden; }
.sf-stairs .pf-stairs__col { left: -25%; right: -25%; }
.sf-stairs p { font-size: 14cqw !important; }
/* Story-Balken füllen sich Takt für Takt */
.px-story__bars i { position: relative; overflow: hidden; background: rgb(255 255 255 / 0.4) !important; }
.px-story__bars i::after { content: ""; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; }
.px-phone--story[data-seg="1"] .px-story__bars i:nth-child(1)::after, .px-phone--story[data-seg="2"] .px-story__bars i:nth-child(2)::after,
.px-phone--story[data-seg="3"] .px-story__bars i:nth-child(3)::after, .px-phone--story[data-seg="4"] .px-story__bars i:nth-child(4)::after { animation: sf-bar 2.4s linear forwards; }
.px-phone--story[data-seg="2"] .px-story__bars i:nth-child(-n+1)::after, .px-phone--story[data-seg="3"] .px-story__bars i:nth-child(-n+2)::after,
.px-phone--story[data-seg="4"] .px-story__bars i:nth-child(-n+3)::after { transform: none; }
@keyframes sf-bar { to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .sf-ring b, .px-story__bars i::after { animation: none !important; } }

/* ---------- 06 Social: vier Handys (zwei links, Story mittig, Reel rechts) + mausreaktive Hintergrundkreise ---------- */
.px-w--social .px-phone--ad { left: calc(50% - 40.3vw); transform: translate(-50%, 0) translateY(calc((1 - var(--v)) * 70px)); }
.px-w--social .px-phone--ad > img { width: 100%; height: 100%; object-fit: cover; border-radius: 32px; }
.px-w--social .px-phone--profile { left: calc(50% - 22vw); }
.px-w--social .px-phone--reel { left: calc(50% + 22.2vw); }
.px-sbg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.px-sbg i { position: absolute; border-radius: 50%; translate: var(--tx, 0px) var(--ty, 0px); transform: scale(var(--v)); }
.px-sbg__a { left: 78%; top: 27%; width: 107cqh; aspect-ratio: 1; margin: -53.5cqh 0 0 -53.5cqh; background: #172b6e; } /* Ton in Ton: Kobalt, etwas heller als der Grund */
.px-sbg__b { left: 47%; top: 98%; width: 77cqh; aspect-ratio: 1; margin: -38.5cqh 0 0 -38.5cqh; border: 2px solid #d99aa2; }
.px-sbg__c { left: 3%; top: 2%; width: 78cqh; aspect-ratio: 1; margin: -39cqh 0 0 -39cqh; border: 16px solid #f3d98b; }
@media (max-width: 1100px) { .px-sbg { display: none; } }

/* ---------- Instagram: Profilbild = Energy-Logo (weiß auf Lime, wie auf der Dose) ---------- */
.px-ig__head i, .px-story__who i { position: relative; }
.px-story__who i { position: absolute; background: #b7d81a; }
.px-ig__head i::after, .px-story__who i::after { content: ""; position: absolute; inset: 0; background: #fff;
  -webkit-mask: url("../img/production/energy-mark.png") 54% 52% / 56% no-repeat; mask: url("../img/production/energy-mark.png") 54% 52% / 56% no-repeat; }
.px-ig__head i::after { inset: 10%; }

/* Story Takt 3: drei transparente NEW-Zeilen; Mitte fährt nach links, oben und unten gegenläufig nach rechts */
.sf-new { position: absolute; inset: 0; pointer-events: none; }
.sf-new__r { position: absolute; left: 0; margin: 0; translate: 0 -50%; white-space: nowrap;
  font-family: "Bricolage Grotesque", var(--sans); font-weight: 800; text-transform: uppercase; letter-spacing: -0.04em; line-height: 0.8; font-size: 36cqh; color: rgb(255 255 255 / 0.2); }
.sf-new__r:nth-child(1) { top: 16%; } .sf-new__r:nth-child(2) { top: 50%; font-size: 42cqh; } .sf-new__r:nth-child(3) { top: 84%; }
.sf-new__r span { display: block; transform: translateX(100cqw); }
.sf-new__r--rev span { transform: translateX(-100%); }
.px-sfilm[data-beat="s3"] .sf-new__r span { animation: sf-new 2.8s cubic-bezier(0.45, 0.05, 0.4, 0.95) forwards; }
.px-sfilm[data-beat="s3"] .sf-new__r--rev span { animation-name: sf-new-rev; }
@keyframes sf-new { from { transform: translateX(100cqw); } to { transform: translateX(-100%); } }
@keyframes sf-new-rev { from { transform: translateX(-100%); } to { transform: translateX(100cqw); } }
@media (prefers-reduced-motion: reduce) { .px-sfilm[data-beat="s3"] .sf-new__r span { animation: none; transform: translateX(-20%); } }

/* Social: Anzeige links mit Werbetext (Typo wie im Produktfilm) */
.px-phone--ad { container-type: inline-size; }
.px-ad { position: absolute; inset: 9px; border-radius: 32px; overflow: hidden; padding: 16cqw 8cqw 8cqw; display: flex; flex-direction: column; color: #fff; }
.px-ad p { margin: 0; }
.px-ad__kick { font-family: var(--mono); font-size: 3.4cqw; letter-spacing: 0.16em; text-transform: uppercase; }
.px-ad__h { margin-top: 3cqw !important; font-family: "Bricolage Grotesque", var(--sans); font-weight: 800; text-transform: uppercase; letter-spacing: -0.04em; line-height: 0.84; font-size: 17cqw; }
.px-ad__sub { margin-top: 3cqw !important; font-family: "Fraunces", var(--serif); font-style: italic; font-size: 6cqw; line-height: 1.1; color: #2a1f4a; }
.px-ad__cta { margin-top: auto; align-self: center; padding: 2.6cqw 5.5cqw; border-radius: 6cqw; background: #fff; color: #2a1f4a; font-size: 4.2cqw; font-weight: 500; }

/* =====================================================================
   07 Website: echte Landingpage im Browserfenster (scrollt langsam von selbst), 3D-Dose rechts daneben
   ===================================================================== */
.px-w--web { background: #0f1f4f; }
.ws-bgc { position: absolute; left: 82%; top: 18%; width: 107cqh; aspect-ratio: 1; margin: -53.5cqh 0 0 -53.5cqh; border-radius: 50%; background: #172b6e; }
.ws { position: absolute; left: 50%; top: 47%; width: min(58vw, 940px); aspect-ratio: 1.6; translate: -50% -50%;
  border-radius: 12px; overflow: hidden; background: #f4ebdd; color: #1b1430; container-type: inline-size; box-shadow: 0 40px 80px rgb(0 0 0 / 0.45); opacity: var(--wso, 1); font-family: var(--sans); }
.ws p { margin: 0; }
.ws__bar { position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 26px; display: flex; align-items: center; gap: 6px; padding: 0 12px; background: #e6e2da; border-bottom: 1px solid #d6d1c7; }
.ws__bar i { width: 8px; height: 8px; border-radius: 50%; background: #c9c3b8; }
.ws__bar span { margin: 0 auto; padding: 2px 30px; border-radius: 10px; background: #f4ebdd; font-size: 10px; color: #6b665e; }
.ws__page { position: absolute; inset: 26px 0 0; overflow: hidden; }
.ws__nav { position: absolute; z-index: 2; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 2.6cqw; padding: 1.4cqw 3cqw; font-size: 1.25cqw; color: #fff;
  background: linear-gradient(180deg, rgb(15 31 79 / 0.45), transparent); } /* liegt transparent über dem Hero-Bild */
.ws__nav b { display: flex; align-items: center; gap: 0.8cqw; margin-right: auto; font-weight: 500; letter-spacing: 0.4em; text-transform: uppercase; }
.ws__mark { width: 2.4cqw; aspect-ratio: 1; border-radius: 50%; background: #b7d81a; position: relative; display: inline-block; flex: none; }
.ws__mark::after { content: ""; position: absolute; inset: 0; background: #fff; -webkit-mask: url("../img/production/energy-mark.png") 54% 52% / 56% no-repeat; mask: url("../img/production/energy-mark.png") 54% 52% / 56% no-repeat; }
.ws__nav em { font-style: normal; padding: 0.4cqw 1.2cqw; border-radius: 2cqw; background: #fff; color: #1b1430; }
.ws__scroll { } /* kein Auto-Scroll: die Dose gehört zur Headline im Hero */
@keyframes ws-scroll { 0%, 12% { transform: translateY(0); } 30%, 42% { transform: translateY(-50cqw); } 60%, 72% { transform: translateY(calc(-100% + 62.5cqw - 26px)); } 92%, 100% { transform: translateY(0); } } /* Hero → Sorten → Footer → zurück */
.ws-kick { font-family: var(--mono); font-size: 1.05cqw; letter-spacing: 0.16em; text-transform: uppercase; }
.ws-sec__h { font-family: "Bricolage Grotesque", var(--sans); font-weight: 800; text-transform: uppercase; letter-spacing: -0.035em; line-height: 0.88; font-size: 4.6cqw; }
.ws-sec__h em, .ws-hero__h em { font-family: "Fraunces", var(--serif); font-style: italic; font-weight: 500; text-transform: none; letter-spacing: -0.01em; }
/* Hero mit Foto */
.ws-hero { position: relative; height: calc(62.5cqw - 26px); overflow: hidden; color: #fff; } /* füllt das ganze Fenster unter der Adressleiste */
.ws-hero__imgs { position: absolute; inset: 0; margin: 0; }
.ws-hero__imgs img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; opacity: 0; animation: ws-hero 15s infinite; }
.ws-hero__imgs img:nth-child(2) { animation-delay: 5s; } .ws-hero__imgs img:nth-child(3) { animation-delay: 10s; }
@keyframes ws-hero { 0% { opacity: 0; transform: scale(1.06); } 6%, 33% { opacity: 1; } 40%, 100% { opacity: 0; transform: scale(1); } } /* Hero-Slider: langsames Überblenden mit leichtem Zoom */
.ws-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(15 31 79 / 0.5), transparent 50%); }
.ws-hero__copy { position: absolute; z-index: 1; left: 5cqw; top: 50%; translate: 0 -46%; }
.ws-hero__h { margin-top: 1.4cqw !important; font-family: "Bricolage Grotesque", var(--sans); font-weight: 800; text-transform: uppercase; letter-spacing: -0.04em; line-height: 0.86; font-size: 8cqw; }
.ws-hero__h em { font-size: 0.86em; }
.ws-hero__p { margin-top: 1.8cqw !important; font-size: 1.5cqw; opacity: 0.9; }
.ws-btns { margin-top: 2.4cqw !important; display: flex; gap: 1cqw; }
.ws-btn { padding: 1cqw 2.2cqw; border-radius: 3cqw; font-size: 1.3cqw; font-weight: 500; }
.ws-btn--lime { background: #e2ff4f; color: #1b1430; }
.ws-btn--ghost { border: 1px solid #fff; color: #fff; }
/* Benefits in Kreisen */
.ws-usp { display: flex; justify-content: center; gap: 3cqw; padding: 4cqw 0; background: #c9b8e0; }
.ws-usp p { width: 13cqw; aspect-ratio: 1; border-radius: 50%; background: #f4ebdd; display: grid; place-content: center; text-align: center; font-size: 1.2cqw; }
.ws-usp b { display: block; font-family: "Bricolage Grotesque", var(--sans); font-weight: 800; font-size: 3cqw; letter-spacing: -0.03em; }
/* Sorten */
.ws-flav { padding: 6cqw 5cqw 5cqw; }
.ws-flav .ws-sec__h { margin-top: 1.2cqw; }
.ws-cards { margin-top: 3cqw; display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; }
.ws-card { margin: 0; border-radius: 1.6cqw; overflow: hidden; background: #fff; }
.ws-card img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; }
.ws-card figcaption { display: flex; align-items: center; gap: 1.4cqw; padding: 1.6cqw 2cqw; font-size: 1.4cqw; }
.ws-card b { font-weight: 500; margin-right: auto; }
.ws-card i { display: grid; place-items: center; width: 3cqw; aspect-ratio: 1; border-radius: 50%; font-style: normal; background: #1b1430; color: #e2ff4f; }
.ws-card--rose i { background: #d99aa2; color: #1b1430; }
/* Lifestyle */
.ws-life { padding: 0 5cqw 5cqw; }
.ws-grid { margin-top: 2cqw; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1cqw; }
.ws-grid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 1cqw; }
/* Footer */
.ws-foot { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2cqw; padding: 5cqw; background: #1b1430; color: #f4ebdd; }
.ws-foot .ws-sec__h { font-size: 4cqw; }
.ws-field { display: flex; align-items: center; gap: 1cqw; padding: 0.6cqw 0.6cqw 0.6cqw 2cqw; border-radius: 3cqw; background: #f4ebdd; color: #8e8a84; font-size: 1.3cqw; }
.ws-field b { padding: 0.9cqw 2cqw; border-radius: 3cqw; background: #e2ff4f; color: #1b1430; font-weight: 500; }
.ws-foot__logo { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.8cqw; margin-top: 3cqw !important; font-size: 1.2cqw; letter-spacing: 0.4em; text-transform: uppercase; opacity: 0.8; }
@media (prefers-reduced-motion: reduce) { .ws__scroll, .ws-hero__imgs img { animation: none; } .ws-hero__imgs img:first-child { opacity: 1; } }

/* Morph: Story-Handy → Browser (Maße/Drehung setzt das Script) */
.px-morph { position: absolute; z-index: 4; left: var(--mx, 50%); top: var(--my, 50%); width: var(--mw, 300px); height: var(--mh, 600px); padding: var(--mpad, 12px);
  border-radius: var(--mrad, 52px); background: #151517; transform: translate(-50%, -50%) rotate(var(--mr, 0deg)); opacity: var(--mo, 0); visibility: hidden; pointer-events: none;
  box-shadow: 0 40px 80px rgb(0 0 0 / 0.45); }
.px-morph.is-on { visibility: visible; }
.px-morph__screen { position: absolute; inset: var(--mpad, 12px); border-radius: calc(var(--mrad, 52px) - var(--mpad, 12px) * 0.8); background: var(--mbg, #f4ebdd); }
.px-morph__notch { position: absolute; left: 50%; top: calc(var(--mpad, 12px) + 4px); width: 26%; height: 22px; translate: -50% 0; border-radius: 11px; background: #151517; opacity: var(--mn, 1); }
.px-phone--story.is-morphing { visibility: hidden; }
@media (max-width: 1100px) { .ws__bps { display: none; } }

/* Stationen-Index: aktiver Eintrag immer Lime (auch auf den farbigen Flächen von Video/Social) */
.px .px-rail li.is-on { color: var(--lumen) !important; }
.px .px-rail__bar { background: var(--lumen) !important; }

/* =====================================================================
   Handy (bis 860 px): eigene, normal scrollende Version (ai-production-m.js) statt der gesteuerten Bühne
   ===================================================================== */
.pm { display: none; }
@media (max-width: 860px) {
  .px { display: none; }
  .pm { display: block; --cobalt: #1f4fbf; --navy: #0f1f4f; --pink: #d99aa2; --lilac: #c9b8e0; --butter: #f3d98b; --cream: #f4ebdd; }
  .pm-h { margin: 14px 0 0; font-family: var(--serif); font-weight: 400; font-size: 44px; line-height: 0.95; letter-spacing: -0.02em; }
  .pm-h em { font-size: 0.8333em; }
  .pm-sec { position: relative; overflow: hidden; padding: 72px var(--gutter); }
  .pm-cap { position: relative; z-index: 2; }
  .pm-cap .label { font-size: 11px; }
  .pm-tags { margin: 12px 0 0; font-size: 10.5px; line-height: 1.7; color: rgb(242 239 233 / 0.75); }
  /* weich einblenden */
  .pm.has-reveal :is(.pm-fig, .pm-cap, .pm-circs, .pm-campaign__hero, .pm-film, .pm-webphone) { opacity: 0; translate: 0 24px; transition: opacity 0.9s var(--ease), translate 0.9s var(--ease); }
  .pm.has-reveal .is-in { opacity: 1 !important; translate: 0 0 !important; }

  /* ---------- 01–02: Dose gepinnt, dreht sich; Text wechselt von Idee zu Produkt ---------- */
  .pm-can { height: 230svh; position: relative; }
  .pm-can__pin { position: sticky; top: var(--nav-h); height: calc(100svh - var(--nav-h)); overflow: hidden; padding: 24px var(--gutter);
    background: linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 56px 56px, var(--ink); }
  .pm-can__slot { position: absolute; inset: 0; z-index: 1; }
  .pm-can__slot .px-can3d { opacity: 1; }
  .pm-can__glow { position: absolute; left: 50%; top: 50%; width: 120vw; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgb(183 216 26 / 0.22) 0%, rgb(183 216 26 / 0.06) 40%, transparent 68%); opacity: var(--k, 0); }
  .pm-can__idea, .pm-can__prod { position: absolute; left: var(--gutter); right: var(--gutter); z-index: 2; }
  .pm-can__idea { top: 24px; opacity: calc(1 - var(--p, 0) * 3.2); }
  .pm-can__idea .display { margin: 14px 0 14px; font-size: 52px; }
  .pm-can__idea .display em { font-size: 0.8333em; }
  .pm-can__sub { margin: 0; max-width: 300px; font-size: 15px; line-height: 1.5; color: #a39f98; }
  .pm-can__brief { position: absolute; z-index: 2; right: var(--gutter); bottom: 28px; max-width: 220px; margin: 0; text-align: right; font-family: var(--serif); font-style: italic; font-size: 20px; line-height: 1.15;
    color: rgb(242 239 233 / 0.85); opacity: calc(1 - var(--p, 0) * 3.2); }
  .pm-can__brief .label { display: block; margin-bottom: 6px; font-family: var(--mono); font-style: normal; font-size: 9.5px; color: var(--mute); }
  .pm-can__prod { bottom: 28px; opacity: calc((var(--p, 0) - 0.55) * 4); }
  .pm-can__calls { margin: 14px 0 0; font-size: 10px; line-height: 1.9; color: rgb(242 239 233 / 0.65); }

  /* ---------- 03 Bildwelten ---------- */
  .pm-imagery__grid { margin-top: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .pm-fig { position: relative; margin: 0; overflow: hidden; aspect-ratio: 4 / 5; background: var(--ink-3); }
  .pm-fig--wide { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
  .pm-fig img { width: 100%; height: 100%; object-fit: cover; animation: pm-kb 14s ease-in-out infinite alternate; }
  .pm-fig:nth-child(2n) img { animation-delay: -5s; }
  @keyframes pm-kb { to { scale: 1.08; } }
  .pm-fig figcaption { position: absolute; left: 8px; bottom: 8px; padding: 5px 9px; border-radius: 12px; background: rgb(11 11 12 / 0.7); font-size: 9px; }

  /* ---------- 04 Kampagne ---------- */
  .pm-campaign { padding-top: 0; }
  .pm-campaign__hero { position: relative; margin: 0 calc(-1 * var(--gutter)); aspect-ratio: 4 / 5; overflow: hidden; }
  .pm-campaign__hero img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; animation: pm-kb 16s ease-in-out infinite alternate; }
  .pm-ring { position: absolute; left: 50%; top: 44%; width: 92%; translate: -50% -50%; overflow: visible; pointer-events: none; }
  .pm-ring g, .pmf-claim g { transform-origin: 100px 100px; animation: px-spin 30s linear infinite; }
  .pm-ring text { font-family: var(--mono); font-size: 6.4px; letter-spacing: 0.2em; fill: #fff; }
  .pm-campaign__flav { position: absolute; left: var(--gutter); bottom: 64px; margin: 0; font-family: var(--serif); font-size: 46px; line-height: 0.9; color: #fff; text-shadow: 0 2px 20px rgb(0 0 0 / 0.25); }
  .pm-campaign__flav em { font-size: 0.8333em; }
  .pm-campaign__flav .label { display: block; margin-bottom: 8px; font-size: 10px; text-shadow: none; }
  .pm-circs { display: flex; justify-content: center; gap: 14px; margin: -38px 0 34px; position: relative; z-index: 2; }
  .pm-circs img { width: 26%; aspect-ratio: 1; border-radius: 50%; object-fit: cover; border: 2px solid var(--lumen); animation: pm-bob 4s ease-in-out infinite; }
  .pm-circs img:nth-child(2) { animation-delay: -1.3s; translate: 0 12px; } .pm-circs img:nth-child(3) { animation-delay: -2.6s; }
  @keyframes pm-bob { 50% { transform: translateY(-8px); } }

  /* ---------- 05 Hochkant-Film ---------- */
  .pm-video { background: var(--ink); }
  .pm-film { --bg: var(--pink); position: relative; margin: 28px auto 0; width: min(100%, 52svh * 9 / 16 + 40px); aspect-ratio: 9 / 16; overflow: hidden; border-radius: 22px;
    background: var(--bg); container-type: inline-size; transition: background-color 0.5s var(--ease); }
  .pm-film[data-beat="b3"] { --bg: var(--cobalt); }
  .pm-film[data-beat="b4"] { --bg: var(--butter); }
  .pm-film > * { position: absolute; }
  .pmf-hud { left: 18px; right: 18px; margin: 0; z-index: 6; display: flex; justify-content: space-between; align-items: center; color: #fff; font-size: 9.5px; }
  .pmf-hud--top { top: 16px; } .pmf-hud--top i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #e2453a; animation: pm-live 1.2s ease-in-out infinite; }
  @keyframes pm-live { 50% { opacity: 0.25; } }
  .pmf-hud--bot { bottom: 16px; }
  .pm-film[data-beat="b4"] .pmf-hud { color: var(--ink); } .pm-film[data-beat="b4"] .pmf-bar { background: rgb(11 11 12 / 0.2); } .pm-film[data-beat="b4"] .pmf-bar i { background: var(--ink); }
  .pmf-bar { flex: 1; height: 2px; background: rgb(255 255 255 / 0.35); overflow: hidden; }
  .pmf-bar i { display: block; height: 100%; width: 100%; background: #fff; transform-origin: 0 50%; animation: pm-bar 10.4s linear infinite; }
  @keyframes pm-bar { from { scale: 0 1; } }
  /* Dose (freigestellt aus der 3D-Dose), schwebt leicht */
  .pmf-can { left: 50%; top: 50%; width: 30cqw; translate: -50% -50%; z-index: 4; filter: drop-shadow(0 18px 24px rgb(0 0 0 / 0.25)); transition: opacity 0.4s var(--ease), translate 0.7s var(--ease), rotate 0.7s var(--ease), scale 0.6s cubic-bezier(0.34, 1.5, 0.5, 1); animation: pm-float 3s ease-in-out infinite; }
  @keyframes pm-float { 50% { transform: translateY(-3%) rotate(-2deg); } }
  .pmf-can--rose { opacity: 0; }
  .pm-film[data-beat="b3"] .pmf-can--lime { opacity: 0; } .pm-film[data-beat="b3"] .pmf-can--rose { opacity: 1; }
  .pm-film[data-beat="b1"] .pmf-can--lime { scale: 1.1; rotate: -8deg; }
  .pm-film[data-beat="b2"] .pmf-can--lime { scale: 0.78; }
  .pm-film[data-beat="b4"] .pmf-can { opacity: 1; scale: 0.82; }
  .pm-film[data-beat="b4"] .pmf-can--lime { translate: -86% -50%; rotate: -8deg; } .pm-film[data-beat="b4"] .pmf-can--rose { translate: -14% -50%; rotate: 8deg; }
  /* b1: Lila Scheibe + gestapelter Claim */
  .pmf-disc { left: 50%; top: 50%; width: 78cqw; aspect-ratio: 1; border-radius: 50%; background: var(--lilac); translate: -50% -50%; scale: 0; transition: scale 0.7s cubic-bezier(0.34, 1.4, 0.5, 1); }
  .pm-film[data-beat="b1"] .pmf-disc { scale: 1; }
  .pmf-txt { inset: 0; z-index: 3; display: grid; align-content: center; justify-items: center; pointer-events: none; }
  .pmf-txt p { margin: 0; font-family: "Bricolage Grotesque", var(--sans); font-weight: 800; text-transform: uppercase; letter-spacing: -0.04em; line-height: 0.86; white-space: nowrap; color: #fff; opacity: 0; }
  .pmf-txt--b1 p { font-size: 16.5cqw; translate: 0 30%; transition: opacity 0.4s var(--ease), translate 0.6s var(--ease); }
  .pmf-txt--b1 p:nth-child(odd) { color: transparent; -webkit-text-stroke: 1.5px #fff; }
  .pmf-txt--b1 p:nth-child(2) { transition-delay: 0.08s; } .pmf-txt--b1 p:nth-child(3) { transition-delay: 0.16s; }
  .pm-film[data-beat="b1"] .pmf-txt--b1 p { opacity: 1; translate: 0 0; }
  /* b2: Formatrahmen wechselt 16:9 → 1:1 → 9:16 */
  .pmf-fmt { inset: 0; z-index: 3; opacity: 0; transition: opacity 0.4s var(--ease); }
  .pm-film[data-beat="b2"] .pmf-fmt { opacity: 1; }
  .pmf-fmt__box { position: absolute; left: 50%; top: 50%; width: 86cqw; aspect-ratio: 16 / 9; translate: -50% -50%; border: 2px solid #fff; border-radius: 10px; transition: width 0.6s var(--ease), aspect-ratio 0.6s var(--ease); }
  .pm-film[data-fmt="11"] .pmf-fmt__box { width: 70cqw; aspect-ratio: 1; }
  .pm-film[data-fmt="916"] .pmf-fmt__box { width: 52cqw; aspect-ratio: 9 / 16; }
  .pmf-fmt__w { position: absolute; left: 0; right: 0; top: 9%; margin: 0; text-align: center; font-family: "Bricolage Grotesque", var(--sans); font-weight: 800; text-transform: uppercase; font-size: 15cqw; line-height: 0.85; letter-spacing: -0.04em; color: #fff; }
  .pmf-fmt__badges { position: absolute; left: 0; right: 0; bottom: 13%; margin: 0; display: flex; justify-content: center; gap: 8px; }
  .pmf-fmt__badges b { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--cream); color: var(--cream); font-family: var(--mono); font-size: 9px; font-weight: 400; transition: background-color 0.3s, color 0.3s, scale 0.3s; }
  .pm-film[data-fmt="169"] b[data-f="169"], .pm-film[data-fmt="11"] b[data-f="11"], .pm-film[data-fmt="916"] b[data-f="916"] { background: var(--cream); color: var(--ink); scale: 1.12; }
  /* b3: Kobalt-Wipe + Wort-Treppe */
  .pmf-wipe { left: 50%; top: 50%; width: 240cqw; aspect-ratio: 1; border-radius: 50%; background: var(--cobalt); translate: -50% -50%; scale: 0; transition: scale 0.7s var(--ease); }
  .pm-film[data-beat="b3"] .pmf-wipe { scale: 1; }
  .pmf-stairs { inset: -10%; z-index: 2; overflow: hidden; opacity: 0; transition: opacity 0.4s var(--ease); }
  .pm-film[data-beat="b3"] .pmf-stairs { opacity: 1; }
  .pmf-stairs > div { transform: rotate(-9deg); animation: pm-climb 7s linear infinite; }
  @keyframes pm-climb { to { translate: 0 -50%; } }
  .pmf-stairs p { margin: 0; text-align: center; font-family: "Bricolage Grotesque", var(--sans); font-weight: 800; text-transform: uppercase; letter-spacing: -0.035em; font-size: 23cqw; line-height: 0.82; white-space: nowrap; color: #fff; }
  .pmf-stairs p.is-tread { color: var(--lilac); transform: scaleY(0.42) skewX(-26deg); margin: -0.2em 0 -0.18em; }
  /* b4: Endcard — zwei Dosen, Claim kreist */
  .pmf-txt--b4 { align-content: start; padding-top: 16%; }
  .pmf-txt--b4 p { font-size: 13cqw; color: var(--ink); transition: opacity 0.4s var(--ease); }
  .pm-film[data-beat="b4"] .pmf-txt--b4 p { opacity: 1; }
  .pmf-claim { left: 50%; top: 54%; width: 92cqw; translate: -50% -50%; z-index: 3; overflow: visible; opacity: 0; transition: opacity 0.4s var(--ease); }
  .pmf-claim text { font-family: var(--mono); font-size: 6.4px; letter-spacing: 0.2em; fill: var(--ink); }
  .pm-film[data-beat="b4"] .pmf-claim { opacity: 1; }

  /* ---------- 06 Social: Wisch-Galerie ---------- */
  .pm-social, .pm-web { background: var(--navy); }
  .pm-bgc { position: absolute; border-radius: 50%; pointer-events: none; }
  .pm-bgc--a { right: -30vw; top: -10vw; width: 80vw; aspect-ratio: 1; background: rgb(255 255 255 / 0.05); }
  .pm-bgc--b { left: -24vw; bottom: 8%; width: 60vw; aspect-ratio: 1; border: 14px solid var(--butter); opacity: 0.85; }
  .pm-bgc--c { right: -20vw; bottom: 6%; width: 70vw; aspect-ratio: 1; border: 1.5px solid var(--pink); }
  .pm-phones { position: relative; z-index: 2; margin: 32px calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter) 6px; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .pm-phones::-webkit-scrollbar { display: none; }
  .pm-phone { position: relative; flex: none; width: 64vw; aspect-ratio: 9 / 19; overflow: hidden; border-radius: 30px; border: 6px solid #0b0b0c; background: #0b0b0c; scroll-snap-align: center; box-shadow: 0 30px 60px rgb(0 0 0 / 0.35); }
  .pm-phone > img { width: 100%; height: 100%; object-fit: cover; }
  .pm-swipe { position: relative; z-index: 2; margin: 18px 0 0; font-size: 10px; color: rgb(242 239 233 / 0.6); text-align: right; animation: pm-nudge 2.4s ease-in-out infinite; }
  @keyframes pm-nudge { 50% { translate: -6px 0; } }
  /* Story */
  .pm-story { position: absolute; inset: 0; background: var(--pink); }
  .pm-story__bars { position: absolute; left: 10px; right: 10px; top: 12px; margin: 0; display: flex; gap: 4px; }
  .pm-story__bars i { flex: 1; height: 2px; background: rgb(255 255 255 / 0.4); overflow: hidden; }
  .pm-story__bars i::after { content: ""; display: block; height: 100%; background: #fff; transform-origin: 0 50%; scale: 0 1; animation: pm-story 8s linear infinite; }
  .pm-story__bars i:nth-child(2)::after { animation-delay: 2s; } .pm-story__bars i:nth-child(3)::after { animation-delay: 4s; } .pm-story__bars i:nth-child(4)::after { animation-delay: 6s; }
  @keyframes pm-story { 0% { scale: 0 1; } 25%, 100% { scale: 1 1; } }
  .pm-story__who { position: absolute; left: 12px; top: 24px; margin: 0; display: flex; align-items: center; gap: 6px; font-size: 10px; color: #fff; }
  .pm-story__who i { width: 22px; height: 22px; border-radius: 50%; background: var(--lumen) url(../img/production/energy-mark.png) center / 62% no-repeat; }
  .pm-story__new { position: absolute; inset: 0; margin: 0; display: grid; align-content: center; justify-items: center; }
  .pm-story__new span { font-family: "Bricolage Grotesque", var(--sans); font-weight: 800; font-size: 26vw; line-height: 0.85; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1.5px #fff; animation: pm-new 3s linear infinite; }
  .pm-story__new span:nth-child(2) { animation-direction: reverse; color: #fff; -webkit-text-stroke: 0; }
  @keyframes pm-new { from { translate: -20% 0; } to { translate: 20% 0; } }
  .pm-story__can { position: absolute; left: 50%; top: 50%; width: 32%; translate: -50% -50%; rotate: -14deg; filter: drop-shadow(0 16px 20px rgb(0 0 0 / 0.25)); animation: pm-float 3s ease-in-out infinite; }
  .pm-story__cta { position: absolute; left: 50%; bottom: 16px; translate: -50% 0; padding: 7px 14px; border-radius: 16px; background: #fff; color: var(--ink); font-size: 11px; font-weight: 500; white-space: nowrap; }
  /* Anzeige */
  .pm-ad { position: absolute; inset: 0; display: grid; align-content: space-between; padding: 18px 14px; background: linear-gradient(180deg, rgb(0 0 0 / 0.3), transparent 30%, transparent 60%, rgb(0 0 0 / 0.45)); color: #fff; }
  .pm-ad__kick { margin: 0; font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; }
  .pm-ad__h { margin: 0; font-family: "Bricolage Grotesque", var(--sans); font-weight: 800; font-size: 13vw; line-height: 0.86; text-transform: uppercase; letter-spacing: -0.03em; }
  .pm-ad__cta { justify-self: center; padding: 7px 14px; border-radius: 16px; background: var(--lumen); color: var(--ink); font-size: 11px; font-weight: 500; }
  /* Profil */
  .pm-phone--profile { background: #fff; color: #111; padding: 22px 10px 0; }
  .pm-ig__head { margin: 0; display: flex; gap: 8px; align-items: center; font-size: 9.5px; line-height: 1.35; }
  .pm-ig__head i { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--lumen) url(../img/production/energy-mark.png) center / 62% no-repeat; }
  .pm-ig__stats { margin: 12px 0; display: flex; justify-content: space-between; font-size: 9px; }
  .pm-ig__grid { margin: 0 -10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
  .pm-ig__grid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
  /* Reel */
  .pm-reel__tag { position: absolute; left: 12px; top: 16px; margin: 0; font-size: 9px; color: #fff; }
  .pm-heart { position: absolute; right: 18px; bottom: 60px; color: #ff5a7a; font-size: 22px; translate: var(--x) 0; animation: pm-heart 3.2s ease-out infinite; animation-delay: var(--t); opacity: 0; }
  @keyframes pm-heart { 0% { opacity: 0; transform: translateY(0) scale(0.6); } 15% { opacity: 1; transform: translateY(-20px) scale(1); } 100% { opacity: 0; transform: translateY(-180px) scale(1.2); } }

  /* ---------- 07 Website: Handy-Landingpage, scrollt von selbst ---------- */
  .pm-webphone { position: relative; z-index: 2; margin: 32px auto 0; width: 72vw; aspect-ratio: 9 / 19; overflow: hidden; border-radius: 32px; border: 6px solid #0b0b0c; background: var(--cream); color: #111; box-shadow: 0 30px 60px rgb(0 0 0 / 0.35); }
  .pm-ws__nav { position: absolute; z-index: 3; left: 0; right: 0; top: 0; margin: 0; padding: 14px 14px 10px; display: flex; justify-content: space-between; align-items: center; color: #fff; font-size: 11px; }
  .pm-ws__nav b { display: flex; align-items: center; gap: 6px; font-weight: 600; }
  .pm-ws__nav .ws__mark { width: 16px; height: 16px; }
  .pm-ws { position: absolute; left: 0; right: 0; top: 0; }
  .pm-ws.is-run { animation: pm-wsrun 18s ease-in-out infinite; }
  @keyframes pm-wsrun { 0%, 12% { translate: 0 0; } 82%, 90% { translate: 0 calc(-1 * var(--d, 0px)); } 100% { translate: 0 0; } }
  .pm-ws__hero { position: relative; height: 72vw; color: #fff; }
  .pm-ws__imgs { position: absolute; inset: 0; margin: 0; }
  .pm-ws__imgs img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.8s var(--ease); }
  .pm-ws__imgs img.is-on { opacity: 1; }
  .pm-ws__copy { position: absolute; left: 14px; bottom: 16px; }
  .pm-ws__h { margin: 4px 0 10px; font-family: "Bricolage Grotesque", var(--sans); font-weight: 800; font-size: 9vw; line-height: 0.88; text-transform: uppercase; }
  .pm-ws__h em, .pm-ws__sh em { font-family: "Fraunces", var(--serif); font-weight: 500; font-style: italic; text-transform: none; }
  .pm-ws__usp { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgb(0 0 0 / 0.1); }
  .pm-ws__usp p { margin: 0; padding: 12px; background: var(--cream); font-size: 9px; }
  .pm-ws__usp b { display: block; font-size: 16px; }
  .pm-ws__sec, .pm-ws__foot { padding: 18px 14px; }
  .pm-ws__sh { margin: 4px 0 12px; font-family: "Bricolage Grotesque", var(--sans); font-weight: 800; font-size: 6.5vw; line-height: 0.9; text-transform: uppercase; }
  .pm-ws__card { margin: 0 0 10px; border-radius: 10px; overflow: hidden; background: #fff; }
  .pm-ws__card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
  .pm-ws__card figcaption { display: flex; justify-content: space-between; padding: 8px 10px; font-size: 10px; }
  .pm-ws__grid { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
  .pm-ws__grid img { width: 100%; aspect-ratio: 1; object-fit: cover; }
  .pm-ws__foot { padding-bottom: 40px; background: var(--lumen); }
  .pm-webphone .ws-kick { font-size: 8px; }
  .pm-webphone .ws-btn { display: inline-block; padding: 6px 12px; border-radius: 14px; font-size: 9px; }
  .pm-webphone .ws-field { padding: 4px 4px 4px 10px; border-radius: 14px; gap: 6px; font-size: 9px; background: #fff; }
  .pm-webphone .ws-field b { padding: 5px 10px; border-radius: 12px; font-size: 9px; background: #1b1430; color: #fff; }
}
@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .pm-fig img, .pm-campaign__hero img, .pm-circs img, .pmf-can, .pm-story__new span, .pm-story__can, .pm-heart, .pm-swipe, .pmf-stairs > div { animation: none; }
}