@layer reset, base, components, sections, utilities, responsive;

/* ==========================================================================
   julian-neumann.org · Portfolio 2026 — Premium Layer "Signalnaht"
   Eine Ember-Lichtlinie verbindet Systeme, Geschichten und Sound.
   Motion: transform/opacity only · Reduced Motion = vollwertige Variante.
   ========================================================================== */

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    color-scheme: dark;
    scroll-behavior: smooth;
    text-size-adjust: 100%;
  }

  body {
    margin: 0;
    min-width: 320px;
  }

  img,
  picture,
  video,
  canvas,
  svg {
    display: block;
    max-width: 100%;
  }

  img {
    height: auto;
  }

  button,
  input,
  textarea,
  select {
    color: inherit;
    font: inherit;
  }

  button,
  a {
    -webkit-tap-highlight-color: transparent;
  }

  a {
    color: inherit;
  }

  h1,
  h2,
  h3,
  p,
  figure,
  blockquote,
  dl,
  dd {
    margin: 0;
  }

  ul,
  ol {
    margin: 0;
    padding: 0;
  }
}

@layer base {
  :root {
    --bg: #07090b;
    --bg-elevated: #0c1013;
    --surface: #101519;
    --surface-strong: #151c21;
    --surface-soft: #11171b;
    --paper: #f0ebe0;
    --paper-strong: #fffaf0;
    --paper-ink: #171a1c;
    --text: #f2efe8;
    --text-soft: #b3b8ba;
    --text-faint: #7e878b;
    --line: rgb(255 255 255 / 12%);
    --line-strong: rgb(255 255 255 / 22%);
    --accent: #ef6b2e;
    --accent-rgb: 239 107 46;
    --accent-hot: #ffa25c;
    --accent-hot-rgb: 255 162 92;
    --success: #70b78b;
    --warning: #f0c46a;
    --danger: #e87b72;
    --shadow: 0 28px 80px rgb(0 0 0 / 38%);
    --shadow-soft: 0 16px 50px rgb(0 0 0 / 22%);
    --glow: 0 0 22px rgb(var(--accent-rgb) / 35%);
    --radius-sm: 0.45rem;
    --radius: 0.85rem;
    --radius-lg: 1.45rem;
    --container: 76rem;
    --container-narrow: 52rem;
    --gutter: clamp(1rem, 3.2vw, 2.5rem);
    --section: clamp(4.8rem, 10vw, 9rem);
    --header-height: 4.75rem;
    --font-sans: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --font-editorial: Georgia, "Times New Roman", serif;
    --font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, "Liberation Mono", monospace;
    --ease: cubic-bezier(0.2, 0.75, 0.2, 1);
    --ease-impact: cubic-bezier(0.7, 0, 0.16, 1);
    --ease-cine: cubic-bezier(0.45, 0.05, 0.15, 1);
    --t-hit: 140ms;
    --t-hover: 240ms;
    --t-reveal: 800ms;
    --seam: linear-gradient(90deg, transparent, rgb(var(--accent-rgb) / 55%) 18% 82%, transparent);
    --seam-faint: linear-gradient(90deg, transparent, rgb(255 255 255 / 14%) 14% 86%, transparent);
  }

  body[data-theme="ai"] {
    --accent: #cf8650;
    --accent-rgb: 207 134 80;
    --accent-hot: #f2b57e;
    --accent-hot-rgb: 242 181 126;
    --accent-2: #9dbab1;
  }

  body[data-theme="apps"] {
    --accent: #e06135;
    --accent-rgb: 224 97 53;
    --accent-hot: #ff9a68;
    --accent-hot-rgb: 255 154 104;
    --accent-2: #8db9a4;
  }

  body[data-theme="books"] {
    --accent: #c87538;
    --accent-rgb: 200 117 56;
    --accent-hot: #eda668;
    --accent-hot-rgb: 237 166 104;
    --accent-2: #b7a37c;
  }

  body[data-theme="music"] {
    --accent: #f15b2a;
    --accent-rgb: 241 91 42;
    --accent-hot: #ff9457;
    --accent-hot-rgb: 255 148 87;
    --accent-2: #b83224;
  }

  body[data-theme="about"] {
    --accent: #d88d53;
    --accent-rgb: 216 141 83;
    --accent-hot: #f4b986;
    --accent-hot-rgb: 244 185 134;
    --accent-2: #7ca496;
  }

  body {
    background:
      radial-gradient(circle at 88% -8%, rgb(var(--accent-rgb) / 10%), transparent 30rem),
      radial-gradient(circle at -12% 30%, rgb(255 255 255 / 2.5%), transparent 34rem),
      var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: clamp(1rem, 0.98rem + 0.1vw, 1.08rem);
    line-height: 1.65;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  /* Filmkorn — eine Schicht für die ganze Seite, ~0.4 KB SVG-Rauschen */
  body::after {
    position: fixed;
    z-index: 2000;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    content: "";
    opacity: 0.035;
    pointer-events: none;
  }

  ::selection {
    background: rgb(var(--accent-rgb) / 35%);
    color: var(--paper-strong);
  }

  :focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent) 82%, white);
    outline-offset: 4px;
  }

  .container {
    width: min(calc(100% - (2 * var(--gutter))), var(--container));
    margin-inline: auto;
  }

  .container--narrow {
    width: min(calc(100% - (2 * var(--gutter))), var(--container-narrow));
    margin-inline: auto;
  }

  main {
    min-height: 60vh;
  }

  h1,
  h2,
  h3 {
    color: var(--text);
    font-weight: 650;
    hyphens: none;
    letter-spacing: -0.045em;
    line-height: 0.98;
    overflow-wrap: break-word;
    text-wrap: balance;
  }

  h1 {
    font-size: clamp(3.25rem, 8.2vw, 8.25rem);
  }

  h2 {
    font-size: clamp(2.35rem, 5.2vw, 5.4rem);
  }

  h3 {
    font-size: clamp(1.35rem, 2.25vw, 2.1rem);
    line-height: 1.08;
  }

  p {
    text-wrap: pretty;
  }

  .editorial {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 400;
    letter-spacing: -0.035em;
  }

  .eyebrow {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .eyebrow::before {
    width: 1.6rem;
    height: 1px;
    background: linear-gradient(90deg, var(--accent-hot), rgb(var(--accent-rgb) / 25%));
    box-shadow: 0 0 8px rgb(var(--accent-rgb) / 55%);
    content: "";
  }

  .lead {
    max-width: 46rem;
    color: var(--text-soft);
    font-size: clamp(1.12rem, 1.8vw, 1.45rem);
    line-height: 1.55;
  }

  .prose {
    display: grid;
    min-width: 0;
    gap: 1.25rem;
    color: var(--text-soft);
    overflow-wrap: anywhere;
  }

  .prose > * {
    min-width: 0;
  }

  .prose > :is(h2, h3) {
    margin-top: 1.8em;
    color: var(--text);
  }

  .prose > h2:first-child,
  .prose > h3:first-child {
    margin-top: 0;
  }

  .prose a {
    color: var(--text);
    text-decoration-color: var(--accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
    transition: text-decoration-color var(--t-hover) ease, color var(--t-hover) ease;
  }

  .prose a:hover {
    color: var(--accent-hot);
    text-decoration-color: var(--accent-hot);
  }

  .prose ul,
  .prose ol {
    display: grid;
    gap: 0.6rem;
    padding-left: 1.3rem;
  }

  .muted {
    color: var(--text-soft);
  }

  .section {
    position: relative;
    padding-block: var(--section);
  }

  .section--compact {
    padding-block: clamp(3.2rem, 7vw, 5.5rem);
  }

  /* Signalnaht: Sektionsgrenzen als Lichtlinie statt flacher Border */
  .section--line {
    border-top: 0;
  }

  .section--line::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 1px;
    background: var(--seam-faint);
    content: "";
    pointer-events: none;
  }

  .section--line::after {
    position: absolute;
    top: 0;
    left: 50%;
    width: min(34rem, 72%);
    height: 1px;
    background: var(--seam);
    box-shadow: 0 0 18px rgb(var(--accent-rgb) / 28%);
    content: "";
    opacity: 0.8;
    pointer-events: none;
    translate: -50% 0;
  }

  .section--paper {
    background:
      linear-gradient(180deg, rgb(255 255 255 / 45%), transparent 8rem),
      var(--paper);
    color: var(--paper-ink);
  }

  .section--paper :is(h1, h2, h3) {
    color: var(--paper-ink);
  }

  .section--paper .lead,
  .section--paper .muted,
  .section--paper .section-kicker {
    color: #5d5b56;
  }

  .section-head {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(15rem, 0.7fr);
    gap: clamp(2rem, 6vw, 7rem);
    align-items: end;
    margin-bottom: clamp(2.5rem, 6vw, 5rem);
  }

  .section-head > * {
    min-width: 0;
  }

  .section-head .eyebrow {
    margin-bottom: 1rem;
  }

  .section-kicker {
    color: var(--text-soft);
    font-size: clamp(1rem, 1.4vw, 1.25rem);
  }

  .skip-link {
    position: fixed;
    z-index: 2100;
    top: 0.7rem;
    left: 0.7rem;
    translate: 0 -160%;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    background: var(--paper-strong);
    color: var(--paper-ink);
    font-weight: 700;
    text-decoration: none;
    transition: translate 180ms ease;
  }

  .skip-link:focus {
    translate: 0;
  }

  .scroll-progress {
    position: fixed;
    z-index: 950;
    top: 0;
    left: 0;
    width: calc(var(--scroll-progress, 0) * 100%);
    height: 2px;
    background: linear-gradient(90deg, rgb(var(--accent-rgb) / 65%), var(--accent-hot));
    box-shadow: 0 0 12px rgb(var(--accent-rgb) / 55%);
    pointer-events: none;
  }
}

@layer components {
  .site-header {
    position: sticky;
    z-index: 900;
    top: 0;
    min-height: var(--header-height);
    border-bottom: 1px solid transparent;
    background: rgb(7 9 11 / 72%);
    backdrop-filter: blur(20px) saturate(140%);
    transition:
      border-color 220ms ease,
      background 220ms ease;
  }

  .site-header::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 1px;
    background: var(--seam);
    content: "";
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms ease;
  }

  .site-header[data-scrolled="true"] {
    border-color: var(--line);
    background: rgb(7 9 11 / 90%);
  }

  .site-header[data-scrolled="true"]::after {
    opacity: 0.45;
  }

  .nav-shell {
    display: flex;
    width: min(calc(100% - (2 * var(--gutter))), var(--container));
    min-height: var(--header-height);
    margin-inline: auto;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
  }

  .brand {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.7rem;
    color: var(--text);
    font-size: 0.84rem;
    font-weight: 720;
    letter-spacing: -0.015em;
    line-height: 1.1;
    text-decoration: none;
  }

  .brand-mark {
    width: 1.9rem;
    height: 1.9rem;
    transition: filter var(--t-hover) ease, rotate 400ms var(--ease);
  }

  .brand:hover .brand-mark {
    filter: drop-shadow(0 0 8px rgb(var(--accent-rgb) / 60%));
    rotate: -4deg;
  }

  .brand span span {
    display: block;
    color: var(--text-faint);
    font-family: var(--font-mono);
    font-size: 0.56rem;
    font-weight: 650;
    letter-spacing: 0.13em;
    text-transform: uppercase;
  }

  .site-nav {
    display: flex;
    align-items: center;
    gap: clamp(0.2rem, 0.8vw, 0.8rem);
  }

  .site-nav a {
    position: relative;
    padding: 0.58rem 0.62rem;
    color: var(--text-soft);
    font-size: 0.78rem;
    font-weight: 650;
    text-decoration: none;
    transition: color var(--t-hover) ease;
    white-space: nowrap;
  }

  .site-nav a::after {
    position: absolute;
    right: 0.62rem;
    bottom: 0.25rem;
    left: 0.62rem;
    height: 1px;
    scale: 0 1;
    background: linear-gradient(90deg, var(--accent), var(--accent-hot));
    box-shadow: 0 0 8px rgb(var(--accent-rgb) / 60%);
    content: "";
    transform-origin: right;
    transition: scale 220ms var(--ease);
  }

  .site-nav a:is(:hover, :focus-visible, [aria-current="page"]) {
    color: var(--text);
  }

  .site-nav a:is(:hover, :focus-visible, [aria-current="page"])::after {
    scale: 1 1;
    transform-origin: left;
  }

  .site-nav .nav-contact {
    margin-left: 0.3rem;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    padding-inline: 0.95rem;
    color: var(--text);
    transition:
      border-color var(--t-hover) ease,
      background var(--t-hover) ease,
      color var(--t-hover) ease;
  }

  .site-nav .nav-contact:hover {
    border-color: rgb(var(--accent-rgb) / 65%);
    background: rgb(var(--accent-rgb) / 10%);
  }

  .site-nav .nav-contact::after {
    display: none;
  }

  .nav-toggle {
    display: none;
    width: 2.9rem;
    height: 2.9rem;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: border-color var(--t-hover) ease, background var(--t-hover) ease;
  }

  .nav-toggle:hover {
    border-color: var(--line-strong);
    background: rgb(255 255 255 / 4%);
  }

  .nav-toggle span,
  .nav-toggle::before,
  .nav-toggle::after {
    display: block;
    width: 1rem;
    height: 1px;
    margin-inline: auto;
    background: currentColor;
    content: "";
    transition:
      rotate 200ms ease,
      translate 200ms ease,
      opacity 200ms ease;
  }

  .nav-toggle::before {
    translate: 0 -0.24rem;
  }

  .nav-toggle::after {
    translate: 0 0.24rem;
  }

  .site-header[data-open="true"] .nav-toggle span {
    opacity: 0;
  }

  .site-header[data-open="true"] .nav-toggle::before {
    rotate: 45deg;
    translate: 0 1px;
  }

  .site-header[data-open="true"] .nav-toggle::after {
    rotate: -45deg;
    translate: 0 -1px;
  }

  .btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    align-items: center;
  }

  .btn {
    position: relative;
    display: inline-flex;
    min-height: 3rem;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    overflow: clip;
    padding: 0.78rem 1.2rem;
    border: 1px solid transparent;
    border-radius: 0.4rem;
    background: linear-gradient(150deg, var(--accent-hot) -35%, var(--accent) 55%);
    color: #160c08;
    font-size: 0.82rem;
    font-weight: 760;
    line-height: 1.1;
    text-decoration: none;
    transition:
      translate 180ms var(--ease),
      box-shadow 220ms ease,
      background 180ms ease,
      scale var(--t-hit) var(--ease-impact);
  }

  /* Lichtstreifen, der beim Hover über den Button zieht */
  .btn::before {
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / 32%) 50%, transparent 70%);
    content: "";
    opacity: 0;
    pointer-events: none;
    translate: -110% 0;
  }

  .btn:is(:hover, :focus-visible) {
    translate: 0 -2px;
    box-shadow:
      0 12px 28px rgb(var(--accent-rgb) / 24%),
      0 0 0 1px rgb(var(--accent-hot-rgb) / 35%);
  }

  .btn:is(:hover, :focus-visible)::before {
    opacity: 1;
    transition: translate 700ms var(--ease-cine);
    translate: 110% 0;
  }

  .btn:active {
    scale: 0.98;
    translate: 0 0;
  }

  .btn--ghost {
    border-color: var(--line-strong);
    background: transparent;
    color: var(--text);
  }

  .btn--ghost:is(:hover, :focus-visible) {
    border-color: rgb(var(--accent-rgb) / 60%);
    box-shadow: 0 12px 28px rgb(0 0 0 / 28%), 0 0 18px rgb(var(--accent-rgb) / 14%);
  }

  .btn--ghost::before {
    background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / 10%) 50%, transparent 70%);
  }

  .section--paper .btn--ghost {
    border-color: rgb(23 26 28 / 26%);
    color: var(--paper-ink);
  }

  .btn--quiet {
    border-color: transparent;
    background: transparent;
    color: var(--text);
  }

  .text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: inherit;
    font-size: 0.82rem;
    font-weight: 760;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.3em;
    transition: color var(--t-hover) ease, text-decoration-color var(--t-hover) ease;
  }

  .text-link::after {
    content: "↗";
    transition: translate var(--t-hover) var(--ease);
  }

  .text-link:is(:hover, :focus-visible) {
    color: var(--accent-hot);
    text-decoration-color: var(--accent-hot);
  }

  .text-link:is(:hover, :focus-visible)::after {
    translate: 0.18rem -0.12rem;
  }

  .tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
  }

  .tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.62rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgb(255 255 255 / 2%);
    color: var(--text-soft);
    font-family: var(--font-mono);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    transition: border-color var(--t-hover) ease, color var(--t-hover) ease;
  }

  .tag[data-status="live"]::before,
  .status::before {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 4px rgb(112 183 139 / 12%), 0 0 8px rgb(112 183 139 / 45%);
    content: "";
  }

  .status {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--text-soft);
    font-size: 0.76rem;
    font-weight: 700;
  }

  .status--planned::before {
    background: var(--warning);
    box-shadow: 0 0 0 4px rgb(240 196 106 / 12%);
  }

  .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
    margin-bottom: 1.4rem;
    color: var(--text-faint);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.04em;
  }

  .breadcrumb a {
    color: var(--text-soft);
    text-decoration: none;
    transition: color var(--t-hover) ease;
  }

  .breadcrumb a:hover {
    color: var(--accent-hot);
  }

  .breadcrumb span[aria-hidden] {
    color: var(--line-strong);
  }

  .card-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1rem;
  }

  .card {
    position: relative;
    min-width: 0;
    overflow: clip;
    padding: clamp(1.3rem, 2.8vw, 2rem);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background:
      linear-gradient(145deg, rgb(255 255 255 / 3%), transparent 54%),
      var(--surface-soft);
    box-shadow: inset 0 1px rgb(255 255 255 / 3%);
    transition:
      translate var(--t-hover) var(--ease),
      border-color var(--t-hover) ease;
  }

  /* Spotlight folgt dem Zeiger (JS setzt --mx/--my) */
  .card::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    background: radial-gradient(
      16rem circle at var(--mx, 50%) var(--my, 0%),
      rgb(var(--accent-rgb) / 9%),
      transparent 62%
    );
    content: "";
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-hover) ease;
  }

  .card > * {
    position: relative;
    z-index: 1;
  }

  @media (hover: hover) and (pointer: fine) {
    .card:hover {
      border-color: rgb(var(--accent-rgb) / 34%);
      translate: 0 -4px;
    }

    .card:hover::before {
      opacity: 1;
    }

    a.card:hover h3 {
      color: var(--accent-hot);
    }
  }

  a.card:focus-visible {
    border-color: rgb(var(--accent-rgb) / 50%);
  }

  .card h3 {
    margin-bottom: 0.8rem;
    transition: color var(--t-hover) ease;
  }

  .card p {
    color: var(--text-soft);
  }

  .card .eyebrow {
    margin-bottom: 1.2rem;
  }

  .card--span-4 {
    grid-column: span 4;
  }

  .card--span-5 {
    grid-column: span 5;
  }

  .card--span-6 {
    grid-column: span 6;
  }

  .card--span-7 {
    grid-column: span 7;
  }

  .card--span-8 {
    grid-column: span 8;
  }

  .stat-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-block: 1px solid var(--line);
  }

  .stat {
    position: relative;
    min-width: 0;
    padding: clamp(1.15rem, 2.6vw, 1.8rem);
  }

  .stat + .stat {
    border-left: 1px solid var(--line);
  }

  .stat::after {
    position: absolute;
    bottom: 0;
    left: clamp(1.15rem, 2.6vw, 1.8rem);
    width: 1.8rem;
    height: 1px;
    background: linear-gradient(90deg, var(--accent-hot), transparent);
    box-shadow: 0 0 10px rgb(var(--accent-rgb) / 45%);
    content: "";
  }

  .stat strong {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--text);
    font-size: clamp(1.6rem, 3vw, 2.6rem);
    font-variant-numeric: tabular-nums;
    font-weight: 630;
    letter-spacing: -0.05em;
    line-height: 1;
  }

  .stat span {
    color: var(--text-soft);
    font-size: 0.75rem;
  }

  .feature-list {
    display: grid;
    list-style: none;
  }

  .feature-list li {
    display: grid;
    grid-template-columns: 2.2rem minmax(0, 1fr);
    gap: 1rem;
    padding-block: 1.2rem;
    border-top: 1px solid var(--line);
    transition: background var(--t-hover) ease;
  }

  .feature-list li:last-child {
    border-bottom: 1px solid var(--line);
  }

  .feature-list li:hover {
    background: linear-gradient(90deg, rgb(255 255 255 / 3%), transparent 70%);
  }

  .feature-list strong {
    color: var(--text);
  }

  .feature-list p {
    color: var(--text-soft);
  }

  .feature-list .index {
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
  }

  /* Produktbühne: Ambient-Glut über Schatten – erzeugt keinen Overflow */
  .product-stage {
    position: relative;
    min-width: 0;
    isolation: isolate;
  }

  .product-stage .media-frame {
    box-shadow:
      var(--shadow),
      0 34px 110px rgb(var(--accent-rgb) / 13%),
      0 8px 40px rgb(var(--accent-rgb) / 9%);
  }

  .media-frame {
    position: relative;
    min-width: 0;
    overflow: clip;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: #0b0e10;
    box-shadow: var(--shadow);
    transition: transform 500ms var(--ease), border-color var(--t-hover) ease;
  }

  .media-frame::before {
    display: block;
    height: 2.1rem;
    border-bottom: 1px solid rgb(255 255 255 / 10%);
    background:
      radial-gradient(circle at 1rem 50%, #ee6b5b 0 0.19rem, transparent 0.2rem),
      radial-gradient(circle at 1.65rem 50%, #e9bd50 0 0.19rem, transparent 0.2rem),
      radial-gradient(circle at 2.3rem 50%, #61b965 0 0.19rem, transparent 0.2rem),
      #12161a;
    content: "";
  }

  /* Ignite-Naht am unteren Frame-Rand */
  .media-frame::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: var(--seam);
    box-shadow: var(--glow);
    content: "";
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-hover) ease;
  }

  .media-frame img {
    width: 100%;
    height: auto;
    aspect-ratio: 1425 / 891;
    filter: brightness(0.92) saturate(0.98);
    object-fit: cover;
    object-position: top;
    transition: filter var(--t-hover) ease;
  }

  .media-frame figcaption {
    padding: 0.72rem 1rem;
    border-top: 1px solid var(--line);
    color: var(--text-faint);
    font-family: var(--font-mono);
    font-size: 0.64rem;
    letter-spacing: 0.03em;
  }

  @media (hover: hover) and (pointer: fine) and (min-width: 861px) {
    .product-stage .media-frame {
      transform: perspective(1400px) rotateX(1.6deg) rotateY(-1.6deg);
    }

    .product-stage:nth-child(even) .media-frame,
    .product-story:nth-child(even) .media-frame {
      transform: perspective(1400px) rotateX(1.6deg) rotateY(1.6deg);
    }

    .product-stage:hover .media-frame,
    .media-frame:hover {
      border-color: rgb(var(--accent-rgb) / 34%);
      transform: perspective(1400px) rotateX(0deg) rotateY(0deg) translateY(-4px);
    }

    .product-stage:hover .media-frame img,
    .media-frame:hover img {
      filter: brightness(1) saturate(1);
    }

    .product-stage:hover .media-frame::after,
    .media-frame:hover::after {
      opacity: 0.9;
    }
  }

  .site-footer {
    position: relative;
    padding-block: clamp(3rem, 7vw, 5rem) 1.5rem;
    background: #050708;
  }

  .site-footer::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 1px;
    background: var(--seam-faint);
    content: "";
  }

  .site-footer::after {
    position: absolute;
    top: 0;
    left: 50%;
    width: min(30rem, 68%);
    height: 1px;
    background: var(--seam);
    box-shadow: 0 0 16px rgb(var(--accent-rgb) / 30%);
    content: "";
    opacity: 0.7;
    translate: -50% 0;
  }

  .footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.9fr);
    gap: clamp(2.5rem, 8vw, 8rem);
  }

  .footer-statement {
    max-width: 27rem;
    margin-top: 1.5rem;
    color: var(--text-soft);
    font-size: 1.1rem;
  }

  .footer-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
  }

  .footer-nav strong {
    display: block;
    margin-bottom: 0.7rem;
    color: var(--text-faint);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .footer-nav a {
    display: block;
    width: fit-content;
    margin-block: 0.35rem;
    color: var(--text-soft);
    font-size: 0.78rem;
    text-decoration: none;
    transition: color var(--t-hover) ease, translate var(--t-hover) var(--ease);
  }

  .footer-nav a:hover {
    color: var(--text);
    translate: 0.2rem 0;
  }

  .footer-meta {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: clamp(2.5rem, 6vw, 5rem);
    padding-top: 1.2rem;
    border-top: 1px solid var(--line);
    color: var(--text-faint);
    font-family: var(--font-mono);
    font-size: 0.64rem;
    letter-spacing: 0.03em;
  }

  /* Reveal-System: no-JS sieht alles, Reduced Motion sieht alles sofort */
  [data-reveal] {
    opacity: 1;
    translate: none;
  }

  @media (prefers-reduced-motion: no-preference) {
    .js [data-reveal] {
      opacity: 0;
      scale: 0.992;
      translate: 0 1.35rem;
      transition:
        opacity var(--t-reveal) var(--ease),
        translate var(--t-reveal) var(--ease),
        scale var(--t-reveal) var(--ease);
      transition-delay: calc(var(--reveal-index, 0) * 80ms);
    }

    .js [data-reveal="scale"] {
      scale: 0.965;
      translate: 0 0.8rem;
    }

    .js [data-reveal].is-visible {
      opacity: 1;
      scale: 1;
      translate: 0;
    }
  }
}

@layer sections {
  .hero {
    position: relative;
    display: grid;
    min-height: min(54rem, calc(100svh - var(--header-height)));
    align-items: center;
    overflow: clip;
    border-bottom: 1px solid var(--line);
  }

  .hero::before {
    position: absolute;
    inset: -20% -10% auto;
    height: 70%;
    background:
      radial-gradient(ellipse at 70% 20%, rgb(var(--accent-rgb) / 7%), transparent 60%);
    content: "";
    pointer-events: none;
  }

  .hero::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 12rem;
    background: linear-gradient(transparent, var(--bg));
    content: "";
    pointer-events: none;
  }

  .hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(19rem, 0.98fr);
    gap: clamp(2rem, 5vw, 6rem);
    align-items: center;
    padding-block: clamp(4rem, 9vw, 8rem);
  }

  .hero-copy {
    min-width: 0;
  }

  .hero-copy .eyebrow {
    margin-bottom: 1.3rem;
  }

  .hero-copy h1 {
    max-width: 11ch;
    font-size: clamp(3.25rem, 6.7vw, 6rem);
  }

  .hero-copy h1 .editorial {
    display: block;
    color: var(--accent);
    text-shadow: 0 0 34px rgb(var(--accent-rgb) / 30%);
  }

  .hero-publish {
    display: block;
    font-size: 0.72em;
    font-weight: inherit;
    letter-spacing: -0.04em;
  }

  .hero-copy .lead {
    max-width: 39rem;
    margin-top: 1.7rem;
  }

  .hero-copy .btn-row {
    margin-top: 2rem;
  }

  .hero-scene {
    position: relative;
    min-width: 0;
    min-height: clamp(25rem, 51vw, 42rem);
    isolation: isolate;
    perspective: 1000px;
  }

  .hero-scene picture {
    position: absolute;
    inset: 2% -14% 1% -7%;
    overflow: clip;
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 50% 8% 42% 16% / 18% 20% 44% 50%;
    box-shadow: var(--shadow);
    transform:
      translate3d(calc(var(--pointer-x, 0) * 10px), calc(var(--pointer-y, 0) * 8px), 0)
      rotateY(calc(var(--pointer-x, 0) * 1.8deg))
      rotateX(calc(var(--pointer-y, 0) * -1.5deg));
    transition: transform 400ms var(--ease);
  }

  .hero-scene img {
    width: 100%;
    height: 100%;
    animation: hero-breathe 14s var(--ease-cine) infinite alternate;
    object-fit: cover;
  }

  @keyframes hero-breathe {
    from {
      transform: scale(1.015) translateY(0.4%);
    }

    to {
      transform: scale(1.055) translateY(-0.6%);
    }
  }

  .hero-signal {
    position: absolute;
    z-index: 2;
    right: 5%;
    bottom: 8%;
    display: grid;
    width: clamp(10rem, 18vw, 14rem);
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid rgb(var(--accent-rgb) / 45%);
    border-radius: 50%;
    background: rgb(7 9 11 / 74%);
    box-shadow:
      0 0 0 1.2rem rgb(var(--accent-rgb) / 5%),
      0 0 5rem rgb(var(--accent-rgb) / 12%);
    backdrop-filter: blur(12px);
    transform: translate3d(calc(var(--pointer-x, 0) * -8px), calc(var(--pointer-y, 0) * -6px), 0);
  }

  .hero-signal span {
    color: var(--text-soft);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 750;
    letter-spacing: 0.14em;
    text-align: center;
    text-transform: uppercase;
  }

  .hero-signal::before,
  .hero-signal::after {
    position: absolute;
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 50%;
    content: "";
  }

  .hero-signal::before {
    inset: 18%;
    animation: signal-ring 3.6s var(--ease-cine) infinite;
    border-color: rgb(var(--accent-rgb) / 30%);
  }

  @keyframes signal-ring {
    0% {
      opacity: 0.9;
      transform: scale(0.82);
    }

    70% {
      opacity: 0;
      transform: scale(1.24);
    }

    100% {
      opacity: 0;
      transform: scale(1.24);
    }
  }

  .hero-signal::after {
    inset: 36%;
    background: radial-gradient(circle at 38% 32%, var(--accent-hot), var(--accent) 70%);
    box-shadow: 0 0 2rem rgb(var(--accent-rgb) / 62%);
  }

  .hero-note {
    position: absolute;
    z-index: 3;
    top: 7%;
    left: -4%;
    max-width: 13rem;
    padding: 0.8rem 0.95rem;
    border: 1px solid var(--line);
    border-left: 2px solid rgb(var(--accent-rgb) / 65%);
    background: rgb(9 12 14 / 80%);
    color: var(--text-soft);
    font-size: 0.68rem;
    line-height: 1.45;
    backdrop-filter: blur(12px);
    transform: translate3d(calc(var(--pointer-x, 0) * -5px), calc(var(--pointer-y, 0) * 4px), 0);
  }

  .hero-note strong {
    display: block;
    margin-bottom: 0.2rem;
    color: var(--text);
    font-size: 0.72rem;
  }

  /* Laufband: Systems // Stories // Sound */
  .marquee {
    position: relative;
    overflow: clip;
    padding-block: 0.95rem;
    border-bottom: 1px solid var(--line);
    background: rgb(255 255 255 / 1.5%);
    user-select: none;
  }

  .marquee-track {
    display: flex;
    width: max-content;
    animation: marquee-slide 46s linear infinite;
    will-change: transform;
  }

  .marquee:hover .marquee-track {
    animation-play-state: paused;
  }

  .marquee span {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 2.6rem;
    padding-right: 2.6rem;
    color: var(--text-faint);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .marquee b {
    color: rgb(var(--accent-rgb) / 75%);
    font-weight: 700;
  }

  @keyframes marquee-slide {
    to {
      transform: translateX(-50%);
    }
  }

  .page-hero {
    position: relative;
    overflow: clip;
    padding-block: clamp(5.2rem, 12vw, 10rem) clamp(4rem, 9vw, 7rem);
    border-bottom: 1px solid var(--line);
  }

  .page-hero::before {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(90deg, var(--bg) 0 35%, transparent 74%),
      radial-gradient(circle at 78% 15%, rgb(var(--accent-rgb) / 15%), transparent 36rem);
    content: "";
    pointer-events: none;
  }

  .page-hero::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 50%;
    width: min(40rem, 80%);
    height: 1px;
    background: var(--seam);
    box-shadow: 0 0 18px rgb(var(--accent-rgb) / 30%);
    content: "";
    opacity: 0.75;
    pointer-events: none;
    translate: -50% 0;
  }

  /* Ghost-Mark: großes //-Zeichen als editorialer Raumfüller */
  .page-hero-mark {
    position: absolute;
    z-index: 0;
    top: clamp(1.2rem, 5vw, 3.5rem);
    right: var(--gutter);
    color: rgb(255 255 255 / 4%);
    font-family: var(--font-mono);
    font-size: clamp(4.5rem, 13vw, 12rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 0.9;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
  }

  .page-hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(17rem, 0.85fr);
    gap: clamp(2.5rem, 8vw, 8rem);
    align-items: end;
  }

  .page-hero h1 {
    max-width: 13ch;
    font-size: clamp(3.1rem, 7vw, 6.5rem);
  }

  .page-hero .lead {
    margin-top: 1.6rem;
  }

  .page-hero-aside {
    padding: 1.35rem 0 0 1.35rem;
    border-top: 1px solid rgb(var(--accent-rgb) / 40%);
    border-left: 1px solid rgb(var(--accent-rgb) / 40%);
    color: var(--text-soft);
  }

  .page-hero-aside strong {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .world-index {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1rem;
  }

  .world-card {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: clamp(18rem, 30vw, 26rem);
    flex-direction: column;
    justify-content: space-between;
    overflow: clip;
    padding: clamp(1.35rem, 3vw, 2.2rem);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    text-decoration: none;
    isolation: isolate;
    transition:
      border-color var(--t-hover) ease,
      translate var(--t-hover) var(--ease);
  }

  .world-card:nth-child(1),
  .world-card:nth-child(4) {
    grid-column: span 7;
  }

  .world-card:nth-child(2),
  .world-card:nth-child(3) {
    grid-column: span 5;
  }

  .world-card::before {
    position: absolute;
    z-index: -1;
    inset: auto -15% -35% 35%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgb(var(--card-rgb, var(--accent-rgb)) / 30%), transparent 66%);
    content: "";
    transition:
      scale 700ms var(--ease),
      translate 700ms var(--ease),
      opacity 700ms ease;
  }

  /* Signalnaht am Kartenboden – zündet beim Hover */
  .world-card::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgb(var(--card-rgb, var(--accent-rgb)) / 85%), transparent);
    box-shadow: 0 0 16px rgb(var(--card-rgb, var(--accent-rgb)) / 55%);
    content: "";
    opacity: 0;
    transition: opacity var(--t-hover) ease;
  }

  .world-card:is(:hover, :focus-visible) {
    border-color: rgb(var(--card-rgb, var(--accent-rgb)) / 40%);
    translate: 0 -4px;
  }

  .world-card:is(:hover, :focus-visible)::before {
    scale: 1.15;
    translate: -5% -5%;
  }

  .world-card:is(:hover, :focus-visible)::after {
    opacity: 1;
  }

  .world-card[data-world="ai"] {
    --card-rgb: 207 134 80;
  }

  .world-card[data-world="apps"] {
    --card-rgb: 99 166 137;
  }

  .world-card[data-world="books"] {
    --card-rgb: 190 140 78;
  }

  .world-card[data-world="music"] {
    --card-rgb: 222 64 38;
  }

  .world-card-index {
    color: rgb(255 255 255 / 8%);
    font-family: var(--font-mono);
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1;
    -webkit-text-stroke: 1px rgb(255 255 255 / 22%);
    transition: -webkit-text-stroke-color var(--t-hover) ease;
  }

  @media (forced-colors: active) {
    .world-card-index {
      color: CanvasText;
      -webkit-text-stroke: 0;
    }
  }

  .world-card:is(:hover, :focus-visible) .world-card-index {
    -webkit-text-stroke-color: rgb(var(--card-rgb, var(--accent-rgb)) / 75%);
  }

  .world-card h3 {
    max-width: 10ch;
    margin-bottom: 0.8rem;
    font-size: clamp(2.1rem, 4vw, 4.4rem);
  }

  .world-card p {
    max-width: 34rem;
    color: var(--text-soft);
  }

  .world-arrow {
    position: absolute;
    top: 1.4rem;
    right: 1.4rem;
    display: grid;
    width: 2.8rem;
    height: 2.8rem;
    place-items: center;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    transition:
      background 180ms ease,
      border-color 180ms ease,
      rotate 300ms var(--ease);
  }

  .world-card:is(:hover, :focus-visible) .world-arrow {
    rotate: 45deg;
    border-color: rgb(var(--card-rgb, var(--accent-rgb)) / 60%);
    background: rgb(255 255 255 / 7%);
  }

  .highlight-list {
    display: grid;
  }

  .highlight {
    position: relative;
    display: grid;
    grid-template-columns: 5rem minmax(0, 0.8fr) minmax(15rem, 1.2fr) auto;
    gap: clamp(1rem, 4vw, 4rem);
    align-items: center;
    overflow: clip;
    padding-block: clamp(1.4rem, 3vw, 2.2rem);
    border-top: 1px solid var(--line);
    text-decoration: none;
  }

  .highlight::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(90deg, rgb(var(--accent-rgb) / 7%), transparent 55%);
    content: "";
    opacity: 0;
    transition: opacity var(--t-hover) ease;
  }

  .highlight:last-child {
    border-bottom: 1px solid var(--line);
  }

  .highlight:is(:hover, :focus-visible)::before {
    opacity: 1;
  }

  .highlight time,
  .highlight .kind {
    color: var(--text-faint);
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .highlight h3 {
    transition: color var(--t-hover) ease;
  }

  .highlight:is(:hover, :focus-visible) h3 {
    color: var(--accent-hot);
  }

  .highlight p {
    color: var(--text-soft);
  }

  .highlight .arrow {
    color: var(--accent);
    font-size: 1.4rem;
    transition: translate 180ms var(--ease);
  }

  .highlight:is(:hover, :focus-visible) .arrow {
    translate: 0.35rem;
  }

  .product-story {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(20rem, 1.18fr);
    gap: clamp(2.5rem, 8vw, 8rem);
    align-items: center;
    padding-block: clamp(3.5rem, 8vw, 7rem);
  }

  .product-story::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 1px;
    background: var(--seam-faint);
    content: "";
  }

  .product-story:nth-child(even) {
    grid-template-columns: minmax(20rem, 1.18fr) minmax(0, 0.82fr);
  }

  .product-story:nth-child(even) .product-copy {
    order: 2;
  }

  .product-story > * {
    min-width: 0;
  }

  .product-mark {
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 1.4rem;
    border-radius: 22%;
    box-shadow: 0 10px 26px rgb(0 0 0 / 35%);
    object-fit: contain;
    transition: translate var(--t-hover) var(--ease), box-shadow var(--t-hover) ease;
  }

  .product-story:hover .product-mark {
    box-shadow: 0 14px 30px rgb(0 0 0 / 4%), 0 0 22px rgb(var(--accent-rgb) / 25%);
    translate: 0 -3px;
  }

  .product-copy h2,
  .product-copy h3 {
    max-width: 11ch;
    margin-bottom: 1.2rem;
  }

  .product-copy .lead {
    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  }

  .product-copy .tag-row,
  .product-copy .btn-row {
    margin-top: 1.5rem;
  }

  .book-showcase {
    display: grid;
    grid-template-columns: minmax(15rem, 0.7fr) minmax(0, 1.3fr);
    gap: clamp(2.5rem, 8vw, 8rem);
    align-items: start;
  }

  .book-intro {
    position: sticky;
    top: calc(var(--header-height) + 2rem);
  }

  .book-intro h2 {
    max-width: 12ch;
    margin-block: 1rem 1.4rem;
    overflow-wrap: normal;
    word-break: normal;
  }

  .book-controls {
    display: flex;
    gap: 0.6rem;
    margin-top: 1.5rem;
  }

  .carousel-btn {
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    border: 1px solid rgb(23 26 28 / 28%);
    border-radius: 50%;
    background: transparent;
    color: var(--paper-ink);
    cursor: pointer;
    transition:
      background var(--t-hover) ease,
      border-color var(--t-hover) ease,
      scale var(--t-hit) var(--ease-impact);
  }

  .carousel-btn:hover {
    border-color: rgb(23 26 28 / 55%);
    background: rgb(23 26 28 / 6%);
  }

  .carousel-btn:active {
    scale: 0.94;
  }

  .book-rail {
    display: grid;
    grid-auto-columns: minmax(15rem, 65%);
    grid-auto-flow: column;
    gap: clamp(1rem, 2.5vw, 1.8rem);
    align-items: start;
    min-width: 0;
    padding: 1rem 0 2rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
    cursor: grab;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
  }

  .book-rail::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  .book-rail.is-dragging {
    scroll-snap-type: none;
    cursor: grabbing;
    user-select: none;
  }

  .book-rail.is-dragging a {
    pointer-events: none;
  }

  .book-card {
    display: grid;
    align-content: start;
    min-width: 0;
    scroll-snap-align: start;
  }

  .book-cover {
    position: relative;
    display: block;
    width: min(100%, 20rem);
    margin-inline: auto;
    transform: perspective(900px) rotateY(-5deg) rotateX(1deg);
    transform-origin: left center;
    transition:
      transform 500ms var(--ease),
      filter 500ms ease;
    filter: drop-shadow(1.8rem 2rem 1.6rem rgb(42 33 23 / 25%));
  }

  .book-cover::before {
    position: absolute;
    z-index: -1;
    top: 1.3%;
    right: -3.5%;
    bottom: 1.3%;
    width: 5%;
    border-radius: 0 2px 2px 0;
    background: linear-gradient(90deg, #b9b1a2, #eee6d8 60%, #a89e8d);
    content: "";
    transform: skewY(4deg);
  }

  .book-card:hover .book-cover,
  .book-card:focus-within .book-cover {
    transform: perspective(900px) rotateY(1deg) translateY(-0.4rem);
    filter: drop-shadow(1.4rem 2.2rem 1.5rem rgb(42 33 23 / 31%));
  }

  .book-cover img {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 2px 6px 6px 2px;
  }

  .book-meta {
    width: min(100%, 20rem);
    margin: 1.5rem auto 0;
    padding-top: 1rem;
    border-top: 1px solid rgb(23 26 28 / 18%);
  }

  .book-meta h3 {
    color: var(--paper-ink);
    font-size: clamp(1.35rem, 2vw, 1.9rem);
  }

  .book-meta p {
    margin-top: 0.5rem;
    color: #5d5b56;
    font-size: 0.86rem;
  }

  .book-meta a {
    display: inline-block;
    margin-top: 0.8rem;
    color: var(--paper-ink);
    font-size: 0.75rem;
    font-weight: 760;
    text-decoration-color: var(--accent);
    text-underline-offset: 0.25em;
  }

  .flow {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(0.6rem, 1.5vw, 1rem);
    align-items: stretch;
  }

  /* Signal wandert sichtbar durch die Verbindungslinie */
  .flow::before {
    position: absolute;
    z-index: 0;
    top: 50%;
    right: 5%;
    left: 5%;
    height: 1px;
    background:
      linear-gradient(90deg, transparent 0%, rgb(var(--accent-hot-rgb) / 90%) 10%, transparent 20%) no-repeat 0 0 / 60% 100%,
      linear-gradient(90deg, transparent, var(--accent) 15% 85%, transparent);
    content: "";
    animation: flow-pulse 4.5s var(--ease-cine) infinite;
    opacity: 0.5;
  }

  @keyframes flow-pulse {
    from {
      background-position: -60% 0, 0 0;
    }

    to {
      background-position: 165% 0, 0 0;
    }
  }

  .flow-node {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 0;
    min-height: 10rem;
    flex-direction: column;
    justify-content: space-between;
    padding: 1rem;
    border: 1px solid var(--line);
    background: rgb(12 16 19 / 92%);
    transition: border-color var(--t-hover) ease, translate var(--t-hover) var(--ease);
  }

  .flow-node:hover {
    border-color: rgb(var(--accent-rgb) / 40%);
    translate: 0 -3px;
  }

  .flow-node::after {
    position: absolute;
    top: 50%;
    right: -0.55rem;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 1rem rgb(var(--accent-rgb) / 75%);
    content: "";
  }

  .flow-node:last-child::after {
    display: none;
  }

  .flow-node small {
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .flow-node strong {
    font-size: 1rem;
    line-height: 1.2;
  }

  .flow-node span {
    color: var(--text-faint);
    font-size: 0.68rem;
    line-height: 1.4;
  }

  .security-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(2.5rem, 8vw, 8rem);
    align-items: start;
  }

  .security-panel {
    position: relative;
    overflow: clip;
    padding: clamp(1.5rem, 4vw, 3rem);
    border: 1px solid var(--line);
    background:
      linear-gradient(140deg, rgb(var(--accent-rgb) / 9%), transparent 50%),
      var(--surface);
  }

  .security-panel::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 2px;
    background: var(--seam);
    box-shadow: 0 0 14px rgb(var(--accent-rgb) / 35%);
    content: "";
    opacity: 0.65;
  }

  .security-panel .feature-list {
    margin-top: 2rem;
  }

  .music-stage {
    position: relative;
    min-height: clamp(38rem, 76vw, 57rem);
    overflow: clip;
    background: #060504;
  }

  .music-stage picture,
  .music-stage img {
    width: 100%;
    height: 100%;
  }

  .music-stage picture {
    position: absolute;
    inset: 0;
  }

  .music-stage img {
    object-fit: cover;
    object-position: 60% center;
    filter: saturate(0.8) contrast(1.08);
  }

  @media (prefers-reduced-motion: no-preference) {
    .music-stage img {
      animation: stage-drift 26s var(--ease-cine) infinite alternate;
    }
  }

  @keyframes stage-drift {
    from {
      transform: scale(1.02) translateX(0.4%);
    }

    to {
      transform: scale(1.07) translateX(-0.8%);
    }
  }

  .music-stage::after {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(90deg, #070504 0 25%, rgb(7 5 4 / 72%) 52%, transparent 78%),
      linear-gradient(0deg, #070504, transparent 40%),
      radial-gradient(circle at 65% 62%, rgb(223 73 31 / 18%), transparent 23rem);
    content: "";
  }

  /* Lichtspalt am unteren Bühnenrand */
  .music-stage::before {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    background: var(--seam);
    box-shadow: 0 0 24px rgb(var(--accent-rgb) / 50%);
    content: "";
    opacity: 0.9;
  }

  .music-stage-copy {
    position: relative;
    z-index: 2;
    display: flex;
    min-height: inherit;
    flex-direction: column;
    justify-content: center;
    padding-block: var(--section);
  }

  .music-stage-copy h2 {
    max-width: 8ch;
  }

  .music-stage-copy .lead {
    max-width: 34rem;
    margin-block: 1.5rem 2rem;
  }

  .release-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
  }

  .release-card {
    position: relative;
    min-width: 0;
    overflow: clip;
    border: 1px solid var(--line);
    background: var(--surface);
    transition: border-color var(--t-hover) ease, translate var(--t-hover) var(--ease);
  }

  .release-card::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: var(--seam);
    box-shadow: var(--glow);
    content: "";
    opacity: 0;
    transition: opacity var(--t-hover) ease;
  }

  .release-card img {
    width: 100%;
    aspect-ratio: 1;
    filter: brightness(0.88);
    object-fit: cover;
    transition: filter var(--t-hover) ease, transform 600ms var(--ease);
  }

  @media (hover: hover) and (pointer: fine) {
    .release-card:hover {
      border-color: rgb(var(--accent-rgb) / 40%);
      translate: 0 -4px;
    }

    .release-card:hover img {
      filter: brightness(1);
      transform: scale(1.035);
    }

    .release-card:hover::after {
      opacity: 1;
    }
  }

  .release-card-copy {
    padding: 1rem;
  }

  .release-card small {
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .release-card h3 {
    margin-top: 0.45rem;
    font-size: 1.1rem;
    letter-spacing: -0.025em;
  }

  .release-card p {
    margin-top: 0.55rem;
    color: var(--text-soft);
    font-size: 0.76rem;
  }

  /* Album-Banner: bewusst gebrochene Symmetrie im Release-Raster */
  .release-card--feature {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 2.1fr);
    align-items: center;
    background:
      radial-gradient(circle at 12% 115%, rgb(var(--accent-rgb) / 18%), transparent 55%),
      var(--surface);
  }

  .release-card--feature .release-card-copy {
    max-width: 46rem;
    padding: clamp(1.2rem, 3.5vw, 2.6rem);
  }

  .release-card--feature h3 {
    font-size: clamp(1.5rem, 2.8vw, 2.6rem);
  }

  .release-card--feature p {
    font-size: 0.9rem;
  }

  .platform-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
  }

  .platform-row a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.62rem 0.95rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--text-soft);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-decoration: none;
    text-transform: uppercase;
    transition:
      border-color var(--t-hover) ease,
      color var(--t-hover) ease,
      background var(--t-hover) ease,
      translate var(--t-hover) var(--ease);
  }

  .platform-row a:is(:hover, :focus-visible) {
    border-color: rgb(var(--accent-rgb) / 55%);
    background: rgb(var(--accent-rgb) / 8%);
    color: var(--text);
    translate: 0 -2px;
  }

  .split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 8vw, 8rem);
    align-items: start;
  }

  .split > * {
    min-width: 0;
  }

  .portrait-frame {
    position: relative;
    width: min(100%, 28rem);
    margin-inline: auto;
  }

  .portrait-frame::before {
    position: absolute;
    z-index: -1;
    inset: -1.1rem 1.1rem 1.1rem -1.1rem;
    border: 1px solid rgb(var(--accent-rgb) / 48%);
    content: "";
    transition: translate 500ms var(--ease);
  }

  .portrait-frame::after {
    position: absolute;
    right: 1.1rem;
    bottom: 1.1rem;
    left: -1.1rem;
    height: 1px;
    background: var(--seam);
    box-shadow: 0 0 14px rgb(var(--accent-rgb) / 40%);
    content: "";
    opacity: 0.55;
  }

  .portrait-frame:hover::before {
    translate: 0.35rem 0.35rem;
  }

  .portrait-frame img {
    width: 100%;
    filter: saturate(0.85);
    transition: filter 500ms ease;
  }

  .portrait-frame:hover img {
    filter: saturate(1);
  }

  .timeline {
    display: grid;
  }

  .timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr);
    gap: clamp(1rem, 4vw, 4rem);
    padding-block: 1.8rem;
    border-top: 1px solid var(--line);
    transition: background var(--t-hover) ease;
  }

  .timeline-item::before {
    position: absolute;
    top: 2.35rem;
    left: -1.1rem;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 10px rgb(var(--accent-rgb) / 60%);
    content: "";
    opacity: 0;
    transition: opacity var(--t-hover) ease;
  }

  .timeline-item:hover {
    background: linear-gradient(90deg, rgb(255 255 255 / 2.5%), transparent 60%);
  }

  .timeline-item:hover::before {
    opacity: 1;
  }

  .timeline-item:last-child {
    border-bottom: 1px solid var(--line);
  }

  .timeline-item time {
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .timeline-item p {
    margin-top: 0.6rem;
    color: var(--text-soft);
  }

  .detail-hero {
    position: relative;
    overflow: clip;
    padding-block: clamp(5rem, 11vw, 9rem);
    border-bottom: 1px solid var(--line);
  }

  .detail-hero::before {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 82% 8%, rgb(var(--accent-rgb) / 12%), transparent 32rem);
    content: "";
    pointer-events: none;
  }

  .detail-hero::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 50%;
    width: min(40rem, 80%);
    height: 1px;
    background: var(--seam);
    box-shadow: 0 0 18px rgb(var(--accent-rgb) / 30%);
    content: "";
    opacity: 0.75;
    pointer-events: none;
    translate: -50% 0;
  }

  .detail-hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(18rem, 1.15fr);
    gap: clamp(2.5rem, 8vw, 8rem);
    align-items: center;
  }

  .detail-hero-copy h1 {
    margin-block: 1rem 1.5rem;
    font-size: clamp(2.8rem, 5.4vw, 5.5rem);
  }

  .detail-hero-copy .tag-row,
  .detail-hero-copy .btn-row {
    margin-top: 1.5rem;
  }

  .detail-visual {
    min-width: 0;
  }

  .ai-project-visual {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: clip;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    background: #0b0e10;
    box-shadow: var(--shadow);
    isolation: isolate;
  }

  .ai-project-visual picture,
  .ai-project-visual img {
    width: 100%;
    height: 100%;
  }

  .ai-project-visual img {
    object-fit: cover;
    filter: saturate(0.82) contrast(1.08);
  }

  @media (prefers-reduced-motion: no-preference) {
    .ai-project-visual img {
      animation: stage-drift 30s var(--ease-cine) infinite alternate;
    }
  }

  .ai-project-visual::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    background:
      linear-gradient(180deg, transparent 35%, rgb(5 7 8 / 84%)),
      linear-gradient(90deg, rgb(var(--accent-rgb) / 13%), transparent 45%);
    content: "";
    pointer-events: none;
  }

  .ai-project-visual figcaption {
    position: absolute;
    z-index: 2;
    right: clamp(1rem, 3vw, 1.8rem);
    bottom: clamp(1rem, 3vw, 1.8rem);
    left: clamp(1rem, 3vw, 1.8rem);
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
  }

  .ai-project-visual figcaption span {
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .ai-project-visual figcaption strong {
    max-width: 14rem;
    color: var(--text);
    font-size: clamp(1rem, 2vw, 1.35rem);
    line-height: 1.05;
    text-align: right;
  }

  .detail-visual--book {
    display: grid;
    place-items: center;
    min-height: 32rem;
    background:
      radial-gradient(circle, rgb(var(--accent-rgb) / 18%), transparent 57%),
      linear-gradient(145deg, var(--surface), transparent);
  }

  .detail-visual--book .book-cover {
    width: min(58%, 22rem);
  }

  .facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-block: 1px solid var(--line);
  }

  .fact {
    position: relative;
    min-width: 0;
    padding: 1.5rem;
    transition: background var(--t-hover) ease;
  }

  .fact:hover {
    background: rgb(255 255 255 / 2%);
  }

  .fact + .fact {
    border-left: 1px solid var(--line);
  }

  .fact dt {
    color: var(--text-faint);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .fact dd {
    margin-top: 0.5rem;
    color: var(--text);
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
    font-weight: 650;
    overflow-wrap: anywhere;
  }

  .amazon-links {
    display: grid;
    gap: 0.65rem;
    margin-top: 1.5rem;
  }

  .amazon-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--line);
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    transition:
      border-color var(--t-hover) ease,
      background var(--t-hover) ease,
      translate var(--t-hover) var(--ease);
  }

  .amazon-links a::after {
    color: var(--accent);
    content: "↗";
    transition: translate var(--t-hover) var(--ease);
  }

  .amazon-links a:is(:hover, :focus-visible) {
    border-color: rgb(var(--accent-rgb) / 50%);
    background: rgb(var(--accent-rgb) / 6%);
    translate: 0 -2px;
  }

  .amazon-links a:is(:hover, :focus-visible)::after {
    translate: 0.18rem -0.12rem;
  }

  .contact-panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    gap: clamp(2rem, 6vw, 6rem);
    align-items: center;
    overflow: clip;
    padding: clamp(1.6rem, 5vw, 4rem);
    border: 1px solid var(--line);
    background:
      radial-gradient(circle at 85% 10%, rgb(var(--accent-rgb) / 15%), transparent 25rem),
      var(--surface);
  }

  .contact-panel::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 2px;
    background: var(--seam);
    box-shadow: 0 0 16px rgb(var(--accent-rgb) / 35%);
    content: "";
    opacity: 0.7;
  }

  .contact-actions {
    display: grid;
    gap: 0.8rem;
  }

  .contact-actions a {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem;
    border: 1px solid var(--line);
    background: rgb(255 255 255 / 1.5%);
    color: var(--text);
    text-decoration: none;
    transition:
      border-color var(--t-hover) ease,
      background var(--t-hover) ease,
      translate var(--t-hover) var(--ease);
  }

  .contact-actions a b {
    transition: translate var(--t-hover) var(--ease);
  }

  .contact-actions a:is(:hover, :focus-visible) {
    border-color: rgb(var(--accent-rgb) / 50%);
    background: rgb(var(--accent-rgb) / 7%);
    translate: 0 -2px;
  }

  .contact-actions a:is(:hover, :focus-visible) b {
    translate: 0.25rem 0;
  }

  .contact-actions a span {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .legal-shell {
    padding-block: clamp(5rem, 10vw, 8rem);
  }

  .legal-shell h1 {
    margin-block: 1rem 2.5rem;
    font-size: clamp(3rem, 7vw, 6.5rem);
  }

  .legal-card {
    position: relative;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: clip;
    padding: clamp(1.4rem, 4vw, 3.5rem);
    border: 1px solid var(--line);
    background: var(--surface);
    overflow-wrap: anywhere;
  }

  .legal-card::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 2px;
    background: var(--seam);
    content: "";
    opacity: 0.5;
  }

  .not-found {
    display: grid;
    min-height: calc(100svh - var(--header-height));
    place-items: center;
    padding-block: 5rem;
    text-align: center;
  }

  .not-found strong {
    display: block;
    color: var(--accent);
    font-family: var(--font-editorial);
    font-size: clamp(6rem, 22vw, 18rem);
    font-style: italic;
    font-weight: 400;
    letter-spacing: -0.08em;
    line-height: 0.7;
    text-shadow: 0 0 60px rgb(var(--accent-rgb) / 35%);
  }

  .not-found h1 {
    margin-top: 2rem;
    font-size: clamp(2.2rem, 5vw, 4.5rem);
  }

  .not-found p {
    max-width: 34rem;
    margin: 1.2rem auto 1.8rem;
    color: var(--text-soft);
  }
}

@layer utilities {
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    clip-path: inset(50%);
  }

  .mt-1 {
    margin-top: 1rem;
  }

  .mt-2 {
    margin-top: 2rem;
  }

  .mt-3 {
    margin-top: 3rem;
  }

  .max-36 {
    max-width: 36rem;
  }

  .max-48 {
    max-width: 48rem;
  }
}

@layer responsive {
  @media (max-width: 1080px) {
    .site-nav {
      gap: 0;
    }

    .site-nav a {
      padding-inline: 0.42rem;
      font-size: 0.72rem;
    }

    .site-nav a::after {
      right: 0.42rem;
      left: 0.42rem;
    }

    .hero-grid,
    .page-hero-grid,
    .detail-hero-grid {
      grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.78fr);
    }

    .release-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 860px) {
    :root {
      --header-height: 4.25rem;
    }

    .nav-toggle {
      display: block;
    }

    .site-nav {
      position: absolute;
      top: calc(100% + 1px);
      right: 0;
      left: 0;
      display: grid;
      max-height: 0;
      overflow: clip;
      border-bottom: 1px solid transparent;
      background: rgb(7 9 11 / 98%);
      opacity: 0;
      pointer-events: none;
      transition:
        max-height 320ms var(--ease),
        opacity 220ms ease,
        border-color 220ms ease;
    }

    .site-header[data-open="true"] .site-nav {
      max-height: calc(100svh - var(--header-height));
      overflow-y: auto;
      border-color: var(--line);
      opacity: 1;
      pointer-events: auto;
    }

    .site-nav a {
      width: min(calc(100% - (2 * var(--gutter))), var(--container));
      margin-inline: auto;
      padding: 0.95rem 0;
      border-top: 1px solid var(--line);
      font-size: 0.92rem;
    }

    .site-nav a::after {
      display: none;
    }

    .site-nav .nav-contact {
      margin: 0 auto 1rem;
      border: 0;
      border-radius: 0;
      padding-inline: 0;
    }

    .hero {
      min-height: auto;
    }

    .hero-grid,
    .page-hero-grid,
    .detail-hero-grid,
    .book-showcase,
    .security-grid,
    .split,
    .contact-panel {
      grid-template-columns: minmax(0, 1fr);
    }

    .hero-grid {
      padding-block: 4.5rem 2rem;
    }

    .hero-scene {
      min-height: clamp(24rem, 90vw, 38rem);
    }

    .hero-scene picture {
      inset: 0 -6% 4% 4%;
    }

    .hero-note {
      left: 0;
    }

    .section-head {
      grid-template-columns: minmax(0, 1fr);
      gap: 1.5rem;
      align-items: start;
    }

    .world-card:nth-child(n) {
      grid-column: span 6;
    }

    .highlight {
      grid-template-columns: 4rem minmax(0, 1fr) auto;
    }

    .highlight p {
      display: none;
    }

    .product-story,
    .product-story:nth-child(even) {
      grid-template-columns: minmax(0, 1fr);
      gap: 2.5rem;
    }

    .product-story:nth-child(even) .product-copy {
      order: initial;
    }

    .book-intro {
      position: static;
    }

    .book-rail {
      grid-auto-columns: minmax(15rem, 58%);
    }

    .flow {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .flow::before,
    .flow-node::after {
      display: none;
    }

    .flow-node:last-child {
      grid-column: span 2;
    }

    .footer-grid {
      grid-template-columns: minmax(0, 1fr);
    }

    .detail-visual {
      order: -1;
    }

    .facts {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fact:nth-child(3) {
      border-left: 0;
      border-top: 1px solid var(--line);
    }

    .fact:nth-child(4) {
      border-top: 1px solid var(--line);
    }

    .release-card--feature {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  @media (max-width: 620px) {
    :root {
      --gutter: 1rem;
    }

    h1 {
      font-size: clamp(3rem, 16vw, 4.8rem);
    }

    h2 {
      font-size: clamp(2.2rem, 12vw, 3.8rem);
    }

    .brand span span {
      display: none;
    }

    .hero-copy h1 {
      max-width: 100%;
      font-size: clamp(2.65rem, 11.5vw, 3.05rem);
    }

    .hero-scene {
      min-height: 25rem;
    }

    .hero-scene picture {
      inset: 0 -32% 4% -2%;
    }

    .hero-note {
      top: 0;
      max-width: 10rem;
    }

    .hero-signal {
      right: 1rem;
      bottom: 1.5rem;
      width: 9rem;
    }

    .world-index {
      grid-template-columns: minmax(0, 1fr);
    }

    .world-card:nth-child(n) {
      grid-column: auto;
      min-height: 18rem;
    }

    .highlight {
      grid-template-columns: 3.25rem minmax(0, 1fr) auto;
      gap: 0.8rem;
    }

    .highlight .kind {
      font-size: 0.58rem;
    }

    .highlight h3 {
      font-size: 1.2rem;
    }

    .book-rail {
      grid-auto-columns: 82%;
    }

    .book-card > .book-cover,
    .book-card > .book-meta {
      width: min(94%, 18rem);
    }

    .flow {
      grid-template-columns: minmax(0, 1fr);
    }

    .flow-node:last-child {
      grid-column: auto;
    }

    .stat-strip {
      grid-template-columns: minmax(0, 1fr);
    }

    .stat + .stat {
      border-top: 1px solid var(--line);
      border-left: 0;
    }

    .card-grid {
      grid-template-columns: minmax(0, 1fr);
    }

    .card[class*="card--span"] {
      grid-column: auto;
    }

    .release-grid {
      grid-template-columns: minmax(0, 1fr);
    }

    .release-card--feature {
      grid-column: auto;
    }

    .music-stage {
      min-height: 44rem;
    }

    .music-stage img {
      object-position: 66% center;
    }

    .music-stage::after {
      background:
        linear-gradient(0deg, #070504 4%, rgb(7 5 4 / 78%) 58%, rgb(7 5 4 / 25%)),
        radial-gradient(circle at 65% 62%, rgb(223 73 31 / 18%), transparent 20rem);
    }

    .music-stage-copy {
      justify-content: flex-end;
    }

    .timeline-item {
      grid-template-columns: minmax(0, 1fr);
      gap: 0.5rem;
    }

    .footer-nav {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-meta {
      flex-direction: column;
    }

    .facts {
      grid-template-columns: minmax(0, 1fr);
    }

    .fact + .fact,
    .fact:nth-child(3) {
      border-top: 1px solid var(--line);
      border-left: 0;
    }

    .detail-visual--book {
      min-height: 25rem;
    }

    .detail-visual--book .book-cover {
      width: min(68%, 18rem);
    }

    .btn {
      width: 100%;
    }

    .btn-row {
      align-items: stretch;
    }
  }

  @media (max-width: 370px) {
    .brand span {
      max-width: 9rem;
    }

    .footer-nav {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
      scroll-behavior: auto !important;
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
    }

    .hero-scene picture,
    .hero-scene img,
    .hero-note,
    .hero-signal,
    .book-cover,
    .music-stage img,
    .ai-project-visual img,
    .media-frame,
    .product-stage .media-frame {
      transform: none !important;
    }

    .marquee-track {
      animation: none !important;
      transform: none !important;
    }
  }

  @media (forced-colors: active) {
    .btn,
    .card,
    .media-frame,
    .world-card,
    .flow-node,
    .release-card,
    .platform-row a {
      border: 1px solid CanvasText;
    }
  }
}