@font-face {
  font-family: Inter;
  src: url(/assets/fonts/inter-latin-wght.woff2) format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url(/assets/fonts/jetbrains-mono-latin-wght.woff2) format('woff2');
  font-weight: 100 800;
  font-display: swap;
}
:root {
  --bg: #050607;
  --fg: #ecedee;
  --soft: #aab0b4;
  --dim: #7d8489;
  --line: #1d2226;
  --ac: #5ee1ff;
  --mono: 'JetBrains Mono', Menlo, monospace;
  --sans: Inter, 'Helvetica Neue', Arial, sans-serif;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  background: var(--bg);
  scroll-padding-top: 32px;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 300 16px/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
}
a {
  color: inherit;
  text-decoration: none;
}
:focus-visible {
  outline: 1px solid var(--ac);
  outline-offset: 3px;
}
ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
::selection {
  background: rgba(94, 225, 255, 0.25);
}
.skip {
  position: absolute;
  left: -999px;
  top: 8px;
  background: var(--ac);
  color: #000;
  padding: 6px 12px;
  z-index: 20;
}
.skip:focus {
  left: 8px;
}

.table {
  position: relative;
  display: grid;
  grid-template-columns: 272px minmax(0, 560px) minmax(0, 1fr);
  column-gap: 64px;
  padding-left: 48px;
  max-width: 1920px;
  margin: 0 auto;
}

/* links: schmal, sticky */
.side {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 48px 0 36px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.name {
  margin: 0;
  font-weight: 300;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.025em;
}
.role {
  margin: 10px 0 0;
  font: 400 12px/1.6 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ac);
}
.tag {
  margin: 18px 0 0;
  color: var(--dim);
  font-size: 14px;
  line-height: 1.6;
  max-width: 250px;
}
nav {
  margin-top: 36px;
}
nav li {
  margin: 0;
}
nav a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 7px 0;
  font: 400 12px/1.4 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  transition: color 0.25s;
}
.bar {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--line);
  transition:
    width 0.3s,
    background 0.3s;
}
nav a:hover,
nav a.active {
  color: var(--fg);
}
nav a:hover .bar,
nav a.active .bar {
  width: 48px;
  background: var(--ac);
}
.meta {
  margin: auto 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
}
.meta div {
  display: flex;
  flex-direction: column-reverse;
}
.meta dt {
  font: 400 12px/1.4 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}
.meta dd {
  margin: 0;
  font: 200 22px/1.2 var(--sans);
  letter-spacing: -0.02em;
}
.links {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
  font: 400 12px/1.6 var(--mono);
  color: var(--dim);
}
.links a {
  color: var(--fg);
  transition: color 0.2s;
}
.links a:hover,
.links a:focus-visible {
  color: var(--ac);
}

/* Mitte: ruhige Liste */
main {
  padding: 48px 0 0;
}
section {
  margin-bottom: 104px;
}
.sec {
  margin: 0 0 30px;
  font: 400 12px/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ac);
}
.lead {
  margin: 0 0 22px;
  font-size: 26px;
  line-height: 1.4;
  font-weight: 200;
  letter-spacing: -0.015em;
}
#ueber p {
  color: var(--soft);
}
#ueber .lead {
  color: var(--fg);
}
.hint {
  margin: 28px 0 0 !important;
  font: 400 12px/1.7 var(--mono);
  letter-spacing: 0.06em;
  color: var(--dim) !important;
}
.hint::before {
  content: '→ ';
  color: var(--ac);
}
.list {
  border-top: 1px solid var(--line);
}
.item {
  position: relative;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  column-gap: 16px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
  transition: opacity 0.3s;
}
.item::before {
  content: '';
  position: absolute;
  inset: 0 -20px 0 -20px;
  background: linear-gradient(90deg, rgba(94, 225, 255, 0.07), transparent 80%);
  opacity: 0;
  transition: opacity 0.3s;
  z-index: -1;
}
.item:hover::before,
.item:focus-within::before {
  opacity: 1;
}
.year {
  padding-top: 5px;
  font: 400 12px/1.6 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
}
h3 {
  margin: 0;
  font-weight: 300;
  font-size: 21px;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.cv h3 {
  font-size: 17px;
}
.t {
  transition: color 0.25s;
}
.arr {
  display: inline-block;
  font-size: 0.75em;
  color: var(--dim);
  transition:
    transform 0.25s,
    color 0.25s;
}
a:hover .arr,
a:focus-visible .arr {
  transform: translate(3px, -3px);
  color: var(--ac);
}
.item:hover .t,
.item:focus-within .t {
  color: var(--ac);
}
.item p {
  margin: 8px 0 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--dim);
}
.item:hover p,
.item:focus-within p {
  color: var(--soft);
}
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pills li {
  padding: 2px 10px;
  border: 1px solid var(--line);
  border-radius: 99px;
  font: 400 12px/1.8 var(--mono);
  color: var(--soft);
  letter-spacing: 0.02em;
}
.tools .pills li {
  color: var(--ac);
  border-color: rgba(94, 225, 255, 0.2);
  background: rgba(94, 225, 255, 0.05);
}
.tools {
  display: grid;
  grid-template-columns: 150px 1fr;
  margin: 0;
  border-top: 1px solid var(--line);
}
.tools dt,
.tools dd {
  margin: 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.tools dt {
  font: 400 12px/1.8 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ac);
}
.tools dd {
  min-width: 0;
  padding-left: 16px;
}
.mail {
  display: inline-block;
  font: 200 clamp(24px, 2.6vw, 36px)/1.2 var(--sans);
  letter-spacing: -0.025em;
  border-bottom: 1px solid var(--line);
  padding-bottom: 6px;
  transition:
    color 0.25s,
    border-color 0.25s;
  word-break: break-all;
}
.mail:hover,
.mail:focus-visible {
  color: var(--ac);
  border-color: var(--ac);
}
.gh {
  margin: 18px 0 0;
  font: 400 12px var(--mono);
  color: var(--dim);
}
.gh a:hover {
  color: var(--ac);
}
footer {
  padding: 28px 0 40px;
  border-top: 1px solid var(--line);
  font: 400 12px/1.6 var(--mono);
  letter-spacing: 0.08em;
  color: var(--dim);
}
footer p {
  margin: 0;
}
footer a:hover {
  color: var(--ac);
}

@media (hover: hover) {
  #projekte .list:has(.item:hover) .item:not(:hover) {
    opacity: 0.4;
  }
}

/* rechts: sticky Vorschau */
.stage {
  position: sticky;
  top: 0;
  height: 100vh;
  border-left: 1px solid var(--line);
  overflow: hidden;
  background: var(--bg);
}
.frame {
  position: absolute;
  inset: 0;
}
.corner {
  position: absolute;
  margin: 0;
  z-index: 3;
  font: 400 12px/1.6 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}
.corner::before {
  content: '';
  display: block;
  width: 14px;
  height: 14px;
  border-top: 1px solid var(--ac);
  border-left: 1px solid var(--ac);
  margin-bottom: 8px;
}
.tl {
  top: 28px;
  left: 28px;
}
.tr {
  top: 28px;
  right: 28px;
  text-align: right;
}
.tr::before {
  margin-left: auto;
  transform: scaleX(-1);
}
.pv {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 0.45s ease;
}
.pv-default {
  opacity: 1;
}
.cloud {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  transform-origin: 50% 50%;
}
.cloud .d0 {
  stroke: var(--ac);
  stroke-opacity: 1;
}
.cloud .d1 {
  stroke-opacity: 1;
}
.cloud .d2 {
  stroke-opacity: 0.85;
}
.cloud .d3 {
  stroke-opacity: 0.65;
}
.cloud .d4 {
  stroke-opacity: 0.45;
}
.cloud .d5 {
  stroke-opacity: 0.3;
}
.pv-default::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 45%, rgba(5, 6, 7, 0.75) 100%),
    linear-gradient(0deg, rgba(5, 6, 7, 0.85), transparent 22%);
}
.scanline {
  position: absolute;
  left: 0;
  right: 0;
  height: 120px;
  top: -120px;
  background: linear-gradient(0deg, rgba(94, 225, 255, 0.16), transparent);
  border-bottom: 1px solid rgba(94, 225, 255, 0.6);
  z-index: 2;
}
.cap {
  position: absolute;
  z-index: 3;
  left: 28px;
  bottom: 28px;
  margin: 0;
  font: 400 12px/1.8 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}

.pv:not(.pv-default) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
  padding: 0 40px;
  transform: translateY(10px);
  transition:
    opacity 0.45s ease,
    transform 0.5s ease;
}
.pv .mini {
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  border: 1px solid var(--line);
  background: #07090a;
  overflow: hidden;
}
.mini .d0 {
  stroke: var(--ac);
}
.mini .d1 {
  stroke-opacity: 0.95;
}
.mini .d2 {
  stroke-opacity: 0.7;
}
.mini .d3 {
  stroke-opacity: 0.45;
}
figcaption {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
figcaption b {
  font-weight: 300;
  font-size: 22px;
  letter-spacing: -0.01em;
}
figcaption b.big {
  font-weight: 200;
  font-size: clamp(56px, 6vw, 96px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ac);
}
figcaption span {
  font: 400 12px/1.8 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
}

.table:has(#i-ki:is(:hover, :focus-within)) .pv-ki,
.table:has(#i-agenten:is(:hover, :focus-within)) .pv-agenten,
.table:has(#i-twinestate:is(:hover, :focus-within)) .pv-twinestate,
.table:has(#i-scan:is(:hover, :focus-within)) .pv-scan,
.table:has(#i-xr:is(:hover, :focus-within)) .pv-xr,
.table:has(#i-ios:is(:hover, :focus-within)) .pv-ios,
.table:has(#i-winthereum:is(:hover, :focus-within)) .pv-winthereum,
.table:has(#i-strikex:is(:hover, :focus-within)) .pv-strikex,
.table:has(#i-prisma:is(:hover, :focus-within)) .pv-prisma {
  opacity: 1;
  transform: none;
}
.table:has(#projekte .item:is(:hover, :focus-within)) .pv-default {
  opacity: 0.07;
}
.table:has(#projekte .item:is(:hover, :focus-within)) .pv-default .scanline {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .scanline {
    animation: sweep 7s linear infinite;
  }
  @keyframes sweep {
    to {
      transform: translateY(calc(100vh + 120px));
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    transition: none !important;
  }
}
#vorschau {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 0.8s ease;
}
#vorschau.ready {
  opacity: 1;
}
.cloud {
  z-index: 0;
}
@media (scripting: enabled) {
  .stage .cloud {
    display: none;
  }
}

/* ---------- Bühne: Scroll-Fahrt ---------- */
.story {
  position: relative;
  background: var(--bg);
}
.pin {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 34px;
  padding: 96px 48px 72px;
}
.pin canvas,
.pin .fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.fallback {
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  opacity: 0.55;
}
.fallback .d0 {
  stroke: var(--ac);
}
.fallback .d1 {
  stroke-opacity: 1;
}
.fallback .d2 {
  stroke-opacity: 0.85;
}
.fallback .d3 {
  stroke-opacity: 0.65;
}
.fallback .d4 {
  stroke-opacity: 0.45;
}
.fallback .d5 {
  stroke-opacity: 0.3;
}
.pin canvas {
  opacity: 0;
  transition: opacity 1.4s ease;
}
.pin canvas.ready {
  opacity: 1;
}
.scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 48%, transparent 52%, rgba(5, 6, 7, 0.8) 100%),
    linear-gradient(0deg, rgba(5, 6, 7, 0.75), transparent 34%);
}
.hud {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  justify-content: space-between;
  padding: 28px 48px;
  z-index: 3;
  font: 400 12px/1.4 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  pointer-events: none;
}
.hud a {
  pointer-events: auto;
  transition: color 0.25s;
}
.hud a:hover,
.hud a:focus-visible {
  color: var(--ac);
}
.ph-n {
  color: var(--ac);
}
.skipride {
  display: none;
}
.beat {
  position: relative;
  z-index: 2;
  max-width: 760px;
  text-shadow:
    0 0 24px rgba(5, 6, 7, 0.9),
    0 0 3px rgba(5, 6, 7, 0.7);
}
.beat::before {
  content: '';
  position: absolute;
  inset: -60px -90px;
  background: radial-gradient(
    closest-side,
    rgba(5, 6, 7, 0.8),
    rgba(5, 6, 7, 0.45) 60%,
    transparent
  );
  z-index: -1;
  pointer-events: none;
}
.beat h1 {
  margin: 0;
  font-weight: 200;
  font-size: clamp(46px, 7vw, 104px);
  line-height: 1;
  letter-spacing: -0.035em;
}
.role {
  margin: 16px 0 0;
  font: 400 12px/1.6 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ac);
}
.beat .claim {
  margin: 26px 0 0;
  font: 200 clamp(22px, 2.5vw, 34px)/1.3 var(--sans);
  letter-spacing: -0.015em;
  color: var(--fg);
  max-width: 20em;
}
.num {
  margin: 0;
  font: 200 clamp(64px, 11vw, 168px)/0.95 var(--sans);
  letter-spacing: -0.045em;
  color: var(--ac);
}
.lab {
  margin: 14px 0 0;
  font: 400 12px/1.7 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--soft);
  max-width: 22em;
}
.claim2 {
  margin: 0;
  font: 200 clamp(34px, 4.6vw, 68px)/1.08 var(--sans);
  letter-spacing: -0.03em;
}
.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 48px;
  margin-top: 30px;
}
.stats b {
  display: block;
  font: 200 clamp(34px, 4vw, 56px)/1 var(--sans);
  letter-spacing: -0.03em;
  color: var(--ac);
}
.stats span {
  display: block;
  margin-top: 8px;
  font: 400 12px/1.6 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--soft);
}
.more {
  margin: 30px 0 0;
}
.more a {
  font: 400 12px/1.6 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--soft);
  border-bottom: 1px solid var(--line);
  padding-bottom: 4px;
  transition:
    color 0.25s,
    border-color 0.25s;
}
.more a:hover,
.more a:focus-visible {
  color: var(--ac);
  border-color: var(--ac);
}
.cue,
.prog {
  display: none;
}

/* Fahrt aktiv: hoch, Beats einzeln ein-/ausblenden */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .story {
    height: 560vh;
  }
  .pin .fallback {
    display: none;
  }
  .pin {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    min-height: 0;
    display: block;
    padding: 0;
  }
  .scrim {
    opacity: calc(1 - var(--hand, 0));
  }
  .hud {
    padding: 28px 48px;
  }
  .skipride {
    display: inline;
  }
  .beat {
    position: absolute;
    left: 48px;
    bottom: 11vh;
    opacity: 0;
    transform: translateY(18px);
    transition:
      opacity 0.6s ease,
      transform 0.8s ease;
    pointer-events: none;
  }
  .beat.on {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .b4 {
    bottom: 10vh;
    max-width: calc(100vw - 48px);
  }
  .cue {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: 26px;
    margin: 0;
    transform: translateX(-50%);
    font: 400 12px/1 var(--mono);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--dim);
    transition: opacity 0.5s;
    opacity: calc(1 - var(--p, 0) * 40);
  }
  .cue i {
    display: block;
    width: 1px;
    height: 34px;
    background: linear-gradient(var(--ac), transparent);
  }
  .prog {
    display: block;
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--line);
  }
  .prog i {
    display: block;
    height: 100%;
    background: var(--ac);
    transform-origin: 0 50%;
    transform: scaleX(var(--p, 0));
  }
}
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) and (min-width: 1100px) {
  .b4 {
    max-width: min(60vw, 820px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pin {
    justify-content: flex-end;
    gap: 56px;
    padding-bottom: 56px;
  }
  .beat {
    text-shadow: none;
  }
}
.table {
  border-top: 1px solid var(--line);
}

/* unter 1100: einspaltig, Vorschau entfällt, Bilder inline */
@media (max-width: 1099px) {
  .table {
    display: block;
    max-width: 720px;
    padding: 0 28px;
  }
  .stage {
    display: none;
  }
  .hint {
    display: none;
  }
  .side {
    position: static;
    height: auto;
    padding: 44px 0 0;
    overflow: visible;
    display: block;
  }
  .name {
    font-size: 34px;
  }
  .tag {
    display: block;
    font-size: 16px;
    max-width: none;
  }
  nav {
    margin-top: 26px;
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(5, 6, 7, 0.92);
    backdrop-filter: blur(8px);
    margin-left: -28px;
    margin-right: -28px;
    padding: 0 28px;
    border-bottom: 1px solid var(--line);
  }
  nav ul {
    display: flex;
    overflow-x: auto;
    gap: 18px;
    scrollbar-width: none;
  }
  nav a {
    white-space: nowrap;
    padding: 14px 0;
  }
  .bar {
    display: none;
  }
  nav a.active {
    box-shadow: inset 0 -1px 0 var(--ac);
  }
  .meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 36px 0 0;
    border-top: 0;
    padding-top: 0;
  }
  .meta div {
    flex-direction: column-reverse;
  }
  .meta dd {
    font-size: 28px;
  }
  .links {
    display: none;
  }
  main {
    padding-top: 48px;
  }
  section {
    margin-bottom: 76px;
  }
  .lead {
    font-size: 22px;
  }
  #projekte .list:has(.item:hover) .item:not(:hover) {
    opacity: 1;
  }
  .mail {
    font-size: clamp(20px, 6.4vw, 28px);
  }
}
@media (max-width: 719px) {
  .table {
    padding: 0 20px;
  }
  .tools {
    grid-template-columns: 1fr;
  }
  .tools dt {
    padding-bottom: 0;
    border-bottom: 0;
  }
  .tools dd {
    padding: 8px 0 14px;
  }
  nav {
    margin-left: -20px;
    margin-right: -20px;
    padding: 0 20px;
  }
  nav ul {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0 10px;
  }
  nav a {
    font-size: 11px;
    letter-spacing: 0.04em;
  }
  .meta {
    grid-template-columns: 1fr 1fr;
  }
  .item {
    grid-template-columns: 1fr;
  }
  .year {
    margin-bottom: 4px;
    padding-top: 0;
  }
  .item::before {
    inset: 0 -12px;
  }
  .hud {
    padding: 20px 20px;
  }
  .pin {
    padding: 80px 20px 48px;
  }
}
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) and (max-width: 719px) {
  .beat {
    left: 20px;
    right: 20px;
    max-width: none;
  }
  .beat h1 {
    font-size: clamp(40px, 12vw, 56px);
  }
  .num {
    font-size: clamp(56px, 18vw, 96px);
  }
  .hud {
    padding: 20px;
  }
}
@media print {
  .stage,
  .scanline,
  .story canvas {
    display: none;
  }
}
@media (min-width: 1100px) and (max-height: 760px) {
  .meta {
    display: none;
  }
  .tag {
    display: none;
  }
}
@media (scripting: enabled) {
  .pin .fallback {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .num {
    font-size: clamp(48px, 8vw, 80px);
  }
  .pin {
    gap: 36px;
  }
}

/* ---------- Runde 4: Stationen ---------- */
.dawn {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s ease;
  background: linear-gradient(
    0deg,
    rgba(40, 90, 120, 0.38),
    rgba(14, 28, 44, 0.18) 40%,
    transparent 75%
  );
}
.dawn.on {
  opacity: 1;
}
.beat h2 {
  margin: 0;
  font-weight: 200;
  font-size: clamp(34px, 4.4vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.kick {
  margin: 0 0 12px;
  font: 400 12px/1.6 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ac);
}
.txt {
  margin: 18px 0 0;
  font: 300 clamp(15px, 1.25vw, 18px)/1.6 var(--sans);
  color: var(--soft);
  max-width: 30em;
}
.lnk {
  margin: 16px 0 0;
}
.lnk a {
  font: 400 12px/1.6 var(--mono);
  letter-spacing: 0.1em;
  color: var(--fg);
  border-bottom: 1px solid var(--line);
  padding-bottom: 3px;
  transition:
    color 0.25s,
    border-color 0.25s;
}
.lnk a:hover,
.lnk a:focus-visible {
  color: var(--ac);
  border-color: var(--ac);
}
.st {
  max-width: 560px;
}
.s7 h2 {
  font-size: clamp(28px, 3.4vw, 48px);
  max-width: 16em;
}
.s7 .lnk a {
  font-size: clamp(16px, 1.6vw, 22px);
}
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .story {
    height: 1586.9vh; /* = Summe der Strecken SEG (1206 vh) · DEHNUNG 1,15 + 200 vh, s. punktwolke.v1.js */
  }
  .beat {
    transition:
      opacity 0.22s ease,
      transform 0.22s ease;
  }
  .beat.on {
    transition:
      opacity 0.55s ease 0.3s,
      transform 0.8s ease 0.3s;
  }
  .st {
    bottom: 12vh;
  }
  .nocue .cue {
    opacity: 0;
  }
  .cue {
    opacity: 1;
  }
  .hudoff .hud,
  .hudoff .prog {
    opacity: 0;
  }
  /* ausgeblendet = nicht fokussierbar und nicht klickbar (visibility erst nach der Opacity-Blende) */
  .hudoff .hud {
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 0.4s,
      visibility 0s linear 0.4s;
  }
  .hud,
  .prog {
    transition:
      opacity 0.4s,
      visibility 0s;
  }
  .scrim {
    opacity: calc(1 - var(--hand, 0));
  }
  .table {
    margin-top: -100vh;
    position: relative;
    z-index: 3;
    background: var(--bg);
  }
}
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) and (max-width: 719px) {
  .st {
    max-width: none;
  }
  .s7 h2 {
    font-size: 26px;
  }
  .st h2 {
    font-size: 34px;
  }
}
.shot {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .st {
    margin-top: 12px;
  }
}

/* ---------- Runde 5: Code-Panel und Kopfzeilen ---------- */
.what {
  margin: 14px 0 0;
  font: 400 clamp(14px, 1.15vw, 17px)/1.5 var(--sans);
  color: var(--ac);
  max-width: 30em;
}
.what::before {
  content: '→ ';
  color: var(--dim);
}
.code {
  display: none;
}
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .code {
    display: block;
    position: absolute;
    z-index: 3;
    right: 76px; /* frei von der Stationsleiste (rechts, 12 px + Punkte) */
    top: 50%;
    width: min(600px, 36vw);
    opacity: 0;
    transform: translateY(-46%);
    transition:
      opacity 0.35s ease,
      transform 0.5s ease;
    pointer-events: none;
    background: rgba(8, 12, 16, 0.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(94, 225, 255, 0.28);
    border-radius: 10px;
    box-shadow:
      0 30px 90px rgba(0, 0, 0, 0.6),
      0 0 0 1px rgba(94, 225, 255, 0.05);
    overflow: hidden;
  }
  .code.on {
    opacity: 1;
    transform: translateY(-50%);
  }
  .code .tab {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--line);
    font: 400 13px/1.4 var(--mono);
    letter-spacing: 0.05em;
    color: var(--soft);
  }
  .code .dots {
    width: 38px;
    height: 10px;
    background: radial-gradient(circle, #3a444b 3.5px, transparent 4px) 0 0/13px 10px repeat-x;
  }
  .code .fn {
    flex: 1;
  }
  .code .stt {
    color: var(--dim);
  }
  .code.done .stt {
    color: var(--ac);
    animation: glow 1.6s ease-out 1;
  }
  @keyframes glow {
    0% {
      text-shadow: 0 0 0 rgba(94, 225, 255, 0);
    }
    25% {
      text-shadow:
        0 0 14px rgba(94, 225, 255, 0.95),
        0 0 28px rgba(94, 225, 255, 0.6);
    }
    100% {
      text-shadow: 0 0 6px rgba(94, 225, 255, 0.35);
    }
  }
  .code.done {
    animation: pulse 1.6s ease-out 1;
  }
  @keyframes pulse {
    0% {
      box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.6),
        0 0 0 rgba(94, 225, 255, 0);
    }
    30% {
      box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.6),
        0 0 46px rgba(94, 225, 255, 0.38);
    }
    100% {
      box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.6),
        0 0 0 rgba(94, 225, 255, 0);
    }
  }
  .cbody {
    margin: 0;
    padding: 16px 18px 18px;
    min-height: 11.6em;
    font: 400 15px/1.7 var(--mono);
    color: #d4dde2;
    white-space: pre-wrap;
    word-break: break-word;
  }
  .cbody .l {
    display: block;
  }
  .cbody b {
    display: inline-block;
    width: 2em;
    margin-right: 0.8em;
    text-align: right;
    font-weight: 400;
    color: #56626a;
  }
  .cbody .c {
    color: #6b7a84;
    font-style: normal;
  }
  .cbody .s {
    color: #f2b880;
    font-style: normal;
  }
  .cbody .k {
    color: #5ee1ff;
    font-style: normal;
  }
  .cbody .n {
    color: #9ec8ff;
    font-style: normal;
  }
  .cbody .f {
    color: #f1f5f7;
    font-style: normal;
  }
  .cbody .cur {
    display: inline-block;
    width: 0.55em;
    height: 1.05em;
    margin-left: 1px;
    vertical-align: -3px;
    background: var(--ac);
    text-decoration: none;
    animation: blk 1s steps(2) infinite;
  }
  @keyframes blk {
    50% {
      opacity: 0;
    }
  }
  .hudoff .code {
    opacity: 0;
  }
}
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) and (max-width: 1099px) and (min-width: 720px) {
  .code {
    width: min(520px, 44vw);
    right: 60px;
  }
  .cbody {
    font-size: 13.5px;
  }
}
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) and (max-width: 719px) {
  .code {
    right: 20px;
    left: 20px;
    width: auto;
    top: 64px;
    transform: none;
  }
  .code.on {
    transform: none;
  }
  .cbody {
    font-size: 11.5px;
    min-height: 0;
    padding: 10px 12px;
  }
  .cbody .l:nth-child(n + 6) {
    display: none;
  }
}

/* ---------- Runde 6: Schwerpunkte, Stationsleiste, Sichtbarkeit ---------- */
.focus {
  margin: 22px 0 0;
  font: 400 12px/1.8 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--soft);
  max-width: 44em;
}
.areas {
  margin: 14px 0 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font: 400 12px/1.5 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
}
.areas li::before {
  content: '· ';
  color: var(--ac);
}
.areas .minor,
.areas-list .minor {
  opacity: 0.7;
}
.areas-list {
  margin: 30px 0 0;
  border-top: 1px solid var(--line);
}
.areas-list li {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 6px 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.areas-list b {
  font: 400 12px/1.6 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ac);
}
.areas-list span {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--soft);
}
.lab2 {
  margin: 10px 0 0;
  font: 400 12px/1.6 var(--mono);
  letter-spacing: 0.1em;
  color: var(--dim);
}
.facts {
  margin: 16px 0 0;
  display: grid;
  gap: 3px;
  font: 400 12px/1.6 var(--mono);
  color: var(--soft);
}
.facts li::before {
  content: '– ';
  color: var(--ac);
}
.lnk a + a {
  margin-left: 16px;
}
.glow,
.rail {
  display: none;
}
.scanline {
  display: none !important;
}
html {
  scroll-padding-top: 16px;
}
@media (max-width: 1099px) {
  html {
    scroll-padding-top: 64px;
  }
}
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .glow {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    mix-blend-mode: screen;
    filter: blur(16px) brightness(1.7);
    opacity: 0.5;
    pointer-events: none;
  }
  .beat {
    visibility: hidden;
    transition:
      opacity 0.22s ease,
      transform 0.22s ease,
      visibility 0s 0.22s;
  }
  .beat.on {
    visibility: visible;
    transition:
      opacity 0.6s ease 0.3s,
      transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s,
      visibility 0s;
  }
  .rail {
    display: block;
    position: absolute;
    z-index: 4;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
  }
  .rail ol {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .rail button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 22px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    color: var(--dim);
  }
  .rail i {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: 1px solid currentColor;
    transition:
      transform 0.25s,
      background 0.25s,
      border-color 0.25s;
  }
  .rail span {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    padding: 3px 8px;
    background: rgba(5, 6, 7, 0.82);
    border: 1px solid var(--line);
    border-radius: 4px;
    font: 400 12px/1.4 var(--mono);
    letter-spacing: 0.08em;
    color: var(--fg);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
  }
  .rail button:hover span,
  .rail button:focus-visible span,
  .rail button.cur span {
    opacity: 1;
  }
  .rail button.cur span {
    opacity: 0;
  }
  .rail button.cur:hover span,
  .rail button.cur:focus-visible span {
    opacity: 1;
  }
  .rail button.cur {
    color: var(--ac);
  }
  .rail button.cur i {
    background: var(--ac);
    border-color: var(--ac);
    transform: scale(1.5);
  }
  .rail button:hover {
    color: var(--fg);
  }
  .rail button:focus-visible {
    outline: 1px solid var(--ac);
    outline-offset: 1px;
    border-radius: 4px;
  }
  .hudoff .rail {
    opacity: 0;
    pointer-events: none;
  }
}
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) and (max-width: 719px) {
  .rail {
    right: 20px;
    left: 20px;
    top: 46px;
    transform: none;
  }
  .rail ol {
    flex-direction: row;
    justify-content: space-between;
    gap: 0;
  }
  .rail button {
    width: 20px;
    height: 20px;
  }
  .rail button::before {
    content: '';
    position: absolute;
    inset: -10px;
  }
  .rail span {
    display: none;
  }
  .areas-list li {
    grid-template-columns: 1fr;
  }
  .glow {
    display: none;
  }
}
@media (max-width: 1099px) {
  .areas {
    display: none;
  }
}

/* ---------- Runde 6b: Mobil, Sofort-Anzeige ---------- */
.skipride .ss {
  display: none;
}
.instant .beat,
.instant .beat.on,
.instant .code,
.instant .hud,
.instant .prog {
  transition: none !important;
}
@media (max-width: 719px) {
  .skipride .sl {
    display: none;
  }
  .skipride .ss {
    display: inline;
  }
  .hud {
    white-space: nowrap;
  }
  .phase {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 62vw;
  }
}
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) and (max-width: 719px) {
  .st {
    bottom: 7vh;
    max-width: none;
  }
  .st .kick {
    font-size: 12px;
    margin-bottom: 6px;
  }
  .st h2 {
    font-size: 30px;
  }
  .st .what {
    margin-top: 8px;
    font-size: 14px;
  }
  .st .txt {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .st .facts {
    display: none;
  }
  .st .lnk {
    margin-top: 8px;
  }
  .s4 .stats {
    margin-top: 12px;
  }
  .cbody {
    font-size: 10.5px;
    line-height: 1.55;
    padding: 8px 10px;
    min-height: 0;
  }
  .code {
    top: 72px;
  }
  .code .tab {
    padding: 6px 10px;
    font-size: 12px;
  }
  .cbody .l:nth-child(n + 6) {
    display: inline;
  }
}

/* ---------- Runde 7A: weiches Auftauchen, Rail-Puls ---------- */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .beat {
    filter: blur(7px);
    transform: translateY(12px);
  }
  .beat {
    transition:
      opacity 0.22s ease,
      transform 0.22s ease,
      filter 0.22s ease,
      visibility 0s 0.22s;
  }
  .beat.on {
    filter: none;
    transform: none;
    transition:
      opacity 0.6s ease 0.3s,
      transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s,
      filter 0.7s ease 0.3s,
      visibility 0s;
  }
  .instant .beat,
  .instant .beat.on {
    filter: none !important;
  }
  .code {
    filter: blur(6px);
  }
  .code.on {
    filter: none;
  }
  .code {
    transition:
      opacity 0.4s ease,
      transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1),
      filter 0.5s ease;
  }
  .rail button.cur i {
    animation: railp 2.4s ease-out infinite;
  }
  @keyframes railp {
    0% {
      box-shadow: 0 0 0 0 rgba(94, 225, 255, 0.55);
    }
    70% {
      box-shadow: 0 0 0 9px rgba(94, 225, 255, 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(94, 225, 255, 0);
    }
  }
}

/* ---------- Runde 7B: Rail ist kein Abschnitts-Nav, Layer-Hinweise ---------- */
.rail {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  position: absolute;
}
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .beat,
  .code {
    will-change: opacity, transform;
  }
}

/* ---------- Runde 9: Text bleibt stehen, Unterwegs-Zeile, kompakte Stationen ---------- */
.route {
  display: none;
}
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .route {
    display: block;
    position: absolute;
    z-index: 3;
    left: 48px;
    top: 84px;
    max-width: min(640px, 60vw);
    margin: 0;
    font: 400 12px/1.7 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ac);
    text-shadow:
      0 0 18px rgba(5, 6, 7, 0.95),
      0 0 3px rgba(5, 6, 7, 0.8);
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition:
      opacity 0.5s ease,
      transform 0.6s ease;
  }
  .route::before {
    content: '';
    display: inline-block;
    width: 22px;
    height: 1px;
    margin: 0 10px 3px 0;
    background: var(--ac);
    vertical-align: middle;
  }
  .route.on {
    opacity: 1;
    transform: none;
  }
  .beat.st .what,
  .beat.st .txt,
  .beat.st .lnk,
  .beat.st .facts,
  .beat.st .stats {
    max-height: 24em;
    overflow: hidden;
    transition:
      max-height 0.7s ease,
      opacity 0.45s ease,
      margin 0.6s ease,
      visibility 0s;
  }
  .beat.st.compact .what,
  .beat.st.compact .txt,
  .beat.st.compact .lnk,
  .beat.st.compact .facts,
  .beat.st.compact .stats {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    margin-bottom: 0;
    visibility: hidden;
    transition:
      max-height 0.7s ease,
      opacity 0.35s ease,
      margin 0.6s ease,
      visibility 0s 0.7s;
  }
  .beat.st.compact h2 {
    font-size: clamp(26px, 3vw, 44px);
    transition: font-size 0.6s ease;
  }
}
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) and (max-width: 719px) {
  .route {
    left: 20px;
    right: 20px;
    max-width: none;
    top: 68px;
    font-size: 10px;
  }
  .beat.st {
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(5, 6, 7, 0.82);
    max-height: 48vh;
    overflow: hidden;
  }
  .beat.st::before {
    display: none;
  }
}
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .rail button.from {
    opacity: 0.4;
  }
}

/* ---------- Runde 10: UX-Review 06.11.2026 (kürzere Fahrt, ein Name je Station, Lesbarkeit, Mobil) ---------- */
/* Kopfzeile: Kapitelanzeige nur, wenn die Fahrt läuft (bei reduzierter Bewegung/ohne Skript steht sie sonst still) */
.phase {
  display: none;
  margin: 0;
}
.hud {
  justify-content: flex-end;
  align-items: flex-start;
}
.hudr {
  display: flex;
  align-items: baseline;
  gap: 28px;
}
.hudlang,
.hudlegal {
  margin: 0;
}
.hudlang > * + * {
  margin-left: 0.8em;
  padding-left: 0.8em;
  border-left: 1px solid var(--dim);
}
.hudlang .lg {
  color: var(--fg);
}
.hudlegal a {
  color: var(--dim);
}
.links .legal {
  color: var(--dim);
}
.links .legal a {
  color: var(--dim);
}
.links .legal a:hover,
.links .legal a:focus-visible {
  color: var(--ac);
}
.kx {
  color: var(--soft);
}
.nums {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 18px 56px;
}
.nums .num {
  font-size: clamp(44px, 5.6vw, 84px);
}
.nums .lab {
  margin-top: 10px;
  max-width: 12em;
}
.b1 .kick {
  margin-bottom: 14px;
}
.b1 .lab2 {
  margin-top: 18px;
}
.projs {
  margin: 20px 0 0;
  display: grid;
  gap: 14px;
}
.projs li {
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.pn {
  margin: 0;
  font: 300 clamp(18px, 1.6vw, 22px)/1.3 var(--sans);
  color: var(--fg);
}
.pn span {
  margin-left: 10px;
  font: 400 12px/1.4 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
}
.pd {
  margin: 6px 0 0;
  font: 300 clamp(14px, 1.15vw, 16px)/1.5 var(--sans);
  color: var(--soft);
  max-width: 34em;
}
.projs .lnk {
  margin: 6px 0 0;
}
.s5 h2 {
  font-size: clamp(26px, 2.8vw, 40px);
}
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .phase {
    display: block;
  }
  .hud {
    justify-content: space-between;
  }
  /* Karten desktop auf abgedunkelter Fläche (wie mobil), damit Kopfzeile/Überschrift nicht im hellen Punktobjekt verschwinden */
  .beat.st,
  .beat.b1 {
    left: 48px;
    bottom: 12vh;
    padding: 26px 32px 28px;
    max-width: min(600px, 48vw);
    background: rgba(5, 6, 7, 0.9);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  }
  .beat.b1 {
    max-width: min(880px, 62vw);
  }
  .beat.st::before,
  .beat.b1::before {
    display: none;
  }
  .beat.s5 {
    max-width: min(640px, 50vw);
  }
  .route {
    top: 84px;
    max-width: min(700px, 60vw);
    padding: 10px 16px;
    font: 400 15px/1.5 var(--sans);
    letter-spacing: 0;
    text-transform: none;
    color: var(--soft);
    background: rgba(5, 6, 7, 0.78);
    border: 1px solid var(--line);
    border-radius: 10px;
  }
  .route::before {
    display: none;
  }
  .route .rl {
    font: 400 12px/1.6 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ac);
  }
  .route b {
    font-weight: 500;
    color: var(--fg);
  }
  .route .rs {
    display: block;
    margin-top: 2px;
  }
}
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) and (max-width: 719px) {
  .hud {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 14px;
    letter-spacing: 0.08em;
    white-space: normal;
  }
  .hudr {
    display: contents;
  }
  .phase {
    grid-column: 1;
    grid-row: 1;
    max-width: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.35;
  }
  .hudlang {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }
  .hudlegal {
    grid-column: 1;
    grid-row: 2;
  }
  .skipride {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    white-space: nowrap;
  }
  .rail {
    top: 92px;
  }
  .route {
    top: 120px;
    left: 20px;
    right: 20px;
    max-width: none;
    font-size: 13px;
    padding: 8px 12px;
  }
  .route .rl {
    font-size: 12px;
  }
  .code {
    display: none;
  }
  .beat.st,
  .beat.b1 {
    left: 20px;
    right: 20px;
    bottom: 5vh;
    max-width: none;
    padding: 14px 16px;
    max-height: none;
    overflow: visible;
  }
  .beat.b1 .kick {
    margin-bottom: 8px;
  }
  .nums {
    flex-direction: column;
    gap: 8px;
  }
  .nums li {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: 12px;
  }
  .nums .num {
    font-size: clamp(34px, 11vw, 48px);
  }
  .nums .lab {
    margin: 0;
    font-size: 12px;
    max-width: none;
  }
  .b1 .lab2 {
    margin-top: 10px;
  }
  .st .txt {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
  }
  .beat.s5 h2 {
    font-size: 22px;
  }
  .projs {
    margin-top: 10px;
    gap: 8px;
  }
  .projs li {
    padding-top: 8px;
  }
  .pn {
    font-size: 17px;
  }
  .pn span {
    display: block;
    margin: 2px 0 0;
  }
  .pd {
    font-size: 13px;
    line-height: 1.4;
  }
  .st h2 {
    font-size: 28px;
  }
  .s7 h2 {
    font-size: 22px;
  }
}

/* ---------- Bedien-Test 07.11.2026: Tippflächen (Handy), Hinweis bei kleiner Höhe ----------
   Unsichtbare Fläche per ::after statt Polster: ändert weder Layout noch display (Review H1 07.11.2026:
   .hud a { display: inline-block } blendete .skipride ein und schob DE/EN aus dem Bild). .hud seit Gesamtprüfung 07.11.2026. */
@media (max-width: 719px) {
  .hud a,
  .links a,
  footer a,
  .gh a,
  .lnk a,
  .more a {
    position: relative;
  }
  .hud a::after,
  .links a::after,
  footer a::after,
  .gh a::after,
  .lnk a::after,
  .more a::after {
    content: '';
    position: absolute;
    inset: -12px -4px;
  }
  /* In den Fahrtkarten schneidet .lnk (overflow: hidden fürs Einklappen) die Fläche ab: Platz innen schaffen,
     außen per negativem Rand ausgleichen, damit die Karte gleich hoch bleibt (Review-Fund M1, 07.11.2026). */
  .beat.st:not(.compact) .lnk {
    padding-block: 12px;
    margin-top: -4px;
    margin-bottom: -12px;
  }
}
@media (max-width: 719px) and (max-height: 700px) {
  .cue {
    display: none;
  }
}

/* ---------- Karten der Fahrt am Desktop kompakter (Florian, 07.11.2026: „zu groß und überdeckt zu viel“) ----------
   Gilt nur ab 1100 px mit laufender Fahrt; Tablet und Handy haben eigene Regeln. Messwerte so breit wie ihre Zahlenreihe. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) and (min-width: 1100px) {
  .beat.st,
  .beat.b1 {
    padding: 22px 26px 24px;
    max-width: min(500px, 40vw);
  }
  .beat.b1 {
    width: max-content;
    max-width: min(640px, 48vw);
  }
  .nums {
    flex-wrap: nowrap;
    gap: 0 36px;
  }
  .nums .num {
    font-size: clamp(34px, 2.9vw, 48px);
  }
  .nums .lab {
    max-width: 11em;
  }
  .beat.st h2 {
    font-size: clamp(26px, 2.3vw, 36px);
  }
  .beat.st.compact h2 {
    font-size: clamp(22px, 1.9vw, 30px);
  }
  .beat.s5 h2 {
    font-size: clamp(22px, 1.9vw, 30px);
  }
  .s5 .projs {
    margin-top: 14px;
    gap: 10px;
  }
  .s5 .projs li {
    padding-top: 10px;
  }
  .s5 .pn {
    font-size: clamp(16px, 1.25vw, 19px);
  }
  .s5 .pd {
    font-size: 14px;
  }
  .stats b {
    font-size: clamp(30px, 2.6vw, 42px);
  }
  .beat.s7 h2 {
    font-size: clamp(24px, 2.1vw, 34px);
  }
  .s7 .lnk a {
    font-size: clamp(15px, 1.2vw, 18px);
  }
}