/* ============================================================
   PIXEL & PAPER — Duo-Intro  ·  duo.css
   Eine bewusst dunkle, kinoartige Seite (eigenständiger Look,
   kein Theme-Switch). Paper = anydoors-Branding (Orange auf
   Petrol), Pixel = Phosphor-Lila.
   ============================================================ */

:root {
  --ground: #15161d;
  --wall-hi: #24252f;
  --ad-orange: #ff9933;
  --ad-orange-deep: #cc7a29;
  --ad-petrol: #2d5a5c;
  --violet: #b48cff;
  --violet-deep: #8b5cf6;
  --world-paper: #16302f;
  --world-pixel: #1a1526;
  --paper-w: #ece7dc;
  --mute: #94919f;
  --hair: rgba(236, 231, 220, .12);
  --display: "Rockwell", "Roboto Slab", "Bookman Old Style", "Georgia", serif;
  --body: "Avenir Next", "Avenir", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: auto; }
body {
  background: var(--ground);
  color: var(--paper-w);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-x: hidden;
}
::selection { background: var(--ad-orange); color: #1a1206; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img { max-width: 100%; }

.home {
  position: fixed; top: 1.2rem; left: 1.4rem; z-index: 50;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--mute); text-decoration: none;
  padding: .4rem .8rem; border: 1px solid var(--hair); border-radius: 999px;
  background: rgba(21, 22, 29, .55); backdrop-filter: blur(6px);
  transition: color .2s ease, border-color .2s ease;
}
.home:hover { color: var(--paper-w); border-color: rgba(236, 231, 220, .4); }

/* ================= PROLOG (wird von ScrollTrigger gepinnt) ================= */
#prolog { position: relative; height: 100vh; height: 100svh; }
.stage {
  position: relative; height: 100vh; height: 100svh; overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% -10%, var(--wall-hi) 0%, var(--ground) 62%),
    var(--ground);
}
.stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.014) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}

.name {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  font-family: var(--display); font-weight: 800;
  /* Minimum klein genug, damit das Lockup PIXEL & PAPER auch auf
     schmalen Displays in eine Zeile passt */
  font-size: clamp(1.9rem, 8.5vw, 7.5rem);
  letter-spacing: .045em; line-height: 1; white-space: nowrap;
  will-change: transform, opacity; user-select: none;
}
#namePixel { color: var(--violet); text-shadow: 0 0 14px rgba(180,140,255,.55), 0 0 60px rgba(139,92,246,.3); }
#namePaper { color: var(--ad-orange); text-shadow: 0 0 14px rgba(255,153,51,.6), 0 0 60px rgba(255,153,51,.28); }

/* & sitzt auf derselben Baseline und in derselben Größenordnung wie
   die Namen — die Lücke im Lockup wird in main.js exakt vermessen */
#amp {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  transform: translate(-50%, -50%) scale(0);
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2.1rem, 9.6vw, 8.4rem);
  line-height: 1;
  color: var(--paper-w);
  text-shadow: 0 0 18px rgba(236,231,220,.7), 0 0 90px rgba(255,153,51,.45), 0 0 90px rgba(139,92,246,.4);
  user-select: none;
}
#amp.pop { animation: ampPop .55s cubic-bezier(.2, 1.6, .4, 1) forwards; }
@keyframes ampPop {
  0%   { transform: translate(-50%, -50%) scale(0); }
  62%  { transform: translate(-50%, -50%) scale(1.28); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
#amp.gone { transition: transform .25s ease, opacity .2s ease; transform: translate(-50%, -50%) scale(0); opacity: 0; }

.shockwave {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid rgba(236,231,220,.8);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0; pointer-events: none;
}
.shockwave.go { animation: rwave .9s ease-out forwards; }
@keyframes rwave { 0% { transform: translate(-50%,-50%) scale(1); opacity: .9; } 100% { transform: translate(-50%,-50%) scale(60); opacity: 0; } }

/* Greller Lichtblitz beim Zusammentreffen — der Moment, in dem der Riss entsteht */
.flash {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 2;
  background: radial-gradient(65% 65% at 50% 50%, rgba(255,252,244,.95), rgba(236,231,220,.35) 55%, transparent 75%);
}
.flash.go { animation: rflash .5s ease-out forwards; }
@keyframes rflash { 0% { opacity: 1; } 100% { opacity: 0; } }

canvas.fx2d { position: absolute; inset: 0; z-index: 2; pointer-events: none; width: 100%; height: 100%; }
canvas.rift { position: absolute; inset: 0; z-index: 4; pointer-events: none; width: 100%; height: 100%; }

.scrollcue {
  position: absolute; left: 50%; bottom: 4.5vh; transform: translateX(-50%); z-index: 5;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .3em;
  text-transform: uppercase; color: var(--mute);
  opacity: 0; transition: opacity .6s ease;
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
}
.scrollcue.show { opacity: 1; }
.scrollcue::after {
  content: ""; width: 1px; height: 34px;
  background: linear-gradient(var(--mute), transparent);
  animation: cueDrop 1.6s ease-in-out infinite;
}
@keyframes cueDrop { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(8px); opacity: .4; } }

/* ================= RISS-ZONEN ================= */
.riftzone { position: relative; height: 100vh; height: 100svh; }
.rift-stage { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--ground); }
.world-out { position: absolute; inset: 0; will-change: transform, opacity; }
#rift2 .world-out { background: radial-gradient(90% 70% at 50% 0%, rgba(255,153,51,.08), transparent 55%), var(--ground); }
#rift3 .world-out { background: radial-gradient(90% 70% at 50% 0%, rgba(139,92,246,.09), transparent 55%), var(--ground); }

.world-word {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(3rem, 14vw, 11rem);
  letter-spacing: .06em; opacity: 0; user-select: none; white-space: nowrap;
  will-change: opacity;
}
#rift2 .world-word { color: var(--violet); text-shadow: 0 0 40px rgba(139,92,246,.55); }
#rift3 .world-word {
  font-size: clamp(1.8rem, 7.5vw, 6rem);
  background: linear-gradient(90deg, var(--violet), var(--paper-w), var(--ad-orange));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* PAPER-Wort im Prolog-Riss (gleiche Rolle wie PIXEL in Riss 2) */
#prolog .world-word {
  color: var(--ad-orange);
  text-shadow: 0 0 40px rgba(255,153,51,.5);
  z-index: 5;
}

/* ================= KAPITEL ================= */
.chapter { position: relative; padding: 14vh 6vw; }
.chapter-inner { max-width: 66rem; margin: 0 auto; }
.chapter.paper { background: linear-gradient(180deg, var(--world-paper), #14201f 45%, var(--ground)); }
.chapter.pixel { background: linear-gradient(180deg, var(--world-pixel), #171322 45%, var(--ground)); }

.eyebrow {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .32em;
  text-transform: uppercase; color: var(--mute);
  display: flex; align-items: center; gap: 1rem; margin-bottom: 1.6rem;
}
.eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--hair); }
.paper .eyebrow strong { color: var(--ad-orange); font-weight: 600; }
.pixel .eyebrow strong { color: var(--violet); font-weight: 600; }

.chapter h2 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  letter-spacing: .04em; line-height: 1.05;
  text-wrap: balance; margin-bottom: .5rem;
}
.paper h2 { color: var(--ad-orange); text-shadow: 0 0 30px rgba(255,153,51,.25); }
.pixel h2 { color: var(--violet); text-shadow: 0 0 30px rgba(139,92,246,.28); }
/* SplitText-Chars erben die Farbe; overflow-Maske für den Reveal */
.chapter h2 .st-char { display: inline-block; will-change: transform; }

.role { font-family: var(--mono); font-size: .95rem; color: var(--paper-w); letter-spacing: .08em; margin-bottom: 2.2rem; }
.badge-ihk {
  display: inline-block; padding: .12rem .55rem; margin: 0 .15rem;
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--violet); border: 1px solid rgba(180,140,255,.45);
  border-radius: 3px; vertical-align: middle;
}

.bio-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 2.5rem; align-items: start; margin-bottom: 1rem; }
.bio p { margin-bottom: 1.1rem; }
.bio em { color: var(--mute); font-style: normal; }
.bio .facts { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.4rem; }
.bio .facts li {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .08em;
  padding: .3rem .7rem; border: 1px solid var(--hair); border-radius: 999px; color: var(--mute);
}
.pixel .bio .facts li { border-color: rgba(180,140,255,.3); }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2.4rem; }
.stat { border-left: 2px solid rgba(255,153,51,.45); padding: .2rem 0 .2rem 1rem; }
.stat strong {
  display: block; font-family: var(--display); font-weight: 800;
  font-size: clamp(1.5rem, 3.4vw, 2.3rem); line-height: 1.1;
  color: var(--ad-orange); font-variant-numeric: tabular-nums;
}
.stat span { font-size: .8rem; color: var(--mute); letter-spacing: .04em; }

.portrait {
  aspect-ratio: 4 / 5; border-radius: 8px; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  border: 1px dashed rgba(236,231,220,.3);
  font-family: var(--mono); font-size: .72rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--mute); text-align: center; padding: 1rem;
}
.portrait svg { width: 72px; height: 72px; opacity: .45; }
.paper .portrait { background: linear-gradient(160deg, rgba(45,90,92,.35), rgba(255,153,51,.08)); }
.pixel .portrait { background: linear-gradient(160deg, rgba(139,92,246,.18), rgba(180,140,255,.06)); }
.portrait .hint { letter-spacing: .1em; opacity: .8; max-width: 14rem; line-height: 1.7; }

.groupshot {
  aspect-ratio: 16 / 7; max-width: 46rem; margin: 0 auto 3rem;
  border-radius: 8px; border: 1px dashed rgba(236,231,220,.3);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem;
  background: linear-gradient(120deg, rgba(139,92,246,.14), rgba(21,22,29,.2) 50%, rgba(255,153,51,.14));
  font-family: var(--mono); font-size: .72rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--mute); text-align: center; padding: 1rem;
}
.groupshot svg { width: 84px; height: 60px; opacity: .45; }

/* Karten */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin: 2.6rem 0; }
.card {
  border: 1px solid var(--hair); border-radius: 6px;
  padding: 1.3rem 1.4rem; text-decoration: none; display: block;
  background: rgba(255,255,255,.02);
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.card:hover { transform: translateY(-3px); background: rgba(255,255,255,.04); }
.paper .card:hover { border-color: rgba(255,153,51,.55); }
.pixel .card:hover { border-color: rgba(180,140,255,.55); }
.card .tag { font-family: var(--mono); font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; color: var(--mute); display: block; margin-bottom: .55rem; }
.card strong { font-size: 1.05rem; font-weight: 600; letter-spacing: .01em; }
.card span.sub { display: block; color: var(--mute); font-size: .88rem; margin-top: .4rem; line-height: 1.5; }
.card .arrow { font-family: var(--mono); font-size: .8rem; margin-top: .8rem; display: block; }
.paper .card .arrow { color: var(--ad-orange); }
.pixel .card .arrow { color: var(--violet); }
.card .price {
  display: inline-block; margin-top: .6rem; font-family: var(--mono);
  font-size: .72rem; letter-spacing: .1em; color: var(--ad-orange);
  border: 1px solid rgba(255,153,51,.35); border-radius: 3px; padding: .1rem .5rem;
}

/* ================= SKILL-PANELS (Game-HUD) ================= */
.panel {
  position: relative;
  border: 1px solid var(--hair); border-radius: 4px;
  padding: 1.9rem 2rem 1.5rem; margin: 2.4rem 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 30%),
    rgba(0,0,0,.28);
}
.panel::before, .panel::after { content: ""; position: absolute; width: 16px; height: 16px; pointer-events: none; }
.panel::before { top: -1px; left: -1px; border-top: 2px solid; border-left: 2px solid; }
.panel::after { bottom: -1px; right: -1px; border-bottom: 2px solid; border-right: 2px solid; }
.paper .panel::before, .paper .panel::after { border-color: rgba(255,153,51,.6); }
.pixel .panel::before, .pixel .panel::after { border-color: rgba(180,140,255,.6); }
.fusion.panel::before, .fusion.panel::after { border-color: rgba(236,231,220,.55); }

.panel h3 {
  font-family: var(--mono); font-size: .78rem; letter-spacing: .3em;
  text-transform: uppercase; color: var(--mute); margin-bottom: 1.6rem;
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  font-weight: 400;
}
.panel h3 .t::before { content: "✦ "; }
.paper .panel h3 .t::before { color: var(--ad-orange); }
.pixel .panel h3 .t::before { color: var(--violet); }
.fusion h3 .t::before { color: var(--paper-w); }
.panel h3 .max { font-size: .68rem; letter-spacing: .12em; }

.skill { display: grid; grid-template-columns: 12.5rem 1fr 3rem; gap: 1.1rem; align-items: center; padding: .62rem 0; }
.skill + .skill { border-top: 1px dashed rgba(236,231,220,.07); }
.skill .label { font-size: .95rem; letter-spacing: .02em; }
.skill .label small { display: block; color: var(--mute); font-size: .74rem; letter-spacing: .04em; }

.barwrap { display: flex; flex-direction: column; gap: 5px; }
.bar { display: flex; gap: 5px; height: 15px; }
.bar i {
  flex: 1; border-radius: 2px;
  border: 1px solid rgba(236,231,220,.16);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.2));
  transform: skewX(-16deg) scaleY(.6); opacity: .45;
  transition: transform .3s cubic-bezier(.2,1.4,.4,1), opacity .2s ease;
}
.skill.fill .bar i.on {
  transform: skewX(-16deg) scaleY(1); opacity: 1; border-color: transparent;
  animation: cellFlash .38s ease-out;
}
@keyframes cellFlash { 0% { filter: brightness(2.4) saturate(1.4); } 100% { filter: brightness(1); } }
.paper .skill.fill .bar i.on {
  background: linear-gradient(180deg, #ffc985, #e08a2e 55%, #a35f1a);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 0 10px rgba(255,153,51,.55);
}
.pixel .skill.fill .bar i.on {
  background: linear-gradient(180deg, #dcc4ff, #8b5cf6 55%, #5f3dc4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 0 10px rgba(139,92,246,.5);
}
.skill:hover .bar i.on { filter: brightness(1.15); }

.scale {
  height: 4px; opacity: .5;
  background-image: repeating-linear-gradient(90deg,
    rgba(236,231,220,.35) 0 1px, transparent 1px calc(10% + 0.001px));
  background-size: calc(100% + 1px) 100%;
}

.numwrap { display: flex; justify-content: flex-end; }
.num {
  width: 2.7rem; height: 2rem;
  clip-path: polygon(22% 0, 78% 0, 100% 50%, 78% 100%, 22% 100%, 0 50%);
  background: rgba(255,255,255,.05);
  box-shadow: inset 0 0 0 1px rgba(236,231,220,.22);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: .92rem; font-weight: 600;
}
.paper .num { color: var(--ad-orange); }
.pixel .num { color: var(--violet); }
.skill.maxed .num { color: #1a1206; box-shadow: none; }
.paper .skill.maxed .num { background: linear-gradient(180deg, #ffc985, #e08a2e); }
.pixel .skill.maxed .num { background: linear-gradient(180deg, #dcc4ff, #8b5cf6); color: #14091f; }
.paper .skill.maxed .numwrap { filter: drop-shadow(0 0 9px rgba(255,153,51,.75)); }
.pixel .skill.maxed .numwrap { filter: drop-shadow(0 0 9px rgba(139,92,246,.75)); }

.trait .bar { height: 10px; }
.trait .label small { font-size: .7rem; }

/* ================= FINALE ================= */
.finale {
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 16vh 6vw 12vh;
  background:
    radial-gradient(60% 50% at 50% 40%, rgba(139,92,246,.09), transparent 70%),
    radial-gradient(60% 50% at 50% 60%, rgba(255,153,51,.08), transparent 70%),
    var(--ground);
}
.finale h2 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2.2rem, 6.5vw, 5rem); letter-spacing: .04em; margin-bottom: 1rem;
}
.finale h2 .px { color: var(--violet); text-shadow: 0 0 20px rgba(139,92,246,.45); }
.finale h2 .pp { color: var(--ad-orange); text-shadow: 0 0 20px rgba(255,153,51,.45); }
.finale h2 .and { color: var(--paper-w); }
.finale > div > p { max-width: 38rem; margin: 0 auto 2.6rem; color: var(--mute); }

/* Gemeinsam gebaut: Beleg-Karten im Finale */
.collab-title {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .32em;
  text-transform: uppercase; color: var(--mute); margin-bottom: 1.2rem;
}
.collab-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem; max-width: 24rem; margin: 0 auto 3.4rem; text-align: left;
}
.finale .card:hover { border-color: rgba(236,231,220,.45); }
.finale .card .arrow {
  background: linear-gradient(90deg, var(--violet), var(--ad-orange));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.fusion { max-width: 34rem; margin: 0 auto 3.4rem; text-align: left; }
.fusion h3 span.badge {
  font-size: .68rem; letter-spacing: .2em; color: #1a1206;
  background: linear-gradient(90deg, #c9a6ff, #ffb45e);
  border-radius: 3px; padding: .2rem .55rem;
}
.fusion .skill { grid-template-columns: 10.5rem 1fr 3rem; }
.fusion .num { color: var(--paper-w); }
.fusion .skill.fill .bar i.on {
  background: linear-gradient(90deg, #9d78e8, #d99b52);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 0 8px rgba(255,153,51,.35), 0 0 8px rgba(139,92,246,.3);
}
.fusion .skill.maxed .num { background: linear-gradient(90deg, #c9a6ff, #ffb45e); color: #1a1206; }
.fusion .skill.maxed .numwrap { filter: drop-shadow(0 0 9px rgba(236,231,220,.6)); }

/* CTA */
.cta-panel {
  position: relative; max-width: 40rem; margin: 0 auto;
  padding: 3rem 2.6rem 2.6rem; border-radius: 14px;
  border: 1px solid transparent;
  background:
    linear-gradient(#121218, #121218) padding-box,
    linear-gradient(120deg, var(--violet-deep), rgba(236,231,220,.25) 50%, var(--ad-orange)) border-box;
  overflow: hidden;
}
.cta-panel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(50% 60% at 12% 20%, rgba(139,92,246,.16), transparent 70%),
    radial-gradient(50% 60% at 88% 80%, rgba(255,153,51,.14), transparent 70%);
}
.cta-panel h3 {
  position: relative;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.4rem, 3.4vw, 2rem); letter-spacing: .03em;
  margin-bottom: .7rem; text-wrap: balance;
}
.cta-panel .lead { position: relative; color: var(--mute); font-size: .98rem; margin-bottom: 2rem; }
.cta {
  position: relative; display: inline-flex; align-items: center; gap: .8rem;
  font-weight: 600; font-size: 1.05rem; letter-spacing: .04em;
  text-decoration: none; color: #fff;
  background: linear-gradient(90deg, var(--violet-deep), var(--ad-orange));
  padding: 1.05rem 2.6rem; border-radius: 999px;
  box-shadow: 0 0 26px rgba(139,92,246,.35), 0 0 26px rgba(255,153,51,.3), inset 0 1px 0 rgba(255,255,255,.35);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.cta .ar { font-family: var(--mono); transition: transform .18s ease; }
.cta::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 32%, rgba(255,255,255,.35) 50%, transparent 68%);
  transform: translateX(-130%);
}
.cta:hover { transform: translateY(-2px); box-shadow: 0 0 40px rgba(139,92,246,.5), 0 0 40px rgba(255,153,51,.45), inset 0 1px 0 rgba(255,255,255,.35); }
.cta:hover .ar { transform: translateX(4px); }
.cta:hover::after { animation: sweep .8s ease forwards; }
@keyframes sweep { to { transform: translateX(130%); } }
.cta-sub { position: relative; font-family: var(--mono); font-size: .76rem; letter-spacing: .12em; color: var(--mute); margin-top: 1.3rem; line-height: 1.9; }

footer {
  padding: 3rem 6vw 4rem; text-align: center;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--mute);
}

/* Reveals (werden von GSAP animiert; Startzustand hier) */
.rv { opacity: 0; transform: translateY(26px); }
body.reduced .rv, body.no-js .rv { opacity: 1; transform: none; }

/* CSS-Scroll-Timeline-Bonus: sanfte Portrait-Parallaxe, läuft auf dem
   Compositor, rein progressive enhancement (Chrome/Edge/Safari). */
@supports (animation-timeline: view()) {
  .portrait, .groupshot {
    animation: drift linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }
  @keyframes drift {
    from { translate: 0 28px; }
    to   { translate: 0 -28px; }
  }
}

@media (max-width: 720px) {
  .bio-grid { grid-template-columns: 1fr; }
  .portrait { max-width: 18rem; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .skill, .fusion .skill { grid-template-columns: 1fr; gap: .5rem; }
  .numwrap { justify-content: flex-start; }
  .chapter { padding: 12vh 7vw; }
  .panel { padding: 1.4rem 1.1rem 1.1rem; }
  .cta-panel { padding: 2.2rem 1.3rem 2rem; }
  .cta { padding: 1rem 1.6rem; font-size: .95rem; }
  .home { top: .8rem; left: .8rem; font-size: .64rem; }
}

/* Reduzierte Bewegung: alles statisch, Risse aus */
@media (prefers-reduced-motion: reduce) {
  .riftzone, canvas.rift, canvas.fx2d { display: none; }
  .rv { opacity: 1; transform: none; }
  .scrollcue::after, .bar i, .card, .cta { animation: none; transition: none; }
}