/* =========================================================
   SEFER ISAKU – Grunge-Portfolio
   Layout: jede Portfolio-Seite ist eine skalierte 1754×1240-Bühne (halbe Größe der 300-dpi-PSB).
   Desktop: Seiten stapeln sich (sticky), die nächste Seite reißt
   mit ihrer Papierkante über die vorherige. Hochformat: Kamerafahrt
   quer über die Seite.
   ========================================================= */
:root {
  /* Farbe – abgeleitet aus dem Original (Tape-Schwarz, Papier, Neon) */
  --ink: #0d0b0e;          /* Grundschwarz, leicht violett */
  --ink-2: #19141a;
  --paper: #e9e4dc;        /* Papierfetzen */
  --paper-ink: #1d1a1c;
  --label: #1f2a3a;        /* Navy der Pin-Etiketten */
  --neon: #e0388f;         /* Magenta aus LOVE / Tote Bag */
  --vhs: #7ff5d4;          /* Türkis aus dem Cover-Wellenfeld */
  --acid: #d7f23a;         /* VINYL-PLATTE-Gelb */
  --muted: #b9b0b4;
  /* Typo */
  --f-wide: "Krona One", "Arial Black", sans-serif;
  --f-cond: "Anton", "Impact", "Arial Narrow", sans-serif;
  --f-hand: "Gochi Hand", "Comic Sans MS", cursive;
  --f-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-vhs: "VT323", "Courier New", monospace;
  --f-mark: "Permanent Marker", "Gochi Hand", cursive;
  --accent: #ff2d8a;      /* wechselt je Seite, steuert Spur + Akzente */
  color-scheme: dark;
}
html { background: var(--ink); }
body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-body);
  font-size: 16px;
  overflow-x: hidden;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 90; background: var(--ink); }
*, *::before, *::after { box-sizing: border-box; }
img { display: block; max-width: none; user-select: none; -webkit-user-drag: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px dashed var(--acid); outline-offset: 4px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 200; background: var(--acid); color: var(--ink); padding: 8px 12px; font-family: var(--f-vhs); font-size: 20px; }
.skip:focus { top: calc(12px + env(safe-area-inset-top, 0px)); }

/* ---------- Topbar: VHS-OSD ---------- */
.osd {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: calc(10px + env(safe-area-inset-top, 0px)); padding-bottom: 10px;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  font-family: var(--f-vhs); font-size: 22px; letter-spacing: .04em; color: #fff;
  mix-blend-mode: difference; pointer-events: none;
}
.osd > * { pointer-events: auto; }
.osd__mark { font-family: var(--f-wide); font-size: 13px; letter-spacing: .14em; text-decoration: none; color: inherit; }
.osd__tc { display: flex; gap: 14px; align-items: baseline; white-space: nowrap; }
.osd__tc .rec { color: #fff; animation: blink 1.2s steps(2) infinite; }
.osd__chap { opacity: .8; }
.osd__btns { display: flex; gap: 8px; }
.osd__btn { font-family: var(--f-vhs); font-size: 20px; padding: 2px 10px; border: 1px solid currentColor; text-transform: uppercase; letter-spacing: .08em; }
.osd__btn[aria-pressed="true"] { background: #fff; color: #000; }
@keyframes blink { 50% { opacity: 0; } }
@media (max-width: 640px) { .osd__chap, .osd__tc .sp { display: none; } .osd { font-size: 18px; } .osd__btn { font-size: 16px; padding: 2px 6px; } }

/* ---------- Seiten ---------- */
main { position: relative; overflow-x: clip; }
.page { position: sticky; top: var(--stick, 0px); height: var(--ph, 70.7vw); }
.stage { position: relative; height: 100%; width: 100%; clip-path: inset(-600px 0 0 0); background: var(--ink); }
.scene {
  position: absolute; left: 0; top: 0; width: 1754px; height: 1240px;
  transform-origin: 0 0; will-change: transform;
}
.scene__inner { position: absolute; inset: 0; transform-origin: 50% 40%; }
.base { position: absolute; left: 0; top: 0; width: 1754px; height: 1240px; }
.lead { position: absolute; left: 0; width: 1754px; pointer-events: none; transform-origin: 0 100%; filter: drop-shadow(0 -6px 10px rgba(0,0,0,.45)) drop-shadow(0 7px 7px rgba(0,0,0,.4)); }
.shade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }
.light {
  position: absolute; left: 0; top: 0; width: 900px; height: 900px; margin: -450px 0 0 -450px;
  background: radial-gradient(closest-side, rgba(255,240,220,.22), rgba(255,240,220,0) 70%);
  mix-blend-mode: soft-light; pointer-events: none; opacity: 0; transition: opacity .6s;
}
.page.is-hot .light { opacity: 1; }

/* Ebenen */
.el { position: absolute; }
.el .par, .el .tilt { position: relative; width: 100%; height: 100%; }
.el .tilt { transform-style: preserve-3d; }
.el img.art { position: relative; width: 100%; height: 100%; filter: drop-shadow(0 14px 18px rgba(0,0,0,.45)); }
.el img.glow { position: absolute; inset: 0; width: 100%; height: 100%; filter: blur(26px) saturate(1.8) brightness(1.3); opacity: 0; }
.el.work { cursor: none; }
.el.work:focus-visible { outline: none; }
.el.work:focus-visible img.art { outline: 3px dashed var(--acid); outline-offset: 8px; }
.el.label .tilt { transform-origin: 50% 10%; }
.el button.hit { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Hero */
.title-rgb { position: absolute; inset: 0; mix-blend-mode: screen; pointer-events: none; opacity: .85; }
.vhs-band {
  position: absolute; left: 0; right: 0; top: 0; height: 90px; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.08) 40%, rgba(127,245,212,.12) 50%, transparent);
  mix-blend-mode: screen; animation: band 7s linear infinite;
}
@keyframes band { from { transform: translateY(-120px); } to { transform: translateY(1300px); } }
.hint {
  position: absolute; left: 50%; bottom: 210px; transform: translateX(-50%);
  font-family: var(--f-vhs); font-size: 34px; color: #fff; letter-spacing: .1em; text-shadow: 0 0 12px rgba(127,245,212,.8);
  display: flex; gap: 18px; align-items: center; pointer-events: none;
}
.hint i { font-style: normal; animation: blink 1s steps(2) infinite; }

/* About-Text */
.about-copy {
  position: absolute; left: 806px; top: 520px; width: 770px;
  font-family: var(--f-body); font-weight: 500; font-size: 31.5px; line-height: 1.25; color: #fff;
  text-shadow: 0 0 6px rgba(255,255,255,.55), 0 0 18px rgba(255,190,190,.25);
}
.about-copy p { margin: 0 0 36px; }
.about-copy .w { display: inline-block; will-change: transform; }

/* Thanks-Neon */
.flicker { animation: flick 6s infinite; }
@keyframes flick { 0%, 18%, 22%, 62%, 64%, 100% { opacity: 1; } 20% { opacity: .55; } 63% { opacity: .7; } }

/* ---------- Werdegang & Kontakt (neu gestaltet) ---------- */
.cv {
  position: relative; z-index: 20; overflow-x: clip;
  background: #07060a;
  padding-block: clamp(80px, 10vw, 150px) 0;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.cv .lead-wrap { position: absolute; left: 0; right: 0; top: 0; height: 0; pointer-events: none; }
.cv .lead-wrap img { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; }
.cv__in { max-width: 1240px; margin: 0 auto; display: grid; gap: clamp(48px, 7vw, 96px); }
.cv__head { display: grid; gap: 18px; }
.eyebrow { font-family: var(--f-vhs); font-size: 24px; color: var(--vhs); letter-spacing: .08em; }
.cv h2 {
  margin: 0; font-family: var(--f-cond); font-weight: 400; text-transform: uppercase;
  font-size: clamp(64px, 13vw, 190px); line-height: .86; letter-spacing: .005em; text-wrap: balance;
}
.cv h2 .tape { display: inline-block; background: var(--paper); color: var(--paper-ink); padding: 0 .12em; transform: rotate(-2deg); box-shadow: 0 10px 24px rgba(0,0,0,.5); }
.quote { max-width: 34ch; font-family: var(--f-hand); font-size: clamp(26px, 3vw, 38px); line-height: 1.2; color: var(--paper); margin: 0; }
.quote span { color: var(--neon); }

.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.tl {
  position: relative; display: grid; grid-template-columns: minmax(130px, 210px) 1fr; gap: 6px 28px; align-items: start;
  padding: 26px 28px 28px; color: var(--paper-ink);
  background: var(--paper) url("../assets/img/tex_paper.webp") center / cover; background-blend-mode: multiply;
  clip-path: polygon(0 3%, 6% 0, 14% 2%, 27% 0, 41% 3%, 55% 0, 70% 2%, 84% 0, 100% 3%, 99% 52%, 100% 97%, 88% 100%, 73% 97%, 58% 100%, 43% 97%, 28% 100%, 12% 98%, 0 100%, 1% 48%);
  transform: rotate(var(--r, 0deg));
}
.tl:nth-child(odd) { --r: -.6deg; margin-right: 6%; }
.tl:nth-child(even) { --r: .7deg; margin-left: 6%; }
.tl__date { font-family: var(--f-vhs); font-size: 28px; line-height: 1; color: #6b1b45; font-variant-numeric: tabular-nums; }
.tl__what { min-width: 0; }
.tl h3 { margin: 0 0 6px; font-family: var(--f-cond); font-weight: 400; font-size: clamp(26px, 3vw, 36px); line-height: 1; text-transform: uppercase; letter-spacing: .01em; }
.tl p { margin: 0; max-width: 62ch; font-size: 16px; line-height: 1.55; }
@media (max-width: 640px) { .tl { grid-template-columns: 1fr; padding: 22px 18px; } .tl:nth-child(n) { margin: 0; } }

.cv__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 40px; }
.block h3 { margin: 0 0 18px; font-family: var(--f-wide); font-size: 15px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; padding: 0; margin: 0; }
.chip {
  font-family: var(--f-hand); font-size: 24px; line-height: 1; padding: 12px 16px 10px; color: #fff;
  background: var(--label);
  background-image: repeating-linear-gradient(180deg, transparent 0 22px, rgba(205,150,60,.55) 22px 23px);
  box-shadow: 0 8px 16px rgba(0,0,0,.45); transform: rotate(var(--r, -1.5deg)); transition: transform .3s;
}
.chip:nth-child(3n) { --r: 1.8deg; } .chip:nth-child(4n) { --r: -.6deg; }
.chip:hover { transform: rotate(0) scale(1.08); }
.chip small { font-family: var(--f-vhs); font-size: 18px; color: var(--acid); margin-left: 6px; }

/* Kontakt mit Schnittmarken + Kontrollstreifen */
.contact { position: relative; padding: 44px clamp(20px, 4vw, 56px); border: 1px solid rgba(233,228,220,.25); display: grid; gap: 22px; }
.contact::before, .contact::after { content: ""; position: absolute; width: 28px; height: 28px; border-color: var(--paper); border-style: solid; }
.contact::before { left: -14px; top: -14px; border-width: 1px 0 0 1px; }
.contact::after { right: -14px; bottom: -14px; border-width: 0 1px 1px 0; }
.contact__mail { font-family: var(--f-cond); font-size: clamp(34px, 7vw, 92px); line-height: 1; letter-spacing: .01em; word-break: break-all; user-select: all; color: #fff; text-decoration: none; position: relative; display: inline-block; }
.contact__mail:hover { color: var(--acid); text-shadow: -3px 0 var(--neon), 3px 0 var(--vhs); }
.contact__row { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; font-size: 17px; color: var(--muted); }
.copy { font-family: var(--f-vhs); font-size: 22px; padding: 4px 14px; background: var(--acid); color: var(--ink); }
.cmyk { display: flex; height: 18px; max-width: 360px; }
.cmyk i { flex: 1; } .cmyk i:nth-child(1) { background: #00a0e3; } .cmyk i:nth-child(2) { background: #e5007e; } .cmyk i:nth-child(3) { background: #ffed00; } .cmyk i:nth-child(4) { background: #111; border: 1px solid #444; }
.cmyk i:nth-child(5) { background: #808080; } .cmyk i:nth-child(6) { background: #c0c0c0; }
.foot { margin-top: clamp(60px, 8vw, 110px); padding-block: 28px calc(28px + env(safe-area-inset-bottom, 0px)); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; align-items: end; border-top: 1px solid rgba(233,228,220,.18); }
.barcode { display: grid; gap: 4px; justify-items: end; font-family: var(--f-vhs); font-size: 18px; color: var(--muted); }
.barcode canvas { width: 220px; height: 44px; background: #fff; }
.foot small { font-family: var(--f-vhs); font-size: 18px; color: var(--muted); }

/* ---------- Cursor ---------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 150; pointer-events: none; mix-blend-mode: difference; }
.cursor__dot { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; background: #fff; border-radius: 50%; }
.cursor__ring { position: absolute; width: 120px; height: 120px; margin: -60px 0 0 -60px; transform: scale(.32); }
.cursor__ring svg { width: 100%; height: 100%; animation: spin 9s linear infinite; }
.cursor__ring text { font-family: var(--f-vhs); font-size: 15px; letter-spacing: 3px; fill: #fff; opacity: 0; transition: opacity .25s; }
.cursor__ring circle { fill: none; stroke: #fff; stroke-width: 1.5; }
.cursor.is-work .cursor__ring text { opacity: 1; }
.cursor.is-work .cursor__ring circle { stroke-dasharray: 3 6; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } .el.work { cursor: pointer; } }

/* ---------- Grain + Vignette ---------- */
.grain { position: fixed; inset: -100%; z-index: 70; pointer-events: none; background: url("../assets/img/grain.png"); opacity: .09; mix-blend-mode: overlay; animation: grain 1s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0,0); } 20% { transform: translate(-7%,4%); } 40% { transform: translate(5%,-6%); } 60% { transform: translate(-3%,8%); } 80% { transform: translate(8%,2%); } 100% { transform: translate(-5%,-4%); } }

/* ---------- Overlays: Index + Lightbox ---------- */
.overlay { position: fixed; inset: 0; z-index: 120; display: grid; }
.overlay[hidden] { display: none !important; }
.overlay__bg { position: absolute; inset: 0; background: rgba(8,6,9,.86); }
.index { place-items: center; }
.index__panel {
  position: relative; width: min(1100px, 100%); max-height: 100%; overflow: auto;
  padding: calc(70px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) calc(40px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}
.index__list { list-style: none; margin: 0; padding: 0; display: grid; }
.index__list button {
  width: 100%; display: grid; grid-template-columns: 70px 1fr auto; gap: 16px; align-items: baseline; text-align: left;
  padding: 10px 0 8px; border-bottom: 1px solid rgba(233,228,220,.16);
}
.index__list .n { font-family: var(--f-vhs); font-size: 24px; color: var(--vhs); font-variant-numeric: tabular-nums; }
.index__list .t { font-family: var(--f-cond); font-size: clamp(30px, 5vw, 62px); line-height: 1; text-transform: uppercase; transition: transform .35s, color .35s; }
.index__list .k { font-family: var(--f-hand); font-size: 22px; color: var(--muted); }
.index__list button:hover .t, .index__list button:focus-visible .t { color: var(--acid); transform: translateX(18px) skewX(-6deg); }
.index__thumb { position: fixed; left: 0; top: 0; width: 300px; height: auto; pointer-events: none; z-index: 2; opacity: 0; transform: translate(-50%,-50%); box-shadow: 0 20px 40px rgba(0,0,0,.6); }
.close { position: absolute; z-index: 3; top: calc(14px + env(safe-area-inset-top, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); font-family: var(--f-vhs); font-size: 24px; padding: 4px 12px; background: var(--paper); color: var(--ink); }

.lb { place-items: center; padding: 16px; }
.lb__panel {
  position: relative; width: min(1180px, 100%); max-height: calc(100% - 20px); overflow: auto;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: center;
  padding: clamp(24px, 4vw, 54px); color: var(--paper-ink);
  background: var(--paper) url("../assets/img/tex_paper.webp") center / cover; background-blend-mode: multiply;
  clip-path: polygon(0 2%, 8% 0, 19% 1.5%, 33% 0, 47% 2%, 61% 0, 76% 1.6%, 90% 0, 100% 2%, 99% 50%, 100% 98%, 85% 100%, 70% 98%, 55% 100%, 40% 98.4%, 24% 100%, 9% 98%, 0 100%, 1% 50%);
}
.lb__fig { margin: 0; display: grid; place-items: center; min-width: 0; }
.lb__fig img { max-width: 100%; max-height: 72vh; width: auto; height: auto; filter: drop-shadow(0 18px 24px rgba(0,0,0,.35)); }
.lb__meta { display: grid; gap: 14px; min-width: 0; }
.lb__tag { justify-self: start; font-family: var(--f-hand); font-size: 22px; color: #fff; background: var(--label); padding: 8px 14px 6px; transform: rotate(-2deg); }
.lb__meta h3 { margin: 0; font-family: var(--f-cond); font-weight: 400; font-size: clamp(38px, 5vw, 68px); line-height: .95; text-transform: uppercase; text-wrap: balance; }
.lb__meta p { margin: 0; font-size: 17px; line-height: 1.55; max-width: 48ch; }
.lb__nav { display: flex; gap: 10px; margin-top: 8px; }
.lb__nav button { font-family: var(--f-vhs); font-size: 22px; padding: 4px 12px; border: 1px solid var(--paper-ink); }
.lb .close { position: absolute; }
@media (max-width: 760px) { .lb__panel { grid-template-columns: 1fr; } .lb__fig img { max-height: 46vh; } }

/* ---------- Hochformat: Kamerafahrt ---------- */
.is-narrow .page { position: relative; top: 0; height: var(--ph); }
.is-narrow .stage { position: sticky; top: 0; height: 100vh; height: 100svh; }
.is-narrow .hint { bottom: 230px; font-size: 40px; }

/* ---------- Reduzierte Bewegung ---------- */
.reduced .grain, .reduced .vhs-band, .reduced .osd__tc .rec, .reduced .flicker, .reduced .cursor__ring svg { animation: none; }
.reduced.is-narrow .page { height: 100svh; }
.reduced.is-narrow .stage { overflow-x: auto; overflow-y: hidden; clip-path: none; }

/* =========================================================
   v2 · Ergänzungen
   ========================================================= */
a { color: inherit; }
.place { text-decoration: underline; text-decoration-style: wavy; text-decoration-color: var(--accent); text-underline-offset: 4px; text-decoration-thickness: 1.5px; transition: color .25s; }
.place:hover, .place:focus-visible { color: var(--acid); }

/* ---------- Intro ---------- */
.intro { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 16px; background: #050406 url("../assets/img/p1_base_sm.webp") center / cover; }
.intro::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(5,4,6,.55), rgba(5,4,6,.92) 70%); }
.intro::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px); }
.intro[hidden] { display: none; }
.intro__screen { position: relative; z-index: 1; width: min(760px, 100%); display: grid; gap: 22px; justify-items: start; color: #fff; font-family: var(--f-vhs); }
.intro__rec { color: #ff3b3b; font-size: 26px; animation: blink 1s steps(2) infinite; }
.intro__eyebrow { margin: 0; font-size: 24px; letter-spacing: .1em; color: var(--vhs); }
.intro__title { margin: 0; display: grid; gap: 10px; }
.intro__title span { font-family: var(--f-wide); font-weight: 400; font-size: clamp(34px, 8vw, 78px); letter-spacing: .06em; line-height: 1; text-shadow: -3px 0 rgba(255,45,138,.8), 3px 0 rgba(127,245,212,.8); }
.intro__title small { font-family: var(--f-vhs); font-size: clamp(20px, 3vw, 26px); color: var(--muted); letter-spacing: .06em; }
.intro__bar { width: 100%; height: 6px; background: rgba(255,255,255,.12); }
.intro__bar i { display: block; height: 100%; width: 0; background: var(--acid); transition: width .2s; }
.intro__btns { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.intro__play { font-family: var(--f-vhs); font-size: 34px; padding: 8px 22px; background: var(--acid); color: var(--ink); letter-spacing: .08em; box-shadow: 6px 6px 0 var(--neon); transition: transform .2s, box-shadow .2s; }
.intro__play small { font-size: 20px; }
.intro__play:hover:not(:disabled) { transform: translate(-3px, -3px) rotate(-1deg); box-shadow: 10px 10px 0 var(--neon); }
.intro__mute { font-family: var(--f-vhs); font-size: 22px; padding: 6px 12px; border: 1px solid rgba(255,255,255,.4); }
.intro__play:disabled, .intro__mute:disabled { opacity: .35; cursor: progress; }
.intro__hint { margin: 0; font-size: 19px; color: var(--muted); }

/* ---------- OSD: Sound-Schalter mit EQ ---------- */
.osd__snd { display: inline-flex; gap: 8px; align-items: center; }
.eq { display: inline-flex; gap: 2px; align-items: end; height: 14px; }
.eq i { width: 3px; height: 4px; background: currentColor; transform-origin: bottom; }
.osd__snd[aria-pressed="true"] .eq i { animation: eq .9s ease-in-out infinite alternate; }
.osd__snd[aria-pressed="true"] .eq i:nth-child(2) { animation-delay: -.3s; } .osd__snd[aria-pressed="true"] .eq i:nth-child(3) { animation-delay: -.55s; } .osd__snd[aria-pressed="true"] .eq i:nth-child(4) { animation-delay: -.15s; }
@keyframes eq { from { height: 3px; } to { height: 14px; } }
.osd__snd[aria-pressed="true"] { background: none; color: inherit; }
.osd__snd[aria-pressed="false"] .lbl, #btnMotion[aria-pressed="true"] { text-decoration: line-through; }
#btnMotion[aria-pressed="true"] { background: none; color: inherit; }
@media (max-width: 640px) { .osd__snd .lbl { display: none; } .osd__mark { font-size: 10px; letter-spacing: .08em; } .osd__tc { display: none; } .osd { gap: 8px; } .osd__btns { gap: 6px; } }

/* ---------- Graffiti-Spur ---------- */
.trail { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 140; pointer-events: none; mix-blend-mode: screen; }
.reduced .trail { display: none; }

/* ---------- Bursts (Plopp-Kreise) ---------- */
.bursts { position: fixed; inset: 0; z-index: 160; pointer-events: none; }
.burst { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.burst__ring { position: absolute; left: -60px; top: -60px; width: 120px; height: 120px; border-radius: 50%; border: 3px solid var(--c, var(--acid)); }
.burst__dot { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--acid)); }
.burst__word { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); font-family: var(--f-mark); font-size: 26px; color: var(--c, var(--acid)); white-space: nowrap; text-shadow: 2px 2px 0 #000; }

/* ---------- Seiten-Extras ---------- */
.el.strip { pointer-events: none; }
.el.flap .tilt { transform-origin: 50% 0; }
.el.collage, .el.shard { pointer-events: none; }
.el.qr { cursor: pointer; z-index: 6; }
.el.qr a.hit { position: absolute; inset: -6px; display: block; border-radius: 6px; }
.el.qr .qr__tip { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translate(-50%, 6px) rotate(-3deg); opacity: 0; white-space: nowrap; font-family: var(--f-mark); font-size: 30px; color: var(--ink); background: var(--acid); padding: 4px 12px; box-shadow: 4px 4px 0 #000; transition: opacity .25s, transform .25s; pointer-events: none; }
.el.qr:hover .qr__tip, .el.qr:focus-within .qr__tip, .el.qr.is-tip .qr__tip { opacity: 1; transform: translate(-50%, 0) rotate(-3deg); }
.el.qr .qr__ping { position: absolute; inset: -10px; border: 3px solid var(--acid); border-radius: 10px; opacity: 0; animation: ping 2.4s ease-out infinite; pointer-events: none; }
@keyframes ping { 0% { transform: scale(.9); opacity: .9; } 80%, 100% { transform: scale(1.35); opacity: 0; } }
.reduced .el.qr .qr__ping { animation: none; }
.el.disc { pointer-events: none; }
.disc-full { position: absolute; pointer-events: none; opacity: 0; }
.disc-full .spin { position: absolute; inset: 0; animation: spin 1.8s linear infinite; animation-play-state: paused; }
.disc-full.is-on .spin { animation-play-state: running; }
.disc-full img { width: 100%; height: 100%; }
.disc-full::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 20deg, transparent 0 8%, rgba(255,255,255,.22) 12%, transparent 18% 50%, rgba(255,255,255,.14) 58%, transparent 64%); mix-blend-mode: screen; }
.el.doodle img.art { filter: drop-shadow(0 0 6px rgba(255,120,160,.5)); }
.el.split.work, .el.work { cursor: none; }
@media (hover: none), (pointer: coarse) { .el.work { cursor: pointer; } }

/* Thanks: Neon + Mail-Sticker */
.thanks-cta { position: absolute; left: 50%; top: 1030px; transform: translateX(-50%); display: flex; gap: 22px; align-items: center; }
.thanks-cta a { font-family: var(--f-mark); font-size: 40px; color: #fff; text-decoration: none; padding: 8px 22px; border: 3px solid #c45bff; border-radius: 40px; box-shadow: 0 0 18px rgba(196,91,255,.7), inset 0 0 14px rgba(196,91,255,.5); text-shadow: 0 0 10px #c45bff; transition: transform .25s, background .25s; }
.thanks-cta a:hover, .thanks-cta a:focus-visible { background: rgba(196,91,255,.25); transform: rotate(-2deg) scale(1.05); }

/* ---------- Kontakt v2 ---------- */
.contact__big { display: inline-block; justify-self: start; max-width: 100%; font-family: var(--f-cond); font-size: clamp(26px, 8.2vw, 92px); line-height: 1.02; letter-spacing: .01em; overflow-wrap: anywhere; color: #fff; text-decoration: none; position: relative; }
.contact__tel { font-size: clamp(30px, 5.6vw, 72px); color: var(--paper); }
.contact__big:hover, .contact__big:focus-visible { color: var(--acid); text-shadow: -3px 0 var(--neon), 3px 0 var(--vhs); }
.pill { font-family: var(--f-vhs); font-size: 22px; padding: 4px 14px; background: var(--acid); color: var(--ink); text-decoration: none; display: inline-block; transition: transform .2s; }
.pill:hover, .pill:focus-visible { transform: rotate(-2deg) scale(1.04); }
.pill--ghost { background: none; color: var(--paper); border: 1px solid rgba(233,228,220,.4); }
.pill.place { text-decoration: none; }

/* Marker-Doodles aus hi/Marker Scribbles */
.mark { display: inline-block; fill: var(--accent); overflow: visible; pointer-events: none; }
.mark--under { position: absolute; left: -2%; bottom: -.32em; width: 104%; height: .5em; fill: var(--neon); }
.quote span { position: relative; display: inline-block; }
.mark--arrow { width: 60px; height: 22px; vertical-align: middle; margin-left: 10px; fill: var(--acid); }
.mark path { transform-box: fill-box; }

/* ---------- Index v2 ---------- */
.index__panel { padding-top: calc(80px + env(safe-area-inset-top, 0px)); }
.index__eyebrow { margin: 0 0 18px; font-family: var(--f-vhs); font-size: 22px; color: var(--vhs); letter-spacing: .06em; }
.index__eyebrow span { color: var(--muted); }
.index__list button { grid-template-columns: 60px 1fr auto; position: relative; }
.index__list .t { position: relative; display: inline-block; }
.index__list .t svg { position: absolute; left: -2%; bottom: -.12em; width: 104%; height: .34em; fill: var(--acid); transform: scaleX(0); transform-origin: left center; transition: transform .45s cubic-bezier(.2,.9,.2,1); pointer-events: none; }
.index__list button:hover .t svg, .index__list button:focus-visible .t svg { transform: scaleX(1); }
.index__list button:hover .t, .index__list button:focus-visible .t { transform: translateX(14px) skewX(-6deg); }
.index__list .k { text-align: right; }
.index__chapters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.index__chapters button { font-family: var(--f-vhs); font-size: 20px; padding: 2px 10px; border: 1px solid rgba(233,228,220,.3); }
.index__chapters button:hover, .index__chapters button:focus-visible { background: var(--paper); color: var(--ink); }
.index__pop { position: fixed; left: 0; top: 0; z-index: 4; width: 340px; pointer-events: none; opacity: 0; }
.index__pop img { display: block; width: 100%; height: auto; box-shadow: 0 24px 50px rgba(0,0,0,.6); border: 8px solid var(--paper); border-bottom-width: 34px; }
.index__sticker { position: absolute; right: -18px; bottom: 2px; font-family: var(--f-mark); font-size: 22px; color: var(--ink); background: var(--acid); padding: 2px 10px; transform: rotate(-6deg); box-shadow: 3px 3px 0 #000; }
.index__list .thumb { display: none; }
@media (hover: none), (pointer: coarse) {
  .index__pop { display: none; }
  .index__list button { grid-template-columns: 52px 72px 1fr; }
  .index__list .thumb { display: block; width: 72px; height: 54px; object-fit: cover; border: 3px solid var(--paper); transform: rotate(-3deg); }
  .index__list .k { grid-column: 3; text-align: left; }
}

/* ---------- Lightbox v2 ---------- */
.lb__thumbs { display: flex; gap: 10px; margin-top: 14px; justify-content: center; }
.lb__thumbs button { width: 64px; height: 48px; padding: 0; border: 2px solid transparent; }
.lb__thumbs button[aria-current="true"] { border-color: var(--paper-ink); }
.lb__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.lb__fig { display: grid; }
.lb__video { justify-self: start; font-family: var(--f-vhs); font-size: 26px; padding: 6px 16px; background: #e52d27; color: #fff; text-decoration: none; box-shadow: 4px 4px 0 var(--paper-ink); transition: transform .2s; }
.lb__video small { font-size: 18px; opacity: .85; }
.lb__video:hover, .lb__video:focus-visible { transform: rotate(-2deg) scale(1.04); }
.lb__video[hidden] { display: none; }

/* Fokus auf Seiten-Hotspots */
.el a.hit:focus-visible, .el button.hit:focus-visible { outline: 3px dashed var(--acid); outline-offset: 6px; }

/* Seite blendet erst ein, wenn alle Ebenen geladen sind */
.page .scene__inner { opacity: 0; transition: opacity .5s ease; }
.page.ready .scene__inner { opacity: 1; }

/* =========================================================
   v3 · Ergänzungen
   ========================================================= */

/* ---------- Mischpult (Sound) ---------- */
.osd__sndwrap { position: relative; }
.mix {
  position: absolute; right: 0; top: calc(100% + 12px); width: 260px; z-index: 5;
  display: grid; gap: 12px; padding: 16px 16px 14px;
  font-family: var(--f-vhs); color: var(--paper-ink); mix-blend-mode: normal;
  background: var(--paper) url("../assets/img/tex_paper.webp") center / cover; background-blend-mode: multiply;
  clip-path: polygon(0 4%, 9% 0, 22% 3%, 38% 0, 55% 2%, 71% 0, 86% 3%, 100% 1%, 99% 50%, 100% 97%, 84% 100%, 66% 97%, 48% 100%, 30% 98%, 13% 100%, 0 97%, 1% 52%);
  transform: rotate(-1.2deg); box-shadow: 0 18px 30px rgba(0,0,0,.5);
}
.mix[hidden] { display: none; }
.osd:has(.mix:not([hidden])) { mix-blend-mode: normal; }
.mix__head { display: flex; align-items: center; gap: 8px; font-size: 22px; letter-spacing: .12em; }
.mix__head small { margin-left: auto; font-size: 15px; color: #6b1b45; }
.mix__dot { width: 10px; height: 10px; border-radius: 50%; background: #e52d27; box-shadow: 0 0 8px #e52d27; animation: blink 1.2s steps(2) infinite; }
.mix.is-off .mix__dot { background: #777; box-shadow: none; animation: none; }
.mix__power { display: flex; align-items: center; gap: 10px; justify-self: start; font-family: var(--f-vhs); font-size: 20px; padding: 4px 12px 4px 6px; background: var(--ink); color: var(--paper); text-transform: uppercase; letter-spacing: .08em; }
.mix__power i { width: 34px; height: 18px; border-radius: 9px; background: #444; position: relative; transition: background .25s; }
.mix__power i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--paper); transition: transform .25s; }
.mix__power[aria-pressed="true"] i { background: var(--acid); }
.mix__power[aria-pressed="true"] i::after { transform: translateX(16px); background: var(--ink); }
.fader { display: grid; grid-template-columns: 64px 1fr 30px; align-items: center; gap: 8px; font-size: 18px; text-transform: uppercase; letter-spacing: .06em; }
.fader output { text-align: right; font-variant-numeric: tabular-nums; color: #6b1b45; }
.fader input { -webkit-appearance: none; appearance: none; width: 100%; height: 26px; background: transparent; cursor: pointer; margin: 0; }
.fader input::-webkit-slider-runnable-track { height: 8px; background: linear-gradient(90deg, var(--ink) var(--v, 50%), rgba(29,26,28,.18) var(--v, 50%)); border-radius: 0; }
.fader input::-moz-range-track { height: 8px; background: rgba(29,26,28,.18); }
.fader input::-moz-range-progress { height: 8px; background: var(--ink); }
.fader input::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 26px; margin-top: -9px; background: var(--neon); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); transform: rotate(-4deg); }
.fader input::-moz-range-thumb { width: 14px; height: 24px; background: var(--neon); border: 2px solid var(--ink); border-radius: 0; box-shadow: 2px 2px 0 var(--ink); }
.fader input:focus-visible { outline: 2px dashed var(--neon); outline-offset: 2px; }
.mix.is-off .fader { opacity: .45; }
.mix__vu { display: flex; gap: 3px; height: 10px; }
.mix__vu i { flex: 1; background: rgba(29,26,28,.15); transition: background .08s; }
.mix__vu i.on { background: #2f9e44; }
.mix__vu i.on:nth-child(n+8) { background: #f2b705; }
.mix__vu i.on:nth-child(n+11) { background: #e52d27; }
@media (max-width: 640px) { .mix { position: fixed; right: 12px; left: 12px; width: auto; top: calc(56px + env(safe-area-inset-top, 0px)); } }

/* ---------- Kontakt-Auswahl ---------- */
.contact__hint { margin: -8px 0 0; font-family: var(--f-hand); font-size: 22px; color: var(--muted); }
.contact__hint i { color: var(--acid); font-style: normal; }
.pick {
  position: fixed; z-index: 170; width: min(320px, calc(100vw - 24px)); padding: 16px 14px 14px;
  color: var(--paper-ink); background: var(--paper) url("../assets/img/tex_paper.webp") center / cover; background-blend-mode: multiply;
  clip-path: polygon(0 3%, 10% 0, 25% 2%, 41% 0, 58% 3%, 74% 0, 90% 2%, 100% 0, 99% 50%, 100% 98%, 86% 100%, 70% 97%, 52% 100%, 35% 98%, 17% 100%, 0 98%, 1% 49%);
  filter: drop-shadow(0 20px 26px rgba(0,0,0,.55)); transform: rotate(-1.5deg);
}
.pick[hidden] { display: none; }
.pick::before { content: ""; position: absolute; left: 50%; top: -2px; width: 90px; height: 22px; transform: translateX(-50%) rotate(-3deg); background: rgba(233,228,220,.65); }
.pick__head { margin: 6px 4px 10px; font-family: var(--f-cond); font-size: 28px; line-height: 1; overflow-wrap: anywhere; }
.pick__list { display: grid; gap: 6px; }
.pick__i { display: flex; align-items: center; gap: 12px; padding: 10px 10px; text-decoration: none; color: inherit; font-family: var(--f-vhs); font-size: 22px; text-align: left; border-bottom: 1px dashed rgba(29,26,28,.25); transition: background .2s, transform .2s; }
.pick__i b { display: grid; place-items: center; width: 34px; height: 34px; flex: none; background: var(--label); color: #fff; font-family: var(--f-mark); font-weight: 400; font-size: 18px; transform: rotate(-4deg); }
.pick__i:hover, .pick__i:focus-visible { background: var(--acid); transform: translateX(6px) rotate(-.5deg); outline: none; }
.pick__i.is-done { background: var(--acid); }
@media (max-width: 640px) {
  .pick { left: 12px !important; right: 12px; top: auto !important; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); width: auto; }
}

/* ---------- Kassetten-Zählwerk ---------- */
.reel { position: fixed; right: max(10px, env(safe-area-inset-right, 0px)); top: 50%; transform: translateY(-50%); z-index: 75; font-family: var(--f-vhs); }
.reel ol { list-style: none; margin: 0; padding: 10px 6px; display: grid; gap: 4px; position: relative; background: rgba(13,11,14,.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); border: 1px solid rgba(233,228,220,.25); }
.reel button { display: flex; align-items: center; justify-content: flex-end; gap: 8px; color: var(--paper); font-size: 18px; padding: 1px 4px; position: relative; }
.reel__t { position: absolute; right: calc(100% + 10px); white-space: nowrap; padding: 2px 10px; background: var(--paper); color: var(--ink); font-size: 18px; opacity: 0; transform: translateX(8px) rotate(-2deg); pointer-events: none; transition: opacity .2s, transform .2s; }
.reel button:hover .reel__t, .reel button:focus-visible .reel__t { opacity: 1; transform: translateX(0) rotate(-2deg); }
.reel__n { opacity: .55; transition: opacity .2s, color .2s; }
.reel button[aria-current] .reel__n { opacity: 1; color: var(--accent); text-shadow: 0 0 8px var(--accent); }
.reel button[aria-current]::before { content: "▶"; font-size: 12px; color: var(--accent); }
.reel__head { position: absolute; left: -7px; top: 0; width: 4px; height: 26px; margin-top: -13px; background: var(--accent); box-shadow: 0 0 10px var(--accent); pointer-events: none; }
@media (max-width: 760px), (max-height: 520px) { .reel { display: none; } }

/* ---------- Kapitel-Stempel (Prägeband) ---------- */
.dymo { position: fixed; left: max(16px, env(safe-area-inset-left, 0px)); bottom: calc(22px + env(safe-area-inset-bottom, 0px)); z-index: 76; pointer-events: none; opacity: 0; transform: translateX(-130%); }
.dymo span {
  display: inline-block; padding: 8px 18px 7px; background: #111; color: #f4f1ea;
  font-family: var(--f-cond); font-size: clamp(20px, 2.4vw, 30px); letter-spacing: .14em;
  text-shadow: 0 1px 0 rgba(255,255,255,.35), 0 -1px 0 rgba(0,0,0,.9);
  box-shadow: 0 10px 20px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.06);
  border-left: 6px solid var(--accent);
}

/* ---------- Ziehbare Sticker ---------- */
.el[data-drag] { cursor: grab; touch-action: none; z-index: 4; }
.el[data-drag].is-lifted { cursor: grabbing; z-index: 8; }
.el[data-drag].is-lifted img.art { filter: drop-shadow(0 30px 24px rgba(0,0,0,.55)); }
.cursor.is-work .cursor__ring { transition: none; }
.reduced .el[data-drag] { cursor: default; touch-action: auto; }
/* Papierkante: im Hochformat bleibt sie an der Seite, die Vorderkante der nächsten Seite entfällt */
.el.edge { z-index: 3; }
.is-narrow .lead { display: none; }
.el img.art { transition: opacity .4s ease; }
.el img.is-loading { opacity: 0; }
/* Browser-Standardrand entfernen: sonst 8 px dunkler Spalt an den Seitenrändern */
html, body { margin: 0; padding: 0; }

/* =========================================================
   v4 · Ergänzungen
   ========================================================= */

/* ---------- Name als Kassetten-Etikett (ersetzt „SEFER ISAKU“ oben links) ---------- */
.osd__spacer { width: 196px; flex: none; }
.tapehome {
  position: fixed; z-index: 82; left: max(10px, env(safe-area-inset-left, 0px)); top: calc(6px + env(safe-area-inset-top, 0px));
  text-decoration: none; color: var(--paper-ink); transform: rotate(-3deg); transform-origin: 0 50%;
  transition: transform .45s cubic-bezier(.2,1.4,.4,1);
}
.tapehome__tape {
  position: relative; display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 14px;
  background: #e6dac0 url("../assets/img/tex_paper.webp") center / 220px; background-blend-mode: multiply;
  clip-path: polygon(0 8%, 3% 0, 6% 10%, 9% 2%, 100% 0, 97% 20%, 100% 38%, 97% 58%, 100% 78%, 97% 100%, 0 100%, 3% 82%, 0 62%, 3% 44%, 0 26%);
  filter: drop-shadow(0 6px 8px rgba(0,0,0,.45));
}
.tapehome__name { font-family: var(--f-mark); font-size: 21px; line-height: 1; letter-spacing: .02em; white-space: nowrap; color: #1a1416; }
.tapehome__rw { position: relative; display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px 2px; background: #111; color: #f4f1ea; font-family: var(--f-vhs); font-size: 15px; letter-spacing: .1em; text-transform: uppercase; overflow: hidden; }
.tapehome__rw i { font-style: normal; color: var(--accent); transition: transform .4s; }
.tapehome__rw em { font-style: normal; transition: opacity .25s, transform .25s; }
.tapehome__rw b { position: absolute; left: 22px; font-weight: 400; opacity: 0; transform: translateY(100%); transition: opacity .25s, transform .25s; white-space: nowrap; }
.tapehome:hover, .tapehome:focus-visible { transform: rotate(-1deg) translateY(2px) scale(1.04); }
.tapehome:hover .tapehome__rw, .tapehome:focus-visible .tapehome__rw { padding-right: 104px; }
.tapehome__rw { transition: padding .35s cubic-bezier(.2,1,.3,1); }
.tapehome:hover .tapehome__rw em, .tapehome:focus-visible .tapehome__rw em { opacity: 0; transform: translateY(-100%); }
.tapehome:hover .tapehome__rw b, .tapehome:focus-visible .tapehome__rw b { opacity: 1; transform: none; }
.tapehome:hover .tapehome__rw i { animation: rew .5s steps(2) infinite; }
@keyframes rew { 50% { transform: translateX(-3px); } }
@media (max-width: 640px) {
  .osd__spacer { width: 128px; }
  .tapehome__name { font-size: 15px; }
  .tapehome__tape { padding: 5px 8px 5px 10px; gap: 6px; }
  .tapehome__rw em { display: none; }
  .tapehome__rw { padding: 2px 5px; font-size: 12px; }
}

/* ---------- Werdegang: glänzender Lichtgrund ---------- */
.cv > .glow { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; contain: strict; }
.cv > :not(.glow) { position: relative; z-index: 1; }
.cv > .lead-wrap { position: absolute; z-index: 2; }
.glow::before { content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, #14081a 0, rgba(20,8,26,.0) 420px), radial-gradient(130% 90% at 50% 60%, rgba(7,6,10,0) 40%, rgba(7,6,10,.35)); }
.glow__b { position: absolute; border-radius: 50%; filter: blur(70px) saturate(1.3); opacity: 1; mix-blend-mode: screen; will-change: transform; }
.glow__b--1 { width: 62vw; height: 62vw; left: -18vw; top: 6%;  background: radial-gradient(circle at 40% 40%, #ff2d8a, rgba(255,45,138,0) 68%); animation: blobA 22s ease-in-out infinite alternate; }
.glow__b--2 { width: 58vw; height: 58vw; right: -20vw; top: 22%; background: radial-gradient(circle at 60% 50%, #6a3dff, rgba(106,61,255,0) 68%); animation: blobB 26s ease-in-out infinite alternate; }
.glow__b--3 { width: 46vw; height: 46vw; left: 22vw; top: 45%; background: radial-gradient(circle, #19e3c6, rgba(25,227,198,0) 66%); opacity: .85; animation: blobC 19s ease-in-out infinite alternate; }
.glow__b--4 { width: 40vw; height: 40vw; left: 4vw; bottom: -6%; background: radial-gradient(circle, #ff7a2f, rgba(255,122,47,0) 64%); opacity: .75; animation: blobB 24s ease-in-out infinite alternate-reverse; }
.glow__b--5 { width: 30vw; height: 30vw; right: 8vw; bottom: 8%; background: radial-gradient(circle, #d7f23a, rgba(215,242,58,0) 62%); opacity: .5; animation: blobA 17s ease-in-out infinite alternate-reverse; }
@keyframes blobA { 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(14vw,-6vh,0) scale(1.18); } 100% { transform: translate3d(-6vw,10vh,0) scale(.92); } }
@keyframes blobB { 0% { transform: translate3d(0,0,0) scale(1.05); } 50% { transform: translate3d(-16vw,8vh,0) scale(.9); } 100% { transform: translate3d(6vw,-12vh,0) scale(1.2); } }
@keyframes blobC { 0% { transform: translate3d(-8vw,0,0) scale(.9); } 100% { transform: translate3d(12vw,-14vh,0) scale(1.25); } }
/* Glanzkante: breiter Lichtstreif wandert diagonal wie über Lack */
.glow__sheen { position: absolute; inset: -20% -60%; z-index: 1; mix-blend-mode: soft-light;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.55) 47%, rgba(255,255,255,.12) 50%, transparent 58%);
  animation: sheen 9s cubic-bezier(.45,0,.2,1) infinite; }
@keyframes sheen { 0% { transform: translateX(-40%); } 60%, 100% { transform: translateX(40%); } }
/* Lichtkegel folgt dem Zeiger (Position per JS über --mx/--my) */
.glow__spot { position: absolute; z-index: 1; left: 0; top: 0; width: 70vmax; height: 70vmax; margin: -35vmax 0 0 -35vmax; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.16), rgba(255,255,255,0) 60%); mix-blend-mode: overlay;
  transform: translate3d(var(--mx, 50vw), var(--my, 40vh), 0); transition: transform .9s cubic-bezier(.2,.8,.2,1); }
.glow__grain { position: absolute; inset: 0; z-index: 3; background: url("../assets/img/grain.png"); opacity: .14; mix-blend-mode: overlay; }
.reduced .glow__b, .reduced .glow__sheen { animation: none; }
@media (prefers-reduced-motion: reduce) { .glow__b, .glow__sheen { animation: none; } }
/* Lesbarkeit auf dem Lichtgrund */
.cv .block h3 { color: #e7e1ea; }
.foot small, .barcode { color: #cfc6d2; }
.contact { background: rgba(7,6,10,.38); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* ---------- Übergang Seite 9 → Werdegang: weicher Schleier in der Neon-Violett-Tönung von Seite 9 ---------- */
.cv::before {
  content: ""; position: absolute; left: 0; right: 0; top: -22vh; height: 22vh; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,8,26,0) 0%, rgba(20,8,26,.55) 45%, rgba(20,8,26,.9) 80%, #14081a 100%);
}
.cv::after {   /* dünne Neonlinie, die Seite 9 nachglühen lässt */
  content: ""; position: absolute; left: 8%; right: 8%; top: -2px; height: 2px; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(196,91,255,.9), rgba(255,45,138,.8), transparent);
  box-shadow: 0 0 18px 4px rgba(196,91,255,.55); opacity: .7;
}

/* ---------- Kanten ohne Schattenband ---------- */
.el.flap img.art, .el.edge img.art { filter: none; }
.lead { filter: drop-shadow(0 -5px 8px rgba(0,0,0,.35)); }

/* ---------- Graffiti-Doodles in 3D ---------- */
.el.doodle3d { pointer-events: none; }
.el.doodle3d .tilt { transform-style: preserve-3d; }
.el.doodle3d img.art { filter: drop-shadow(0 0 8px rgba(255,190,210,.55)) drop-shadow(0 12px 10px rgba(0,0,0,.5)); }

/* ---------- Thanks-Neon: Leuchten unter dem Zeiger ---------- */
.el.neon img.neonlit {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .35s;
  filter: brightness(2) saturate(1.6) drop-shadow(0 0 8px #f0c4ff) drop-shadow(0 0 26px #c45bff);
  -webkit-mask-image: radial-gradient(circle 190px at var(--mx, -50%) var(--my, -50%), #000 30%, transparent 78%);
          mask-image: radial-gradient(circle 190px at var(--mx, -50%) var(--my, -50%), #000 30%, transparent 78%);
}
.el.neon.is-lit img.neonlit { opacity: 1; }
.el.neon { cursor: crosshair; }

/* =========================================================
   v5 · Performance (Chrome/Opera ruckelten): Füllmethoden und Unschärfen auf vollflächigen, fixierten Ebenen
   zwingen den Browser, in jedem Bild alles darunter neu zu verrechnen. Darum hier überall normale Deckung.
   ========================================================= */
.grain { mix-blend-mode: normal; opacity: .045; animation-duration: 1.4s; }
.osd { mix-blend-mode: normal; text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 0 8px rgba(0,0,0,.55); }
.osd__btn { background: rgba(13,11,14,.55); }
.osd__btn[aria-pressed="true"] { background: #fff; color: #000; text-shadow: none; }
.osd__snd[aria-pressed="true"], #btnMotion[aria-pressed="true"] { background: rgba(13,11,14,.55); color: #fff; }
.cursor { mix-blend-mode: normal; }
.cursor__dot { box-shadow: 0 0 0 1.5px rgba(0,0,0,.7); }
.cursor__ring circle { stroke: #fff; filter: drop-shadow(0 0 1px #000); }
.cursor__ring text { fill: #fff; }
.trail { mix-blend-mode: normal; }
.light { mix-blend-mode: normal; background: radial-gradient(closest-side, rgba(255,240,220,.07), rgba(255,240,220,0) 70%); }
.reel ol { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(13,11,14,.82); }
.contact { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(7,6,10,.62); }
/* Ebenen bekommen eigene Grafik-Ebenen, damit ihre Schatten nur einmal gerastert und dann nur verschoben werden */
.page.is-hot .el .par { will-change: transform; }
/* Werdegang-Lichtgrund: gleiche Wirkung mit weniger Rechenlast */
.glow__b { mix-blend-mode: normal; filter: blur(56px); opacity: .85; }
.glow__sheen { mix-blend-mode: normal; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.07) 48%, rgba(255,255,255,.02) 51%, transparent 57%); }
.glow__spot { mix-blend-mode: normal; background: radial-gradient(circle, rgba(255,255,255,.06), rgba(255,255,255,0) 60%); }
.glow__grain { mix-blend-mode: normal; opacity: .05; }
.cv > .glow { contain: strict; }

/* ---------- Index: Hover in der Farbe der jeweiligen Seite ---------- */
.index__list button:hover .t, .index__list button:focus-visible .t { color: var(--ic, var(--acid)); }
.index__list button .t svg { fill: var(--ic, var(--acid)); }
.index__list button:hover .n, .index__list button:focus-visible .n { color: var(--ic, var(--vhs)); }
.index__sticker { background: var(--ic, var(--acid)); }
.index__pop img { border-color: var(--paper); box-shadow: 0 24px 50px rgba(0,0,0,.6), 0 0 0 3px var(--ic, transparent); }
/* v5: Schatten sind in die Bilder eingebacken (layout "shadow":1) – kein Live-Filter mehr */
.el img.art { filter: none; }
.el.doodle3d img.art { filter: drop-shadow(0 0 8px rgba(255,190,210,.55)); }
.el[data-drag].is-lifted img.art { filter: none; }

/* ---------- v7 ---------- */
/* Seite 9: nur noch „Kontakt ↓“, mittig */
.thanks-cta { justify-content: center; }
/* Werdegang: Kärtchen zoomen beim Überfahren */
.chip { transition: transform .3s cubic-bezier(.3,1.6,.5,1), box-shadow .3s; position: relative; }
.chip:hover { transform: rotate(0) scale(1.18); z-index: 2; box-shadow: 0 14px 26px rgba(0,0,0,.55); }
@media (hover: none) { .chip:active { transform: rotate(0) scale(1.12); } }
/* Kontakt: Farbwechsel durch die Seitenfarben, solange der Zeiger drauf ist */
@keyframes rainbow {
  0% { color: #7ff5d4; } 14% { color: #ff6b8b; } 28% { color: #ff2d8a; } 42% { color: #ff4d4d; }
  57% { color: #ff9a3c; } 71% { color: #d7f23a; } 85% { color: #3fa9f5; } 100% { color: #c45bff; }
}
.contact__big:hover, .contact__big:focus-visible { animation: rainbow 2.4s linear infinite alternate; }
/* Hinweis-Zettel unter den Bedienknöpfen */
.tip {
  position: fixed; z-index: 140; max-width: min(300px, calc(100vw - 24px)); padding: 16px 40px 12px 16px;
  background: var(--paper) url("../assets/img/tex_paper.webp") center / cover; background-blend-mode: multiply; color: var(--ink);
  font-family: var(--f-hand); font-size: 22px; line-height: 1.15; transform: rotate(-1.5deg);
  box-shadow: 0 12px 24px rgba(0,0,0,.55);
  clip-path: polygon(0 4%, 12% 0, 30% 3%, 52% 0, 74% 2%, 100% 0, 98% 52%, 100% 100%, 70% 97%, 44% 100%, 20% 96%, 0 100%, 2% 50%);
}
.tip p { margin: 0; } .tip b { font-family: var(--f-vhs); font-weight: 400; font-size: 24px; background: var(--acid); padding: 0 4px; }
.tip__tape { position: absolute; left: calc(var(--ax, 50%) - 34px); top: -6px; width: 68px; height: 18px; background: rgba(233,215,160,.85); transform: rotate(-4deg); }
.tip__x { position: absolute; right: 8px; top: 8px; font-family: var(--f-vhs); font-size: 20px; color: var(--ink); background: none; border: 0; padding: 2px 6px; cursor: pointer; }
.osd__btn.is-hinted { animation: hintpulse 1s ease-in-out infinite; }
@keyframes hintpulse { 50% { box-shadow: 0 0 0 3px var(--acid), 0 0 18px var(--acid); } }
@media (prefers-reduced-motion: reduce) { .osd__btn.is-hinted { animation: none; box-shadow: 0 0 0 3px var(--acid); } }

/* =========================================================
   v8 · Handy und Tablet (Klasse .lite = Touch-Gerät, gesetzt in main.js)
   Gleicher Look, weniger Rechenlast: keine Live-Unschärfen und -Schatten auf bewegten Ebenen,
   kleinere Kornfläche, Seiten außerhalb des Bildschirms werden nicht gezeichnet.
   ========================================================= */
.lite .grain { inset: -12%; }
.lite .glow__b { filter: none; opacity: .7; }                 /* Verläufe sind schon weich, Blur kostete pro Bild ~60 % */
.lite .el.doodle3d img.art, .lite .el.doodle img.art { filter: none; }
.lite .page.is-hot .el .par { will-change: auto; }            /* ohne Maus-Parallax keine eigenen Grafikebenen nötig */
.lite.is-narrow .page { content-visibility: auto; contain-intrinsic-size: auto 100vw auto var(--ph, 100vh); }
.lite .contact__big:hover { animation: none; }
/* v8: Rechtliches */
.foot__l { display: grid; gap: 10px; }
.foot .legal { color: #cfc6d2; }
.index__legal { margin-top: 26px; color: var(--muted); }

/* =========================================================
   v8.1 · Bedienknöpfe oben rechts im Stil des Krepp-Etiketts oben links
   Malerkrepp mit Marker-Schrift + schwarzes VHS-Schildchen (Zustand). Riss-Form innen (.tp), Schatten außen
   (clip-path würde einen Schatten am selben Element abschneiden).
   ========================================================= */
.osd__btn {
  padding: 0; border: 0; background: none; color: var(--paper-ink); text-shadow: none; text-transform: none; letter-spacing: 0;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,.45)); transform: rotate(var(--rot, -2deg));
  transition: transform .45s cubic-bezier(.2,1.4,.4,1), filter .3s;
}
.osd__btn[aria-pressed="true"], .osd__snd[aria-pressed="true"], #btnMotion[aria-pressed="true"] { background: none; color: var(--paper-ink); text-decoration: none; }
.osd__snd { --rot: -2.5deg; } .osd__mot { --rot: 1.6deg; } .osd__idx { --rot: -1.2deg; }
.tp {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px 6px 12px;
  background: #e6dac0 url("../assets/img/tex_paper.webp") center / 220px; background-blend-mode: multiply;
  clip-path: polygon(0 10%, 4% 0, 100% 4%, 96% 24%, 100% 46%, 96% 66%, 100% 88%, 97% 100%, 2% 96%, 4% 76%, 0 56%, 4% 34%);
}
.osd__mot .tp { clip-path: polygon(3% 0, 98% 6%, 100% 30%, 96% 52%, 100% 74%, 98% 100%, 0 94%, 3% 72%, 0 48%, 4% 24%); }
.osd__idx .tp { clip-path: polygon(0 6%, 97% 0, 100% 22%, 96% 44%, 100% 66%, 96% 86%, 99% 100%, 3% 100%, 0 80%, 4% 58%, 0 36%, 3% 16%); }
.tp__lbl { font-family: var(--f-mark); font-size: 19px; line-height: 1; white-space: nowrap; color: #1a1416; }
.tp__tag {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px 2px; background: #111; color: #f4f1ea;
  font-family: var(--f-vhs); font-size: 15px; letter-spacing: .1em; text-transform: uppercase; line-height: 1;
}
.tp__tag i { font-style: normal; color: var(--accent); }
.tp__tag em { font-style: normal; }
.tp__tag .eq { height: 12px; color: var(--accent); }
/* Zustand: ON/OFF bzw. AN/AUS, durchgestrichenes Etikett wenn aus */
.osd__btn .st-off { display: none; }
.osd__snd[aria-pressed="false"] .st-on, #btnMotion[aria-pressed="true"] .st-on { display: none; }
.osd__snd[aria-pressed="false"] .st-off, #btnMotion[aria-pressed="true"] .st-off { display: inline; color: #ff4d4d; }
.osd__snd[aria-pressed="false"] .tp__lbl, #btnMotion[aria-pressed="true"] .tp__lbl { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: #c1272d; }
#btnMotion[aria-pressed="true"] .tp__tag i { color: #777; }
/* Hover/Fokus wie das Namens-Etikett: gerade ziehen, anheben, Schildchen leuchtet in der Seitenfarbe */
.osd__btn:hover, .osd__btn:focus-visible, .osd__btn[aria-expanded="true"] { transform: rotate(0deg) translateY(2px) scale(1.06); outline: none; }
.osd__btn:hover .tp__tag, .osd__btn:focus-visible .tp__tag, .osd__btn[aria-expanded="true"] .tp__tag { background: var(--accent); color: #0d0b0e; }
.osd__btn:hover .tp__tag i, .osd__btn:focus-visible .tp__tag i, .osd__btn:hover .tp__tag .eq, .osd__btn:focus-visible .tp__tag .eq, .osd__btn[aria-expanded="true"] .tp__tag .eq { color: #0d0b0e; }
.osd__btn:focus-visible { filter: drop-shadow(0 0 0 #000) drop-shadow(0 0 3px var(--acid)) drop-shadow(0 6px 8px rgba(0,0,0,.45)); }
.osd__btn:hover .tp__tag i { animation: rew .5s steps(2) infinite; }
.osd__btn:active { transform: rotate(0deg) translateY(4px) scale(.98); transition-duration: .1s; }
/* Hinweis-Puls (v7) jetzt als Leuchten um das Krepp */
.osd__btn.is-hinted { animation: hintglow 1s ease-in-out infinite; }
@keyframes hintglow { 50% { filter: drop-shadow(0 0 2px var(--acid)) drop-shadow(0 0 12px var(--acid)); } }
@media (prefers-reduced-motion: reduce) { .osd__btn.is-hinted { animation: none; filter: drop-shadow(0 0 3px var(--acid)); } }
.reduced .osd__btn.is-hinted { animation: none; filter: drop-shadow(0 0 3px var(--acid)); }
.osd__btns { gap: 10px; align-items: center; }
@media (max-width: 640px) {
  .osd__btns { gap: 6px; }
  .tp { padding: 5px 7px 5px 9px; gap: 5px; }
  .tp__lbl { font-size: 14px; }
  .tp__tag { font-size: 12px; padding: 2px 5px 1px; }
  .osd__snd .tp__lbl { display: none; }                 /* Sound: nur Schildchen mit EQ + ON/OFF */
  .osd__mot .tp__tag, .osd__idx .tp__tag { display: none; }
  .osd__mot .tp__lbl::after { content: ""; }
}