/* ---------- Grundfarben je Kapitel ---------- */
:root {
  --hero-bg: #12121A;
  --hero-text: #ECEAE3;
  --hero-dim: #9694a0;

  --gaming-bg: #060810;
  --gaming-panel: #0D1220;
  --gaming-line: rgba(51, 231, 255, .14);
  --gaming-text: #E8F6FF;
  --gaming-dim: #6C7A8C;
  --gaming-cyan: #33E7FF;
  --gaming-magenta: #C264FF;
  --gaming-amber: #FFB020;

  --proj-bg: #101E1B;
  --proj-bg-soft: #16302B;
  --proj-panel: #17302C;
  --proj-line: rgba(160, 214, 198, .18);
  --proj-text: #ECE6D9;
  --proj-dim: #8FA69C;
  --proj-accent: #4FC9B0;
  --proj-accent-2: #E3A34E;

  --cycling-paper: #F6F3EC;
  --cycling-paper-soft: #EFEADF;
  --cycling-ink: #232922;
  --cycling-dim: #767065;
  --cycling-clay: #D45A22;
  --cycling-moss: #5C7A52;
  --cycling-line: #DAD3C2;

  --raya-paper: #FAF7F2;
  --raya-ink: #2B2A26;
  --raya-dim: #8B8577;
  --raya-blush: #C98572;
  --raya-line: #E9E2D4;

  --ub-deep: #1a0a2e;
  --ub-mid: #2d1155;
  --ub-purple-card: #3a1868;
  --ub-gold: #ffc94a;
  --ub-gold-bright: #ffe08a;
  --ub-pink: #ff3ea5;
  --ub-cream: #fff8ec;
}

body { background: var(--hero-bg); }

/* ---------- Farb-Pulsschlag beim Kapitelwechsel ---------- */
.theme-pulse {
  position: fixed;
  inset: 0;
  z-index: 45;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--pulse-color, #33E7FF) 55%, transparent) 0%, transparent 65%);
}
.theme-pulse.is-pulsing { animation: theme-pulse-anim .9s ease-out; }
@keyframes theme-pulse-anim {
  0%   { opacity: 0; }
  12%  { opacity: .4; }
  100% { opacity: 0; }
}

/* ---------- Partikelfeld je Sektion ---------- */
/* Liegt IN der jeweiligen .story-Sektion (position: absolute, nicht fixed) und
   scrollt dadurch mit der Seite mit statt als Bildschirm-Overlay stehen zu bleiben —
   soll wirken, als läge das Feld auf der Website, nicht auf dem Viewport. Über allen
   Sektions-Hintergründen/Deko (z-index 0/1), aber unter dem lesbaren Inhalt
   (.story-inner, z-index 3). Wird per js/particles.js mit einem <canvas> befüllt; ohne
   JS oder bei prefers-reduced-motion bleibt der Container leer und unsichtbar. Nur in
   #hero, #gaming und #unbesiegbar eingebunden (siehe index.html), nicht bei Radfahren/Raya. */
.section-particles {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* ---------- Quicknav ---------- */
.quicknav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.6rem;
  backdrop-filter: blur(10px);
  background: rgba(18,18,26,.55);
  color: var(--hero-text);
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: background-color .5s ease, color .5s ease, border-color .5s ease;
}
.qn-logo { font-family: "Fraunces", serif; font-weight: 600; font-size: .95rem; }
.qn-links { display: flex; gap: 1.4rem; }
.qn-links a {
  position: relative;
  font-size: .82rem;
  font-weight: 500;
  opacity: .65;
  display: flex; align-items: center; gap: .45rem;
  transition: opacity .2s ease;
}
.qn-links a:hover { opacity: 1; }
.qn-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  opacity: .5;
  transition: opacity .2s ease, transform .2s ease;
}
.qn-links a.is-active { opacity: 1; }
.qn-links a.is-active .qn-dot { opacity: 1; transform: scale(1.4); }

.qn-progress {
  position: absolute;
  left: 0; bottom: -1px;
  height: 2px;
  width: var(--progress, 0%);
  background: currentColor;
  opacity: .55;
  transition: width .12s linear, background-color .5s ease;
}

.quicknav[data-theme="gaming"] {
  background: rgba(6,8,16,.7);
  border-color: var(--gaming-line);
  color: var(--gaming-text);
}
.quicknav[data-theme="gaming"] a.is-active { color: var(--gaming-cyan); }

.quicknav[data-theme="projects"] {
  background: rgba(16,30,27,.75);
  border-color: var(--proj-line);
  color: var(--proj-text);
}
.quicknav[data-theme="projects"] a.is-active { color: var(--proj-accent); }

.quicknav[data-theme="cycling"] {
  background: rgba(246,243,236,.82);
  border-color: var(--cycling-line);
  color: var(--cycling-ink);
}
.quicknav[data-theme="cycling"] a.is-active { color: var(--cycling-clay); }

.quicknav[data-theme="raya"] {
  background: rgba(250,247,242,.82);
  border-color: var(--raya-line);
  color: var(--raya-ink);
}
.quicknav[data-theme="raya"] a.is-active { color: var(--raya-blush); }

.quicknav[data-theme="unbesiegbar"] {
  background: rgba(26,10,46,.75);
  border-color: rgba(255,201,74,.3);
  color: var(--ub-cream);
}
.quicknav[data-theme="unbesiegbar"] a.is-active { color: var(--ub-gold); }

/* ---------- Side-Nav (Desktop): Kapitel-"Walze" links, scrollt mit ---------- */
/* Nur ab 960px, darunter reicht die Quicknav oben. Fixed statt absolute, damit sie
   beim Scrollen an derselben Bildschirmposition bleibt. Statt einer schlichten
   Linkliste stehen die Kapitel wie auf einer liegenden Walze/einem Datumsrädchen:
   .side-wheel ist der Drehpunkt, jeder <a> wird per JS (updateSideWheel in
   landing.js) anhand seines Abstands zum aktiven Kapitel per Sinus/Kosinus
   positioniert — vorne (aktiv) groß und deckend, weiter weg kleiner, blasser und
   nach links Richtung "Walzeninneres" verschoben. So wirkt es beim Scrollen, als
   rolle die Liste durch, während das aktuelle Kapitel immer vorne steht. */
.side-nav {
  display: none;
}
@media (min-width: 960px) {
  .side-nav {
    display: block;
    position: fixed;
    left: 2rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 90;
    height: 440px;
    width: 220px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 6%, black 94%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 6%, black 94%, transparent 100%);
    pointer-events: none;
  }
}
.side-wheel {
  position: relative;
  height: 100%;
}
.side-nav a {
  position: absolute;
  left: 0;
  top: 50%;
  display: flex;
  align-items: center;
  gap: .7rem;
  white-space: nowrap;
  font-family: "JetBrains Mono", monospace;
  font-size: 1.05rem;
  letter-spacing: .02em;
  color: var(--hero-text);
  opacity: 0;
  pointer-events: auto;
  transform-origin: left center;
  transition: transform .55s cubic-bezier(.16,.84,.44,1), opacity .5s ease, color .5s ease;
  will-change: transform, opacity;
}
.side-nav a::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: currentColor;
  opacity: .5;
  flex-shrink: 0;
  transition: opacity .3s ease, box-shadow .3s ease;
}
.side-nav a.is-active {
  font-weight: 600;
}
.side-nav a.is-active::before {
  opacity: 1;
  box-shadow: 0 0 10px currentColor;
}
@media (prefers-reduced-motion: reduce) {
  .side-nav a { transition: opacity .3s ease, color .5s ease; }
}

.side-nav[data-theme="gaming"] a { color: var(--gaming-text); }
.side-nav[data-theme="gaming"] a.is-active { color: var(--gaming-cyan); }
.side-nav[data-theme="projects"] a { color: var(--proj-text); }
.side-nav[data-theme="projects"] a.is-active { color: var(--proj-accent); }
.side-nav[data-theme="cycling"] a { color: var(--cycling-ink); }
.side-nav[data-theme="cycling"] a.is-active { color: var(--cycling-clay); }
.side-nav[data-theme="raya"] a { color: var(--raya-ink); }
.side-nav[data-theme="raya"] a.is-active { color: var(--raya-blush); }
.side-nav[data-theme="unbesiegbar"] a { color: var(--ub-cream); }
.side-nav[data-theme="unbesiegbar"] a.is-active { color: var(--ub-gold); }

/* ---------- Story-Sections: gemeinsames Gerüst ---------- */
.story {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 7rem 1.6rem 5rem;
  position: relative;
  overflow: hidden;
}
.story-inner { max-width: 640px; width: 100%; margin: 0 auto; position: relative; z-index: 3; }

/* ---------- Parallax-Hintergrund je Kapitel ---------- */
.story-bg {
  position: absolute;
  inset: -12% 0;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}

/* ---------- Scroll-Reveal: Inhalte fahren gestaffelt ein ---------- */
.story-inner > * {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .8s cubic-bezier(.16,.84,.44,1), transform .8s cubic-bezier(.16,.84,.44,1);
}
.story-inner.is-visible > * { opacity: 1; transform: translateY(0); }
.story-inner.is-visible > *:nth-child(1) { transition-delay: .05s; }
.story-inner.is-visible > *:nth-child(2) { transition-delay: .16s; }
.story-inner.is-visible > *:nth-child(3) { transition-delay: .27s; }
.story-inner.is-visible > *:nth-child(4) { transition-delay: .38s; }
.story-inner.is-visible > *:nth-child(5) { transition-delay: .48s; }
.story-inner.is-visible > *:nth-child(6) { transition-delay: .58s; }
.story-inner.is-visible > *:nth-child(7) { transition-delay: .68s; }

.story-chips .chip,
.story-photo-preview .preview-tile {
  opacity: 0;
  transform: translateY(14px) scale(.94);
  transition: opacity .55s cubic-bezier(.16,.84,.44,1), transform .55s cubic-bezier(.16,.84,.44,1);
}
.story-inner.is-visible .story-chips .chip,
.story-inner.is-visible .story-photo-preview .preview-tile {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.story-inner.is-visible .story-chips .chip:nth-child(1) { transition-delay: .55s; }
.story-inner.is-visible .story-chips .chip:nth-child(2) { transition-delay: .63s; }
.story-inner.is-visible .story-chips .chip:nth-child(3) { transition-delay: .71s; }
.story-inner.is-visible .story-chips .chip:nth-child(4) { transition-delay: .79s; }
.story-inner.is-visible .story-photo-preview .preview-tile:nth-child(1) { transition-delay: .5s; }
.story-inner.is-visible .story-photo-preview .preview-tile:nth-child(2) { transition-delay: .6s; }
.story-inner.is-visible .story-photo-preview .preview-tile:nth-child(3) { transition-delay: .7s; }

.story-eyebrow {
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 0 0 1rem;
}
.story h2 {
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  margin: 0 0 1rem;
  letter-spacing: -.01em;
}
.story-text { line-height: 1.6; max-width: 520px; margin: 0 0 2.2rem; }
.story-stats { display: flex; gap: 2rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.story-stats > div { display: flex; flex-direction: column; }
.story-cta {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: 2rem;
  font-weight: 600;
  font-size: .9rem;
  padding: .85rem 1.6rem;
  border-radius: 999px;
  border: 1.5px solid currentColor;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), background-color .25s ease, border-color .25s ease, box-shadow .25s ease, color .25s ease;
}
.story-cta i { font-style: normal; transition: transform .25s ease; }
.story-cta:hover i { transform: translateX(4px); }

/* ---------- Hero ---------- */
.story-hero {
  align-items: center;
  text-align: center;
  background: var(--hero-bg);
  color: var(--hero-text);
}
.story-hero .story-bg {
  background-image: radial-gradient(60% 50% at 50% 100%, rgba(51,231,255,.14), transparent 70%),
    radial-gradient(40% 35% at 12% 15%, rgba(194,100,255,.10), transparent 70%);
  animation: hero-glow-shift 14s ease-in-out infinite alternate;
}
@keyframes hero-glow-shift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(0, -2%, 0) scale(1.04); }
}
.hero-particles {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(236,234,227,.5), transparent),
    radial-gradient(1.5px 1.5px at 82% 18%, rgba(51,231,255,.55), transparent),
    radial-gradient(1px 1px at 32% 68%, rgba(236,234,227,.4), transparent),
    radial-gradient(1.5px 1.5px at 68% 78%, rgba(194,100,255,.5), transparent),
    radial-gradient(1px 1px at 92% 55%, rgba(236,234,227,.4), transparent),
    radial-gradient(1px 1px at 6% 82%, rgba(51,231,255,.4), transparent);
  animation: drift 18s ease-in-out infinite alternate;
}
@keyframes drift {
  from { transform: translateY(0); opacity: .8; }
  to   { transform: translateY(-18px); opacity: 1; }
}
.story-hero .story-inner { max-width: 680px; }
.story-hero .eyebrow {
  font-family: "Inter", sans-serif;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hero-dim);
  margin: 0 0 1.2rem;
}
.story-hero h1 {
  font-family: "Fraunces", serif;
  font-weight: 600;
  font-size: clamp(2.8rem, 8vw, 5rem);
  line-height: 1.02;
  margin: 0 0 1.3rem;
  letter-spacing: -.01em;
}
.hero-word { display: inline-block; }
.story-hero .story-inner.is-visible h1 .hero-word {
  animation: word-rise 1s cubic-bezier(.16,.84,.44,1) both;
}
.story-hero .story-inner.is-visible h1 .hero-word:nth-child(2) { animation-delay: .1s; }
@keyframes word-rise {
  from { opacity: 0; transform: translateY(28px) scale(.96); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.story-hero .lede {
  font-family: "Inter", sans-serif;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--hero-dim);
  margin: 0 auto 3rem;
  max-width: 520px;
}
.scroll-cue {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  font-family: "JetBrains Mono", monospace;
  font-size: .74rem;
  color: var(--hero-dim);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.scroll-cue-line {
  width: 1px;
  height: 28px;
  background: linear-gradient(to bottom, var(--gaming-cyan), transparent);
  animation: cue-run 2s ease-in-out infinite;
}
@keyframes cue-run {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 0; }
  40%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  60%  { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* ---------- Gaming-Kapitel ---------- */
.story-gaming {
  background: var(--gaming-bg);
  color: var(--gaming-text);
  font-family: "Chakra Petch", sans-serif;
}
.story-gaming .story-bg {
  background-image:
    linear-gradient(rgba(51,231,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(51,231,255,.06) 1px, transparent 1px),
    radial-gradient(55% 40% at 15% 20%, rgba(194,100,255,.12), transparent 70%),
    radial-gradient(45% 35% at 90% 85%, rgba(51,231,255,.08), transparent 70%);
  background-size: 42px 42px, 42px 42px, auto, auto;
}
.story-scanlines {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.02) 0px, rgba(255,255,255,.02) 1px, transparent 1px, transparent 3px);
  mix-blend-mode: overlay;
}
.hud-status {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: "JetBrains Mono", monospace;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gaming-cyan);
  opacity: .8;
  margin: 0 0 1.3rem;
}
.hud-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gaming-cyan);
  box-shadow: 0 0 6px var(--gaming-cyan);
  animation: hud-pulse 1.6s ease-in-out infinite;
}
@keyframes hud-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.hud-cursor { animation: hud-blink 1s steps(1, end) infinite; }
@keyframes hud-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.story-gaming .story-eyebrow { color: var(--gaming-cyan); font-family: "JetBrains Mono", monospace; }
.story-gaming h2 {
  font-weight: 700;
  text-shadow: 0 0 24px rgba(51,231,255,.25);
  position: relative;
}
.story-gaming .story-inner.is-visible h2 {
  animation: glitch-in .5s steps(2, end) .16s both;
}
@keyframes glitch-in {
  0%   { text-shadow: -2px 0 var(--gaming-magenta), 2px 0 var(--gaming-cyan); }
  60%  { text-shadow: 2px 0 var(--gaming-magenta), -2px 0 var(--gaming-cyan); }
  100% { text-shadow: 0 0 24px rgba(51,231,255,.25); }
}
.story-gaming .story-text { color: var(--gaming-dim); }
.story-gaming .value {
  font-family: "JetBrains Mono", monospace;
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--gaming-cyan);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 16px rgba(51,231,255,.35);
}
.story-gaming .label { font-family: "JetBrains Mono", monospace; font-size: .7rem; color: var(--gaming-dim); }
.story-gaming .story-cta {
  color: var(--gaming-cyan);
  border-color: var(--gaming-cyan);
  background: rgba(51,231,255,.08);
}
.story-gaming .story-cta:hover {
  background: rgba(51,231,255,.18);
  box-shadow: 0 10px 26px -12px var(--gaming-cyan);
}

.story-chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.story-gaming .chip {
  --accent: #33E7FF;
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1px solid var(--gaming-line);
  background: rgba(255,255,255,.03);
  border-radius: 999px;
  padding: .4rem .9rem .4rem .6rem;
  font-family: "JetBrains Mono", monospace;
  font-size: .76rem;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.story-gaming .chip:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 6px 18px -6px var(--accent);
}
.chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.chip-value { color: var(--gaming-amber); font-weight: 600; }

/* ---------- Projekte-Kapitel ---------- */
/* Farblich bewusst zwischen Gaming (dunkel/neon) und Radfahren (warmes Papier)
   angesiedelt: dunkler Grund wie bei Gaming, aber schon wärmer/grüner statt
   blaustichig, Akzent aus Cyan (Gaming) und Terrakotta/Amber (Radfahren) gemischt. */
.story-projects {
  background: var(--proj-bg);
  color: var(--proj-text);
  font-family: "Space Grotesk", sans-serif;
}
.story-projects .story-bg {
  background-image:
    radial-gradient(60% 45% at 12% 10%, rgba(79,201,176,.14), transparent 70%),
    radial-gradient(50% 40% at 95% 90%, rgba(227,163,78,.10), transparent 70%),
    linear-gradient(180deg, var(--proj-bg) 0%, var(--proj-bg-soft) 100%);
}
.story-inner-wide { max-width: 1080px; }
.story-projects .story-eyebrow {
  color: var(--proj-accent);
  font-family: "JetBrains Mono", monospace;
}
.story-projects h2 { font-weight: 600; }
.story-projects .story-text { color: var(--proj-dim); }
.story-projects .value {
  font-family: "JetBrains Mono", monospace;
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--proj-accent);
  font-variant-numeric: tabular-nums;
}
.story-projects .label { font-size: .7rem; color: var(--proj-dim); text-transform: uppercase; letter-spacing: .04em; }

.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1.1rem;
}
.project-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--proj-line);
  background: var(--proj-panel);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .3s cubic-bezier(.16,.84,.44,1), border-color .25s ease, box-shadow .3s ease;
}
.project-card:hover,
.project-card:focus-visible {
  transform: translateY(-5px);
  border-color: var(--proj-accent);
  box-shadow: 0 18px 34px -18px rgba(79,201,176,.55);
}
.project-chrome {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .7rem;
  background: rgba(0,0,0,.18);
  border-bottom: 1px solid var(--proj-line);
}
.project-dots { display: flex; gap: .3rem; }
.project-dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--proj-dim);
  opacity: .5;
}
.project-url {
  font-family: "JetBrains Mono", monospace;
  font-size: .68rem;
  color: var(--proj-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-shot {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10.5;
  background: linear-gradient(160deg, #1c3a34, #12211e);
  overflow: hidden;
}
.project-shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
  transition: transform .5s cubic-bezier(.16,.84,.44,1), filter .4s ease;
  filter: saturate(.92);
}
.project-card:hover .project-shot img,
.project-card:focus-visible .project-shot img {
  transform: scale(1.06);
  filter: saturate(1.05);
}
.project-meta {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .8rem .9rem .5rem;
}
.project-name { font-weight: 600; font-size: .92rem; }
.project-tag {
  font-family: "JetBrains Mono", monospace;
  font-size: .64rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--proj-accent-2);
  border: 1px solid rgba(227,163,78,.35);
  border-radius: 999px;
  padding: .18rem .5rem;
  white-space: nowrap;
}
.project-visit {
  display: flex; align-items: center; gap: .4rem;
  padding: 0 .9rem .9rem;
  font-size: .78rem;
  color: var(--proj-accent);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .25s ease, transform .25s ease;
}
.project-visit i { font-style: normal; transition: transform .25s ease; }
.project-card:hover .project-visit,
.project-card:focus-visible .project-visit {
  opacity: 1;
  transform: translateY(0);
}
.project-card:hover .project-visit i,
.project-card:focus-visible .project-visit i { transform: translateX(3px); }

.story-projects .project-card {
  opacity: 0;
  transition: opacity .5s cubic-bezier(.16,.84,.44,1) calc(var(--i, 0) * 45ms + .3s),
    transform .3s cubic-bezier(.16,.84,.44,1), border-color .25s ease, box-shadow .3s ease;
}
.story-inner.is-visible .story-projects .project-card,
.story-projects .story-inner.is-visible .project-card { opacity: 1; }

/* ---------- Cycling-Kapitel ---------- */
.story-cycling {
  background: var(--cycling-paper);
  color: var(--cycling-ink);
  font-family: "Inter", sans-serif;
}
.story-cycling .story-bg {
  background-image:
    radial-gradient(50% 40% at 85% 15%, rgba(212,90,34,.10), transparent 70%),
    radial-gradient(40% 30% at 10% 90%, rgba(92,122,82,.10), transparent 70%);
}
.story-road {
  position: absolute; z-index: 1; pointer-events: none;
  left: -5%; right: -5%; bottom: 10%;
  width: 110%; height: 140px;
  overflow: visible;
}
.story-road path {
  fill: none;
  stroke: var(--cycling-clay);
  stroke-width: 2.5;
  stroke-linecap: round;
  opacity: .4;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.8s cubic-bezier(.65,0,.35,1) .25s;
}
.story-cycling.is-visible .story-road path { stroke-dashoffset: 0; }
.story-cycling .story-eyebrow { color: var(--cycling-moss); }
.story-cycling h2 { font-family: "Space Grotesk", sans-serif; font-weight: 700; }
.story-cycling .story-text { color: var(--cycling-dim); }
.story-cycling .value {
  font-family: "IBM Plex Mono", monospace;
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--cycling-clay);
  font-variant-numeric: tabular-nums;
}
.story-cycling .label { font-size: .74rem; color: var(--cycling-dim); }
.story-cycling .story-cta {
  color: #fff;
  border-color: var(--cycling-clay);
  background: var(--cycling-clay);
}
.story-cycling .story-cta:hover {
  background: #B94815;
  border-color: #B94815;
  box-shadow: 0 12px 26px -12px var(--cycling-clay);
}

.story-cycling .chip {
  display: inline-flex; align-items: center; gap: .6rem;
  border: 1px solid var(--cycling-line);
  background: #fff;
  border-radius: 999px;
  padding: .45rem 1rem;
  font-size: .82rem;
  transition: transform .2s ease, box-shadow .2s ease;
}
.story-cycling .chip:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px -10px var(--cycling-clay);
}
.story-cycling .chip-value { font-family: "IBM Plex Mono", monospace; color: var(--cycling-moss); font-weight: 600; }

/* ---------- Raya-Kapitel ---------- */
.story-raya {
  background: var(--raya-paper);
  color: var(--raya-ink);
  font-family: "Inter", sans-serif;
  align-items: center;
  text-align: center;
}
.story-raya .story-bg {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='%23C98572' fill-opacity='0.14'%3E%3Cg transform='translate(4,2) rotate(-15) scale(0.55)'%3E%3Cellipse cx='20' cy='27' rx='9' ry='7'/%3E%3Cellipse cx='8' cy='15' rx='4' ry='5' transform='rotate(-25 8 15)'/%3E%3Cellipse cx='16' cy='8' rx='4' ry='5.2' transform='rotate(-8 16 8)'/%3E%3Cellipse cx='25' cy='8' rx='4' ry='5.2' transform='rotate(8 25 8)'/%3E%3Cellipse cx='33' cy='15' rx='4' ry='5' transform='rotate(25 33 15)'/%3E%3C/g%3E%3Cg transform='translate(80,72) rotate(24) scale(0.42)' fill-opacity='0.11'%3E%3Cellipse cx='20' cy='27' rx='9' ry='7'/%3E%3Cellipse cx='8' cy='15' rx='4' ry='5' transform='rotate(-25 8 15)'/%3E%3Cellipse cx='16' cy='8' rx='4' ry='5.2' transform='rotate(-8 16 8)'/%3E%3Cellipse cx='25' cy='8' rx='4' ry='5.2' transform='rotate(8 25 8)'/%3E%3Cellipse cx='33' cy='15' rx='4' ry='5' transform='rotate(25 33 15)'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(55% 45% at 50% 0%, rgba(201,133,114,.12), transparent 70%),
    radial-gradient(35% 30% at 85% 85%, rgba(201,133,114,.08), transparent 70%);
  background-repeat: repeat, no-repeat, no-repeat;
}
.heart-field {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.heart {
  position: absolute;
  bottom: -5%;
  opacity: 0;
}
.story-raya.is-visible .heart {
  animation-name: heart-rise;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
}
.hf-1 { left: 10%; font-size: 1rem;  animation-duration: 9s;   animation-delay: .2s; }
.hf-2 { left: 28%; font-size: .7rem; animation-duration: 7.5s; animation-delay: 2.4s; }
.hf-3 { left: 50%; font-size: 1.1rem; animation-duration: 10.5s; animation-delay: 1s; }
.hf-4 { left: 71%; font-size: .75rem; animation-duration: 8s;  animation-delay: 3.6s; }
.hf-5 { left: 88%; font-size: .95rem; animation-duration: 11s; animation-delay: .8s; }
@keyframes heart-rise {
  0%   { transform: translateY(0) scale(.8); opacity: 0; }
  12%  { opacity: .55; }
  75%  { opacity: .35; }
  100% { transform: translateY(-260px) scale(1.1); opacity: 0; }
}

/* Themen-Spur, die der Maus in jedem Kapitel folgt (per JS erzeugt, Symbol je Kapitel) */
.cursor-trail-mark {
  position: absolute;
  z-index: 6;
  font-size: 1rem;
  opacity: .55;
  pointer-events: none;
  transform: translate(-50%, -50%) scaleX(var(--flip, 1)) rotate(var(--rot, 0deg));
  animation: trail-fade .7s ease-out forwards;
}
@keyframes trail-fade {
  from { opacity: .55; transform: translate(-50%, -50%) scaleX(var(--flip, 1)) rotate(var(--rot, 0deg)) scale(1); }
  to   { opacity: 0; transform: translate(-50%, -50%) scaleX(var(--flip, 1)) rotate(var(--rot, 0deg)) scale(.6) translateY(-8px); }
}
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .cursor-trail-mark { display: none; }
}

.story-raya .story-inner { display: flex; flex-direction: column; align-items: center; }
.story-raya .story-eyebrow { color: var(--raya-blush); }
.story-raya h2 { font-family: "Fraunces", serif; font-style: italic; font-weight: 500; }
.story-raya .story-text { color: var(--raya-dim); text-align: center; }
.story-raya .story-stats { justify-content: center; }
.story-raya .value {
  font-family: "Fraunces", serif;
  font-size: 2rem;
  font-weight: 600;
  color: var(--raya-blush);
  font-variant-numeric: tabular-nums;
}
.story-raya .label { font-size: .74rem; color: var(--raya-dim); text-transform: uppercase; letter-spacing: .04em; }
.story-raya .story-cta {
  color: var(--raya-ink);
  border-color: var(--raya-blush);
  background: #fff;
}
.story-raya .story-cta:hover {
  background: var(--raya-blush);
  color: #fff;
  box-shadow: 0 12px 24px -12px var(--raya-blush);
}

.story-photo-preview { display: flex; gap: .8rem; margin: 1.6rem 0; }
.preview-tile {
  width: 72px; height: 90px;
  border-radius: 10px;
  background: linear-gradient(160deg, #F1EBE0, var(--raya-paper));
  border: 1px solid var(--raya-line);
  color: var(--raya-blush);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.preview-tile img { width: 100%; height: 100%; object-fit: cover; }
.preview-tile:hover {
  transform: translateY(-6px) scale(1.05) !important;
  box-shadow: 0 10px 22px -10px var(--raya-blush);
  transition: transform .25s ease, box-shadow .25s ease;
}
.preview-tile svg { width: 45%; height: 45%; opacity: .55; }

/* ---------- Unbesiegbar-Kapitel ---------- */
.story-unbesiegbar {
  background: var(--ub-deep);
  color: var(--ub-cream);
  font-family: "Nunito", "Inter", sans-serif;
  align-items: center;
  text-align: center;
}
.story-unbesiegbar .story-bg {
  background-image:
    radial-gradient(50% 40% at 20% 10%, rgba(255,201,74,.16), transparent 45%),
    radial-gradient(55% 45% at 80% 85%, rgba(255,62,165,.18), transparent 50%),
    linear-gradient(160deg, var(--ub-deep), var(--ub-mid) 60%, #170a2b);
}
.crown-field {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.crown {
  position: absolute;
  bottom: -5%;
  opacity: 0;
}
.story-unbesiegbar.is-visible .crown {
  animation-name: heart-rise;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
}
.cf-1 { left: 8%;  font-size: 1.3rem; animation-duration: 10s;   animation-delay: .3s; }
.cf-2 { left: 26%; font-size: .8rem;  animation-duration: 8s;    animation-delay: 2.8s; }
.cf-3 { left: 48%; font-size: 1.5rem; animation-duration: 11.5s; animation-delay: 1.2s; }
.cf-4 { left: 68%; font-size: .85rem; animation-duration: 9s;    animation-delay: 4s; }
.cf-5 { left: 88%; font-size: 1.2rem; animation-duration: 12s;   animation-delay: .9s; }

.story-unbesiegbar .story-inner { display: flex; flex-direction: column; align-items: center; }
.story-unbesiegbar .story-eyebrow { color: var(--ub-gold); }
.story-unbesiegbar h2 {
  font-family: "Baloo 2", "Fraunces", serif;
  font-weight: 700;
  background: linear-gradient(90deg, var(--ub-gold-bright), var(--ub-pink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.story-unbesiegbar .story-text { color: rgba(255,248,236,.75); text-align: center; }
.story-unbesiegbar .story-cta {
  color: var(--ub-deep);
  border-color: var(--ub-gold);
  background: linear-gradient(135deg, var(--ub-gold-bright), var(--ub-gold));
  font-weight: 700;
}
.story-unbesiegbar .story-cta:hover {
  box-shadow: 0 12px 26px -12px var(--ub-gold);
}

/* ---------- Footer je nach letztem Kapitel (Unbesiegbar) ---------- */
#site-footer { background: var(--ub-deep); border-color: rgba(255,201,74,.25); }
.footer-name { color: var(--ub-gold-bright); font-family: "Fraunces", serif; font-style: italic; }
.footer-tag, .social-link { color: rgba(255,248,236,.6); }
.social-link { border-color: rgba(255,201,74,.25); }
.social-link:hover { color: var(--ub-gold); border-color: var(--ub-gold); }

@media (max-width: 640px) {
  .qn-links { gap: .9rem; }
  .qn-links a { font-size: 0; gap: 0; }
  .qn-dot { width: 8px; height: 8px; }

  /* Zwei statt einer Spalte, sonst wird die Karten-Sektion mit 12 Projekten auf
     schmalen Bildschirmen unnötig lang (eine Bildschirmhöhe pro Karte). */
  .project-grid { grid-template-columns: repeat(2, 1fr); gap: .7rem; }
  .project-name { font-size: .82rem; }
  .project-tag { font-size: .58rem; padding: .16rem .45rem; }
  .project-url { font-size: .6rem; }
  .project-meta { padding: .6rem .65rem .4rem; flex-wrap: wrap; }
}