/* ───────────────────────── Tokens ───────────────────────── */
:root {
  --c-black: #101214;
  --c-black-rgb: 16, 18, 20;
  --c-white: #fff;
  --c-berry: #c8c2cf;
  --c-grey: #e6dfe4;
  --c-grey-dark: #544d56;
  --c-purple: #a399a8;
  --c-red: #ff4f36;
  --c-green: #0f7f69;
  --c-yellow: #f4ff1e;
  --c-blue: #3687ff;

  --accent: var(--c-black);
  --on-accent: var(--c-white);

  --f-cubic: cubic-bezier(.22, .31, 0, 1);
  --f-cubic-in: cubic-bezier(.69, 0, 0, 1);
  --f-fast: cubic-bezier(0, .81, .35, 1);
  --f-smooth: cubic-bezier(.5, 0, .3, 1);

  --font: "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-jp: "Noto Sans JP", system-ui, sans-serif;
  --font-display: "Dela Gothic One", var(--font);

  /* Typo-Skala wie im Original (Faktor 1.333) */
  --type-step: 1.333;
  --body-line-height: 1.2;
  --p: 1rem;
  --m: calc(var(--p) / var(--type-step));
  --mm: calc(var(--m) / var(--type-step));
  --h6: calc(var(--p) * var(--type-step));
  --h5: calc(var(--h6) * var(--type-step));
  --h4: calc(var(--h5) * var(--type-step));
  --h3: calc(var(--h4) * var(--type-step));
  --h2: calc(var(--h3) * var(--type-step));
  --h1: calc(var(--h2) * var(--type-step));
  --ls: -2;

  /* Grid: 6 Spalten mobil, 14 Spalten Desktop */
  --columns: 6;
  --g-gap: .2rem;
  --g-margin: calc(var(--g-gap) * 4);
  --col: calc(100vw / var(--columns) - var(--g-margin) * 2 / var(--columns) - var(--g-gap) * (var(--columns) - 1) / var(--columns));

  /* Kartenbreite – nach Spalten, aber nie höher als der freie Platz zwischen Header und Footer */
  --cw: min(calc(var(--col) * 4 + var(--g-gap) * 3), calc((100svh - 10rem) * .75));
}

@media (min-width: 1024px) {
  :root {
    --columns: 14;
    --g-margin: calc(var(--g-gap) * 2);
    --cw: min(calc(var(--col) * 3 + var(--g-gap) * 2), calc((100svh - 11rem) * .75));
  }
}

html.-red    { --accent: var(--c-red); }
html.-green  { --accent: var(--c-green); }
html.-yellow { --accent: var(--c-yellow); --on-accent: var(--c-black); }
html.-blue   { --accent: var(--c-blue); }

/* ───────────────────────── Base ───────────────────────── */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-size-adjust: none;
  background-color: var(--c-berry);
  color: var(--c-black);
  font-family: var(--font);
  font-size: 18px;
  line-height: var(--body-line-height);
  overflow: hidden;
  touch-action: manipulation;
}
@media (min-width: 1024px) { html { font-size: 18px; } }
@media (min-width: 1440px) { html { font-size: 20px; } }
@media (min-width: 1920px) { html { font-size: 24px; } }
@media (min-width: 2560px) { html { font-size: 28px; } }

body { margin: 0; min-height: 100svh; overflow: hidden; background-color: var(--c-berry); }
h1, h2, h3, h4, p { margin: 0; font-weight: 400; }
ul { list-style: none; margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.filters { position: absolute; width: 0; height: 0; pointer-events: none; }

.-mm { font-family: var(--font-mono); font-size: var(--mm); letter-spacing: normal; }
.-m  { font-size: var(--m); }
.-p  { font-size: var(--p); line-height: var(--body-line-height); }
.-up { text-transform: uppercase; line-height: 1; }
.-jp { font-family: var(--font-jp); letter-spacing: 0; line-height: 1.2; }
.-h3, h3 { font-size: var(--h3); letter-spacing: calc(var(--h3) / 100 * var(--ls)); line-height: 1.05; }

/* Pixel-Motion-Hover (SVG-Filter in Stufen) */
@keyframes pixelMotion   { 0% { filter: url(#p1); } 33% { filter: url(#p2); } 66% { filter: url(#p3); } }
@keyframes pixelMotion2x { 0% { filter: url(#p4); } 33% { filter: url(#p5); } 66% { filter: url(#p6); } }
.-pm.-hover   { animation: pixelMotion .6s step-end; }
.-pm2x.-hover { animation: pixelMotion2x .6s step-end; }

/* Hover-Pixel: große quadratische Zellen (1/8 der Kartenhöhe) in den Ecken,
   Position + Sichtbarkeit setzt main.js. Einfarbige Kästchen = praktisch keine CPU-Last. */
.cover-cubes { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.cover-cubes i {
  position: absolute;
  /* +1px Überlappung, sonst sieht man Haarlinien zwischen benachbarten Pixeln */
  width: calc(100% / (8 * 2 / 3) + 1px);
  height: calc(12.5% + 1px);
  background: var(--accent);
  visibility: hidden;
}

/* Grid-Wrapper */
.-w {
  display: grid;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
  column-gap: var(--g-gap);
  margin: 0 var(--g-margin);
}
.-w > * {
  grid-column: var(--left, 1) / span var(--width, 1);
  grid-row: var(--top, 1) / span var(--height, 1);
}

/* ───────────────────────── Header ───────────────────────── */
header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 120;
  padding-top: calc(var(--g-gap) * 4);
  pointer-events: none;
}
header .-w > *,
footer .-w > * {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: calc(var(--mm) * 2);
  overflow: hidden;
  pointer-events: all;
  cursor: pointer;
  color: var(--accent);
  transition: color .3s var(--f-cubic);
}
/* :before = Hover-Füllung, :after = Preload-Block */
header .-w > *::before, header .-w > *::after,
footer .-w > *::before, footer .-w > *::after {
  content: ""; position: absolute; inset: 0; scale: 1 0; pointer-events: none;
}
header .-w > *::before, footer .-w > *::before {
  background-color: var(--accent);
  transform-origin: 50% 100%;
  transition: scale .6s var(--f-cubic), background-color .75s var(--f-cubic-in);
}
header .-w > *::after, footer .-w > *::after {
  background-color: var(--c-white);
  transform-origin: 50% 0;
}
header .-w > * > *, footer .-w > * > * { position: relative; z-index: 1; }

/* Mobil: Portfolio links · PK mittig · About / Let's talk rechts untereinander */
header .-w > * { white-space: nowrap; }
header .logo   { --top: 1; --left: 1; --width: 2; justify-self: start; align-self: center; }
header .toggle { display: none; }
header .fd_logo{ --top: 1; --height: 2; --left: 3; --width: 2; justify-self: center; width: calc(var(--col) * 2 + var(--g-gap)); }
header .about  { --top: 1; --left: 5; --width: 2; justify-self: end; align-self: center; }
header .talk   { --top: 2; --left: 5; --width: 2; justify-self: end; align-self: center; }
header .expo   {
  --top: 1; --height: 2; --left: 2; --width: 4;
  justify-self: center; align-items: flex-end;
  height: calc(100% + var(--mm) * 4);
  width: calc(var(--col) * 2 + var(--g-gap) + 1px);
  pointer-events: none; font-size: var(--mm);
}
header .expo::before { content: none; }
/* Handy quer: zu wenig Höhe → Zusatzzeile unter dem Logo ausblenden */
@media (max-height: 520px) and (max-width: 1023px) { header .expo { display: none; } }

header .mark {
  font-family: var(--font-display);
  font-size: var(--h4);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--accent);
  transition: translate 1.2s var(--f-cubic-in), scale 1.2s var(--f-cubic-in), color .3s;
  transition-delay: .3s;
}
header .fd_logo::before { background-color: var(--c-white); }
header .toggle > span { padding: 0 .1em; transition: color .3s; }
header .toggle .-active { color: inherit; }
header .toggle > span:not(.-active) { opacity: .45; }
header .toggle > span[data-view]:hover { opacity: 1; }

@media (min-width: 1024px) {
  header { padding-top: var(--g-gap); }
  header .-w > *:not(.fd_logo):not(.expo):hover { color: var(--on-accent); }
  header .-w > *:not(.fd_logo):not(.expo):hover::before { scale: 1 1; }
  header .fd_logo:hover::before { scale: 1 1; }

  header .logo    { --top: 1; --left: 5; --width: 2; align-self: auto; width: calc(var(--col) + var(--g-gap)); }
  header .about   { width: calc(var(--col) + var(--g-gap)); }
  header .toggle  { --top: 2; --left: 6; --width: 2; display: flex; justify-self: start; width: calc(var(--col) + var(--g-gap)); }
  header .fd_logo { --top: 1; --height: 2; --left: 6; --width: 4; justify-self: center; width: calc(var(--col) * 2 + var(--g-gap) + 1px); }
  header .about   { --top: 2; --left: 8; --width: 2; align-self: auto; }
  header .talk    { --top: 1; --left: 9; --width: 2; width: calc(var(--col) + var(--g-gap)); }
  header .talk:hover span::after { content: " ↗"; }
  header .expo    { --top: 3; --height: 1; --left: 6; --width: 4; height: auto; width: auto; align-items: center; padding-top: var(--mm); }
}

/* ───────────────────────── Footer ───────────────────────── */
footer {
  position: fixed; bottom: 0; left: 0; width: 100%; z-index: 120;
  padding-bottom: calc(var(--g-gap) * 4);
  pointer-events: none;
}
footer .-w { align-items: end; }
footer .sound { display: none; }
footer .a     { display: none; }
footer .c { --top: 2; --left: 1; --width: 3; justify-self: start; justify-content: flex-start; width: calc(var(--col) * 2 + var(--g-gap) * 2 + 1px); }
footer .y { --top: 2; --left: 4; --width: 3; justify-self: end;   justify-content: flex-end;   width: calc(var(--col) * 2 + var(--g-gap) * 2 + 1px); }
footer .colours { --top: 1; --left: 3; --width: 2; justify-self: center; width: calc(var(--col) * 2 + var(--g-gap)); }
footer .colours > span { display: none; position: relative; z-index: 1; }
footer .colours > span.-active { display: block; }
footer .colours > span.-active::before { content: "→ "; }

footer .a b { font-weight: 400; }
footer .progress {
  position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: rgba(var(--c-black-rgb), .15); overflow: hidden;
}
footer .progress i { position: absolute; inset: 0; background: var(--accent); transform-origin: 0 50%; scale: 0 1; }

@media (min-width: 1025px) {
  footer { padding-bottom: var(--g-gap); }
  footer .sound {
    --top: 1; --left: 1; display: flex; justify-self: start; gap: .35em;
    width: calc(var(--col) + var(--g-gap)); justify-content: flex-start;
  }
  footer .sound svg { width: calc(var(--mm) * 1.6); fill: var(--accent); stroke: var(--accent); }
  footer .sound .wave { transition: opacity .3s; }
  footer .sound.-muted .wave { opacity: .15; }
  footer .sound span { opacity: .35; }
  footer .sound:not(.-muted) span { opacity: 1; }

  footer .c { --top: 1; --left: 5; --width: 2; width: calc(var(--col) * 2 + var(--g-gap)); }
  footer .a { --top: 1; --left: 7; --width: 2; display: flex; justify-self: center; width: calc(var(--col) * 2 + var(--g-gap)); cursor: default; }
  footer .y { --top: 1; --left: 9; --width: 2; width: calc(var(--col) * 2 + var(--g-gap)); }
  footer .colours {
    --top: 1; --left: 13; --width: 2;
    flex-direction: column; align-items: flex-end; justify-content: flex-end; justify-self: end;
    width: auto; min-width: calc(var(--col) + var(--g-gap));
    padding: calc(var(--mm) / 2) 0;
    cursor: default; gap: .25em;
  }
  footer .colours > span { display: block; cursor: pointer; opacity: .55; transition: opacity .3s; }
  footer .colours > span:hover, footer .colours > span.-active { opacity: 1; }
}

/* ───────────────────────── Preload-Sequenz ─────────────────────────
   -preload          → Texte unsichtbar
   -preload-entering → weiße Blöcke klappen gestaffelt auf
   -preload-exit     → Blöcke werden schwarz und klappen weg, Text erscheint */
html.-preload header .-w > *, html.-preload footer .-w > * { color: transparent; pointer-events: none; }
html.-preload header .-w > * > *, html.-preload footer .-w > * > * { visibility: hidden; }
html.-preload header .-w > *::after, html.-preload footer .-w > *::after {
  scale: 1 0;
  transition: scale .6s var(--f-cubic-in);
  transition-delay: calc(var(--l-delay, 0) * 1s);
}
html.-preload-entering header .-w > *::after, html.-preload-entering footer .-w > *::after,
html.-preload-idle header .-w > *::after, html.-preload-idle footer .-w > *::after { scale: 1 1; }
html.-preload-exit header .-w > *, html.-preload-exit footer .-w > * { color: var(--accent); }
html.-preload-exit header .-w > *::after, html.-preload-exit footer .-w > *::after {
  background-color: var(--accent); scale: 1 0; transform-origin: 50% 100%;
}
html.-preload-exit header .-w > * > *, html.-preload-exit footer .-w > * > * { visibility: visible; }
html.-preload header .expo::after { content: none; }
html.-preload header .mark { translate: 0 150%; scale: 1.5; }
html.-preload-exit header .mark { translate: 0 0; scale: 1; }

/* Splash */
.splash-screen {
  position: fixed; inset: 0; z-index: 110;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; pointer-events: all;
}
.splash-screen .grid {
  position: absolute; aspect-ratio: 1 / 1; min-width: 100%; min-height: 100%;
  display: grid; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(10, 1fr);
}
.splash-screen .grid span {
  background-color: var(--c-black);
  transition: opacity 0s linear;
  transition-delay: calc(var(--random) * 75ms);
}
.splash-mark {
  position: relative;
  font-family: var(--font-display);
  font-size: var(--h1);
  color: var(--c-white);
  mix-blend-mode: lighten;
  scale: 0;
  transition: scale 3s var(--f-cubic);
}
html.-preload-entering .splash-mark, html.-preload-idle .splash-mark { scale: 1; }
html.-preload-exit .splash-screen { pointer-events: none; }
html.-preload-exit .splash-screen .grid span { opacity: 0; }
html.-preload-exit .splash-mark { visibility: hidden; }
html.-loaded .splash-screen { display: none; }

/* ───────────────────────── Karten ───────────────────────── */
.home-page, .stage { position: fixed; inset: 0; z-index: 1; }
.stage { overflow: hidden; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.stage.-card-hover { cursor: pointer; }
.stage.-dragging { cursor: grabbing; }

.card {
  position: absolute; left: 0; top: 0;
  width: var(--cw);
  will-change: transform;
  transform-origin: 50% 0; /* Karten hängen an der Oberkante und werden nach unten länger */
  backface-visibility: hidden;
  contain: layout style; /* Änderungen an einer Karte lösen kein Layout der anderen aus */
}
.card-inner { transition: translate .6s var(--f-cubic); will-change: translate; }
/* Dauer-Animationen (Icon wippt, Orbit kreist) nur beim Hover – sonst kosten sie ständig CPU */
.card .cover-art img, .card .cover-art .orbit { animation-play-state: paused; }
.card.-hover .cover-art img, .card.-hover .cover-art .orbit { animation-play-state: running; }
.card.-off * { animation-play-state: paused !important; }
.card.-hover .card-inner { translate: 0 calc(var(--mm) * -1); }

.cover {
  /* Innenabstand + Mini-Schrift wachsen mit der Karte, damit kleine Karten nicht überlaufen */
  --pad: min(var(--m), calc(var(--cw) * .06));
  position: relative;
  width: 100%; /* sonst leitet aspect-ratio die Breite aus der (kürzeren) Höhe ab */
  aspect-ratio: 2 / 3; /* Höhe setzt JS je nach Abstand zur Mitte */
  overflow: hidden;
  isolation: isolate;
  border-radius: 20px;
}
.cover-top, .cover-sub {
  position: absolute; left: var(--pad); right: var(--pad);
  display: flex; justify-content: space-between; gap: 1em;
  font-size: min(var(--mm), calc(var(--cw) * .042));
  white-space: nowrap;
  z-index: 2;
}
.cover-top > *, .cover-sub > * { overflow: hidden; text-overflow: ellipsis; }
.cover-top { top: var(--pad); }
.cover-sub { bottom: var(--pad); }
.cover-title {
  position: absolute; left: var(--pad); right: var(--pad);
  bottom: calc(var(--pad) * 2 + min(var(--mm), calc(var(--cw) * .042)));
  font-family: var(--font-display);
  font-size: calc(var(--cw) * var(--fit, .12));
  line-height: .92;
  letter-spacing: -.02em;
  text-transform: uppercase;
  z-index: 2;
}

/* Generiertes Projekt-Cover */
.cover.-gen {
  color: var(--fg);
  background:
    radial-gradient(110% 80% at 75% 15%, var(--ac) 0%, transparent 55%),
    linear-gradient(170deg, var(--bg) 25%, var(--deep) 100%);
}
.cover.-gen::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .28) 1px, transparent 1.3px);
  background-size: calc(var(--cw) / 22) calc(var(--cw) / 22);
  mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
}
.cover-art {
  position: absolute; z-index: 1;
  left: 50%; top: 42%;
  width: 46%; aspect-ratio: 1;
  /* Parallax: Motiv wandert leicht gegen die Bewegung */
  translate: calc(-50% - var(--px, 0) * var(--cw) * .08) -50%;
}
.cover-art .orbit {
  position: absolute; inset: -22%;
  border: 1px dashed rgba(255, 255, 255, .45);
  border-radius: 50%;
  animation: spin 24s linear infinite;
  will-change: rotate;
}
.cover-art .orbit::after {
  content: "✈"; position: absolute; top: 50%; right: -.55em; translate: 0 -50%;
  font-size: calc(var(--cw) * .05); color: var(--fg); rotate: 90deg;
}
.cover-art img {
  position: relative; width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 calc(var(--cw) * .04) calc(var(--cw) * .05) rgba(0, 0, 0, .35));
  animation: bob 5s ease-in-out infinite;
  transition: scale .9s var(--f-cubic), rotate .9s var(--f-cubic);
  will-change: translate, scale, rotate;
}
.card.-hover .cover-art img { scale: 1.08; rotate: -6deg; }

/* Handy-Screenshot im Rahmen (Projekte mit "phone") */
.cover-phone {
  position: absolute; z-index: 1;
  left: 50%; top: 13%;
  width: 40%; aspect-ratio: 9 / 20;
  translate: calc(-50% - var(--px, 0) * var(--cw) * .08) 0;
  rotate: -6deg;
  border-radius: calc(var(--cw) * .045);
  padding: calc(var(--cw) * .012);
  background: #0b0d10;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .18),
    0 calc(var(--cw) * .05) calc(var(--cw) * .09) rgba(0, 0, 0, .4);
  transition: rotate .9s var(--f-cubic), scale .9s var(--f-cubic);
  will-change: rotate, scale;
  /* unten ausblenden, damit der Titel lesbar bleibt */
  mask-image: linear-gradient(180deg, #000 55%, transparent 88%);
}
.cover-phone img {
  width: 100%; height: 100%; object-fit: cover; object-position: top;
  border-radius: calc(var(--cw) * .035);
}
.card.-hover .cover-phone { rotate: 0deg; scale: 1.05; }
/* Fertige Cover-Bilder (2:3, Titel im Bild): unten verankert, damit der Titel
   sichtbar bleibt, wenn die Karte zum Rand hin kürzer wird */
.cover.-image { background: var(--bg); }
.cover.-image img.shot {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 100%;
  transition: scale 1.2s var(--f-cubic);
  transform-origin: 50% 100%;
}
.card.-hover .cover.-image img.shot { scale: 1.03; }
/* Text + Bild folgen der Theme-Farbe. Die Cover-Bilder haben einen reinweißen
   Hintergrund: 1) "lighten" mit der Akzentfarbe macht Schwarz → Akzent, Weiß bleibt Weiß.
   2) "multiply" mit dem Kartengrau tönt das Weiß wieder zu Hellgrau. */
.cover.-image { color: var(--accent); }
.cover.-image::before,
.cover.-image::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
}
.cover.-image::before { background: var(--accent); mix-blend-mode: lighten; }
.cover.-image::after  { background: var(--bg); mix-blend-mode: multiply; }
/* Nummer links, Label genau in der Mitte */
.cover-top.-three { display: grid; grid-template-columns: 1fr auto 1fr; }
.cover-top.-three > :nth-child(2) { text-align: center; }
.cover .open {
  opacity: 0; translate: 0 .6em;
  transition: opacity .5s var(--f-cubic), translate .5s var(--f-cubic);
}
.card.-hover .cover .open { opacity: 1; translate: 0 0; }

/* Platzhalter-Cover */
.cover.-ph {
  color: var(--accent);
  background-color: rgba(var(--c-black-rgb), .05);
  box-shadow: inset 0 0 0 1px rgba(var(--c-black-rgb), .16);
  transition: background-color .6s var(--f-cubic);
}
.cover.-ph::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: repeating-conic-gradient(rgba(var(--c-black-rgb), .09) 0 25%, transparent 0 50%);
  background-size: 6px 6px;
  mask-image: radial-gradient(circle at 50% 42%, transparent 18%, #000 80%);
}
.cover.-ph::after {
  /* Ecken-Markierungen */
  content: ""; position: absolute; inset: calc(var(--pad) * 2.6) var(--pad); z-index: 1;
  --b: rgba(var(--c-black-rgb), .35);
  background:
    linear-gradient(var(--b), var(--b)) 0 0 / 10px 1px no-repeat,
    linear-gradient(var(--b), var(--b)) 0 0 / 1px 10px no-repeat,
    linear-gradient(var(--b), var(--b)) 100% 0 / 10px 1px no-repeat,
    linear-gradient(var(--b), var(--b)) 100% 0 / 1px 10px no-repeat,
    linear-gradient(var(--b), var(--b)) 0 100% / 10px 1px no-repeat,
    linear-gradient(var(--b), var(--b)) 0 100% / 1px 10px no-repeat,
    linear-gradient(var(--b), var(--b)) 100% 100% / 10px 1px no-repeat,
    linear-gradient(var(--b), var(--b)) 100% 100% / 1px 10px no-repeat;
}
.card.-hover .cover.-ph { background-color: rgba(var(--c-black-rgb), .1); }
.ph-cross {
  position: absolute; left: 50%; top: 42%; z-index: 2;
  width: 18%; aspect-ratio: 1;
  translate: calc(-50% - var(--px, 0) * var(--cw) * .08) -50%;
}
.ph-cross::before, .ph-cross::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: currentColor; translate: -50% -50%;
}
.ph-cross::before { width: 100%; height: 1px; }
.ph-cross::after  { width: 1px; height: 100%; }
.card.-hover .ph-cross { animation: crossRotate .6s var(--f-fast) forwards; }
.ph-title { color: var(--accent); }
.cover.-ph .cover-title { --fit: .125; }

/* Name über der Karte, links bündig (wie im Original) */
.card-meta {
  display: flex; justify-content: space-between; gap: .5em;
  margin-bottom: .4rem;
  padding: 0 .1em;
  color: var(--accent);
  white-space: nowrap;
}
.card.-empty .card-meta { opacity: .55; }

.card.-shake .cover { animation: shake .5s var(--f-cubic); }

@keyframes spin { to { rotate: 1turn; } }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4%; } }
@keyframes crossRotate { from { rotate: 0deg; } to { rotate: 1turn; } }
@keyframes shake {
  0%, 100% { translate: 0 0; } 20% { translate: -3% 0; } 40% { translate: 3% 0; } 60% { translate: -2% 0; } 80% { translate: 1% 0; }
}

/* Projektname: feste Position, Buchstaben-Scramble (wie im Original) */
.exp-name-hover {
  position: fixed; z-index: 30;
  top: 50svh; left: calc(var(--g-margin) + var(--col) / 2);
  width: 0; height: 0;
  display: flex; align-items: center; justify-content: center;
  rotate: -90deg;
  font-family: var(--font-mono);
  font-size: var(--h4);
  letter-spacing: calc(var(--h4) / 100 * var(--ls));
  line-height: .8;
  white-space: nowrap;
  color: var(--accent);
  pointer-events: none;
}
@media (min-width: 1024px) {
  .exp-name-hover {
    top: auto; bottom: var(--h2);
    left: calc(var(--g-margin) + var(--col) * 4 + var(--g-gap) * 4);
    width: auto; height: auto;
    display: block; rotate: none;
    font-size: var(--h3);
    letter-spacing: calc(var(--h3) / 100 * var(--ls));
  }
}
html.-preload .exp-name-hover { visibility: hidden; }
html.-preload-entering .exp-name-hover,
html.-preload-idle .exp-name-hover { visibility: visible; color: var(--c-white); z-index: 120; }
html.-preload-exit .exp-name-hover { visibility: visible; color: var(--accent); }

/* ───────────────────────── About-Panel ───────────────────────── */
.kobo-modal {
  position: fixed; inset: 0; z-index: 130;
  display: flex; align-items: flex-end; justify-content: center;
  pointer-events: none;
}
.kobo-modal[hidden] { display: none; }
.kobo-modal .backdrop { position: absolute; inset: 0; pointer-events: auto; }
.kobo-modal .panel {
  position: relative; z-index: 1;
  width: calc(var(--col) * 5 + var(--g-gap) * 4);
  max-width: 22rem;
  margin-bottom: calc(var(--p) * 2 + var(--mm) * 4);
  padding: calc(var(--col) * .25 + var(--g-gap) * .25) calc(var(--col) * .4 + var(--g-gap) * .5) calc(var(--col) * .4 + var(--g-gap) * .5);
  background: var(--accent);
  color: var(--on-accent);
  pointer-events: all;
  clip-path: inset(100% 0 0 0);
  transition: clip-path .9s var(--f-cubic-in);
}
/* oben Platz lassen, sonst schneidet clip-path den Close-Button über dem Panel ab */
.kobo-modal.-open .panel { clip-path: inset(-4rem 0 0 0); transition: clip-path 1.1s var(--f-cubic); }
.kobo-modal .body {
  /* Platz lassen für Close-Button oben und Footer unten */
  max-height: calc(100svh - var(--p) * 5 - var(--mm) * 4 - var(--col) * .65);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.kobo-modal .body > * { margin: 1em 0; }
.kobo-modal .close {
  position: absolute; left: 0; bottom: 100%; margin: 0;
  display: flex; align-items: center; gap: .5em;
  padding: var(--mm) 0;
  color: var(--accent);
  opacity: 0; translate: 0 1em;
  transition: opacity .6s var(--f-cubic), translate .6s var(--f-cubic);
}
.kobo-modal.-open .close { opacity: 1; translate: 0 0; transition-duration: .9s; transition-delay: .3s; }
.kobo-modal .close svg { width: .8em; stroke: currentColor; stroke-width: 1.4; }
.kobo-modal .close span::before { content: "Close"; }
.kobo-modal .jp { display: block; text-align: right; opacity: .6; }
.kobo-modal h3 { font-size: var(--h4); letter-spacing: calc(var(--h4) / 100 * var(--ls)); }
.kobo-modal h3 span { opacity: .55; }
.kobo-modal .narrow p + p { margin-top: .8em; }
.kobo-modal .links li { border-top: 1px solid currentColor; }
.kobo-modal .links li:last-child { border-bottom: 1px solid currentColor; }
.kobo-modal .links a { display: flex; justify-content: space-between; padding: .7em 0; }
.kobo-modal .links a:hover span:last-child { translate: .2em -.2em; }
.kobo-modal .links span:last-child { transition: translate .4s var(--f-cubic); }
.kobo-modal .body > * {
  opacity: 0; translate: 0 1em;
  transition: opacity .4s var(--f-cubic), translate .4s var(--f-cubic);
}
.kobo-modal.-open .body > * {
  opacity: 1; translate: 0 0;
  transition-duration: .9s;
  transition-delay: calc(.35s + var(--i, 0) * .07s);
}
@media (min-width: 1024px) {
  .kobo-modal .panel { width: calc(var(--col) * 3 + var(--g-gap) * 2); }
  .kobo-modal .close span::before { content: "Esc"; }
  .kobo-modal .close:hover svg { animation: crossRotate .6s var(--f-fast) forwards; }
}

@media (prefers-reduced-motion: reduce) {
  .cover-art img, .cover-art .orbit { animation: none; }
}