/* Link Labs — l6s.app
   Basis ist die Link-Labs-Sprache aus Fast Feedback und Architecture Overview:
   Glieder + Umlaufbahn + kreisender Planet, Eis/Orange/Amber, Unbounded, kantige 4px. */

@font-face { font-family: 'Unbounded'; font-weight: 600; font-display: swap; src: url('fonts/unbounded-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Unbounded'; font-weight: 800; font-display: swap; src: url('fonts/unbounded-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-weight: 100 900; font-display: swap; src: url('fonts/hanken-grotesk-latin-wght-normal.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 500; font-display: swap; src: url('fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2'); }

:root {
  --abyss: #050b1c;
  --papier: #081230;
  --flaeche: #0d1c44;
  --flaeche-hoch: #142a5e;
  --linie-dunkel: #22397a;
  --eis: #6fe3ff;
  --amber: #ffc24b;
  --orange: #ff6a2b;
  --gruen: #5cf0b4;
  --rot: #ff6b7f;

  /* auf dem hellen Grund */
  --tinte: #0d1c44;
  --grau: #3b4b78;
  --hell: #66759e;
  --linie: #c6cfe3;

  --font-display: 'Unbounded', 'Hanken Grotesk', ui-sans-serif, sans-serif;
  --font-sans: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --radius: 4px;
  --breite: 1180px;
  --feder: cubic-bezier(.2, 1.4, .4, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html {
  min-height: 100%;
  background: radial-gradient(120% 90% at 15% 0%, #f6f8fc 0%, #e9edf5 50%, #dfe5f0 100%) fixed #e6ebf3;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  color: var(--tinte);
  font: 400 17px/1.6 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
main { flex: 1; }
a { color: inherit; }
img, svg, video { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -.01em; margin: 0; }
p { margin: 0; }
::selection { background: color-mix(in srgb, var(--orange) 30%, transparent); }
:focus-visible { outline: 2px dashed var(--orange); outline-offset: 3px; }

.rahmen { width: min(var(--breite), 100% - 32px); margin-inline: auto; }
.mono { font: 500 12px/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }

/* Dunkle Zonen behalten die Link-Labs-Nacht */
.dunkel {
  --tinte: #f2f5fc;
  --grau: #b9c4e2;
  --hell: #7f8db3;
  --linie: var(--linie-dunkel);
  color: var(--tinte);
  background: var(--papier);
}

/* ---------- Hintergrund: treibendes Punktraster, schwebende Wolken, etwas Korn ---------- */
.ll-hintergrund { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.ll-hintergrund .raster {
  position: absolute; inset: -40px;
  background-image: radial-gradient(rgba(13, 28, 68, .2) 1px, transparent 1.4px);
  background-size: 28px 28px;
  animation: ll-drift 60s linear infinite;
  mask-image: radial-gradient(90% 80% at 50% 40%, #000 30%, transparent 100%);
}
.ll-hintergrund .wolke { position: absolute; border-radius: 50%; filter: blur(90px); }
.ll-hintergrund .w1 { width: 520px; height: 520px; background: var(--orange); top: -220px; right: 18%; opacity: .16; animation: ll-schweben-a 26s ease-in-out infinite alternate; }
.ll-hintergrund .w2 { width: 640px; height: 640px; background: #2e5bff; bottom: -320px; left: -120px; opacity: .14; animation: ll-schweben-b 32s ease-in-out infinite alternate; }
.ll-hintergrund .w3 { width: 380px; height: 380px; background: var(--eis); top: 40%; right: -160px; opacity: .18; animation: ll-schweben-a 22s ease-in-out infinite alternate-reverse; }
.ll-hintergrund .korn {
  position: absolute; inset: 0; opacity: .07; mix-blend-mode: multiply;
  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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Logo ---------- */
.zeichen { flex: none; overflow: visible; }
.zeichen rect { fill: none; stroke-width: 3.4; }
.zeichen .a { stroke: var(--eis); }
.zeichen .b { stroke: var(--orange); }
.zeichen .glieder { transform-box: view-box; transform-origin: 24px 24px; animation: ll-wackeln 7s ease-in-out infinite; }
.zeichen .bahn { fill: none; stroke: rgb(111 227 255 / .22); stroke-width: 1; stroke-dasharray: 2 4; }
.zeichen .punkt { fill: var(--amber); transform-box: view-box; transform-origin: 24px 24px; animation: ll-orbit 5s linear infinite; filter: drop-shadow(0 0 4px var(--amber)); }
.wortmarke { font: 800 15px/1 var(--font-display); letter-spacing: .08em; }
.wortmarke b { color: var(--orange); font-weight: 800; }

/* ---------- Kopf ---------- */
.kopf { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--linie-dunkel); background: rgb(8 18 48 / .94); backdrop-filter: blur(10px); }
.kopf .rahmen { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }
.marke { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.marke .von { color: var(--hell); border-left: 1px solid var(--linie-dunkel); padding-left: 12px; }
.navi { display: flex; gap: 6px; }
.navi a { text-decoration: none; padding: 8px 12px; border-radius: var(--radius); color: var(--grau); transition: color .2s, background .2s; }
.navi a:hover { color: var(--tinte); background: var(--flaeche); }
.navi a::before { content: '/'; color: var(--orange); margin-right: 4px; }

/* ---------- Knöpfe: kantig, harter Schatten ---------- */
.knoepfe { display: flex; flex-wrap: wrap; gap: 14px; }
.knopf {
  --schatten: var(--tinte);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 20px;
  border: 2px solid var(--tinte);
  border-radius: var(--radius);
  font: 600 14px/1 var(--font-display);
  letter-spacing: .02em;
  text-decoration: none;
  box-shadow: 4px 4px 0 var(--schatten);
  transition: transform .2s var(--feder), box-shadow .2s var(--feder), background .2s;
}
.knopf .pfeil { display: inline-block; transition: transform .25s var(--feder); }
.knopf:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--schatten); }
.knopf:hover .pfeil { transform: translateX(3px) rotate(-45deg); }
.knopf:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--schatten); }
.knopf.orange { background: var(--orange); color: #0d1c44; border-color: #0d1c44; --schatten: #0d1c44; }
.knopf.hohl { background: transparent; color: var(--tinte); }
.dunkel .knopf.orange { --schatten: var(--eis); }
.dunkel .knopf.hohl { --schatten: var(--linie-dunkel); border-color: var(--linie-dunkel); }
.knopf[aria-disabled='true'] { cursor: default; }
.knopf[aria-disabled='true']:hover { transform: none; box-shadow: 4px 4px 0 var(--schatten); }
.knopf[aria-disabled='true'] .pfeil { transform: none; }

/* ---------- Bühne: das Zeichen groß auf dunklem Podest ---------- */
.buehne { padding: clamp(20px, 3vw, 36px) 0 clamp(64px, 8vw, 104px); }
.podest {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  min-height: min(82vh, 820px); justify-content: center;
  padding: clamp(72px, 9vw, 112px) clamp(20px, 4vw, 48px);
  border: 1px solid var(--linie-dunkel); border-radius: var(--radius);
  box-shadow: 10px 10px 0 var(--orange);
}
.podest-grund { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.podest-grund .raster {
  position: absolute; inset: -40px;
  background-image: radial-gradient(rgb(111 227 255 / .16) 1px, transparent 1.4px);
  background-size: 28px 28px; animation: ll-drift 60s linear infinite;
  mask-image: radial-gradient(70% 70% at 50% 45%, #000 20%, transparent 100%);
}
.podest-grund .wolke { position: absolute; border-radius: 50%; filter: blur(100px); }
.podest-grund .w1 { width: 520px; height: 520px; background: var(--orange); top: -260px; right: -120px; opacity: .22; animation: ll-schweben-a 26s ease-in-out infinite alternate; }
.podest-grund .w2 { width: 560px; height: 560px; background: #2e5bff; bottom: -300px; left: -160px; opacity: .28; animation: ll-schweben-b 32s ease-in-out infinite alternate; }
.ecke { position: absolute; display: inline-flex; align-items: center; gap: 8px; color: var(--hell); font-size: 11px; }
.ecke.lo { left: 20px; top: 18px; } .ecke.ro { right: 20px; top: 18px; }
.ecke.lu { left: 20px; bottom: 18px; } .ecke.ru { right: 20px; bottom: 18px; }
.ecke .live, .live { width: 8px; height: 8px; border-radius: 50%; background: var(--gruen); animation: ll-funk 2.4s ease-out infinite; }

.zeichen.gross { width: clamp(150px, 24vw, 280px); height: auto; transform: translate(var(--px, 0px), var(--py, 0px)); transition: transform .6s cubic-bezier(.2, .8, .3, 1); }
.zeichen.gross .bahn { stroke: rgb(111 227 255 / .3); stroke-width: .35; stroke-dasharray: .9 1.8; }
.zeichen.gross .punkt { filter: drop-shadow(0 0 14px var(--amber)); }
.wortmarke.gross { margin-top: clamp(24px, 3.4vw, 40px); font-size: clamp(40px, 8.4vw, 112px); letter-spacing: .06em; line-height: 1; }
.claim { margin-top: clamp(18px, 2.4vw, 28px); font: 600 clamp(18px, 2.3vw, 28px)/1.25 var(--font-display); letter-spacing: -.01em; }
.claim .ende { display: inline-block; width: .26em; height: .26em; margin-left: .12em; border-radius: 50%; background: var(--amber); box-shadow: 0 0 12px var(--amber); animation: ll-huepfen 3.2s var(--feder) infinite; }
.podest .unterzeile { margin: 14px 0 34px; max-width: 40ch; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.5; color: var(--grau); }
.podest .knoepfe { justify-content: center; }

/* Aufkleber an der Karte */
.aufkleber { position: absolute; right: -30px; top: 47%; z-index: 3; width: 104px; aspect-ratio: 1; transform: rotate(-10deg); }
.aufkleber svg { width: 100%; height: 100%; animation: ll-orbit 18s linear infinite; }
.aufkleber .grund { fill: var(--orange); stroke: #0d1c44; stroke-width: 2; }
.aufkleber .schatten { fill: #0d1c44; }
.aufkleber text { font: 500 9.6px var(--font-mono); letter-spacing: .12em; fill: #0d1c44; }
.aufkleber .mitte { position: absolute; inset: 0; display: grid; place-items: center; font: 800 22px/1 var(--font-display); color: #0d1c44; }

/* ---------- Laufband ---------- */
.band { position: relative; z-index: 2; transform: rotate(-1.6deg); margin: 0 -2vw; overflow: hidden; background: var(--abyss); border-block: 1px solid var(--linie-dunkel); }
.band .spur { display: flex; width: max-content; animation: ll-laufen 38s linear infinite; }
.band span { font: 800 clamp(15px, 2vw, 22px)/1 var(--font-display); letter-spacing: .04em; text-transform: uppercase; color: #f2f5fc; padding: 18px 0; white-space: nowrap; }
.band b { color: var(--orange); margin: 0 .9em; font-weight: 600; }
.band i { font-style: normal; color: var(--eis); }

/* ---------- Projekte ---------- */
.labor { padding: clamp(80px, 10vw, 132px) 0 clamp(48px, 7vw, 88px); }
.kopfzeile { display: flex; align-items: end; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 48px; }
.kopfzeile h2 { font-weight: 800; font-size: clamp(30px, 4.4vw, 54px); line-height: 1; letter-spacing: -.03em; }
.kopfzeile h2 .strich { color: var(--orange); font-weight: 600; }
.kopfzeile .mono { color: var(--hell); }

.karten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 40px); }
.karte {
  --akzent: var(--eis);
  position: relative;
  display: flex; flex-direction: column;
  border: 1px solid var(--linie-dunkel);
  border-radius: var(--radius);
  box-shadow: 8px 8px 0 var(--abyss);
  transition: transform .35s var(--feder), box-shadow .35s var(--feder);
}
.karte.ff { --akzent: var(--orange); }
.karte:hover { transform: translate(-3px, -3px) rotate(-.4deg); box-shadow: 12px 12px 0 var(--akzent); }
.karte .nummer { position: absolute; right: 20px; top: -34px; z-index: 2; font: 800 64px/1 var(--font-display); color: var(--akzent); -webkit-text-stroke: 2px var(--abyss); paint-order: stroke fill; }

.fenster { margin: 14px 14px 0; border: 1px solid var(--linie-dunkel); border-radius: var(--radius); background: var(--abyss); overflow: hidden; }
.fenster .leiste { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--linie-dunkel); color: var(--hell); font-size: 11px; }
.fenster .rec { display: inline-flex; align-items: center; gap: 6px; color: var(--akzent); }
.fenster .rec::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--rot); animation: ll-blinken 1.4s steps(2, jump-none) infinite; }
.fenster .bild { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.fenster video { width: 100%; height: 100%; object-fit: cover; }
.fenster .bild::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(111, 227, 255, .1) 1px, transparent 1.4px); background-size: 18px 18px; pointer-events: none; }

/* Mini-Szene: Agenten-Graph */
.szene-graph { width: 100%; height: 100%; }
.szene-graph .kante { fill: none; stroke: rgb(111 227 255 / .4); stroke-width: 1.5; stroke-dasharray: 3 5; animation: ll-fliessen 1.6s linear infinite; }
.szene-graph .knoten { fill: var(--flaeche); stroke: var(--eis); stroke-width: 2; }
.szene-graph .chef { fill: var(--flaeche-hoch); stroke: var(--orange); }
.szene-graph .puls { fill: var(--amber); filter: drop-shadow(0 0 5px var(--amber)); }
.szene-graph text { font: 500 10px var(--font-mono); fill: #b9c4e2; letter-spacing: .05em; }
.szene-graph .neu { transform-box: fill-box; transform-origin: center; animation: ll-ping-knoten 5s ease-out infinite; }
.szene-graph .neu.spaet { animation-delay: 2.5s; }

/* Mini-Szene: Sprachfeedback */
.szene-stimme { position: relative; display: grid; place-items: center; height: 100%; }
.szene-stimme .welle { display: flex; align-items: center; gap: 5px; height: 42%; }
.szene-stimme .welle i { width: 6px; height: 100%; border-radius: 2px; background: var(--orange); animation: ll-pegel 1.1s ease-in-out infinite; }
.szene-stimme .welle i:nth-child(3n) { background: var(--amber); animation-duration: .9s; }
.szene-stimme .welle i:nth-child(4n) { background: var(--eis); animation-duration: 1.3s; }
.szene-stimme .welle i:nth-child(2) { animation-delay: -.2s; } .szene-stimme .welle i:nth-child(3) { animation-delay: -.5s; }
.szene-stimme .welle i:nth-child(4) { animation-delay: -.1s; } .szene-stimme .welle i:nth-child(5) { animation-delay: -.7s; }
.szene-stimme .welle i:nth-child(6) { animation-delay: -.3s; } .szene-stimme .welle i:nth-child(7) { animation-delay: -.9s; }
.szene-stimme .welle i:nth-child(8) { animation-delay: -.4s; } .szene-stimme .welle i:nth-child(9) { animation-delay: -.6s; }
.szene-stimme .welle i:nth-child(10) { animation-delay: -.15s; } .szene-stimme .welle i:nth-child(11) { animation-delay: -.8s; }
.szene-stimme .welle i:nth-child(12) { animation-delay: -.35s; } .szene-stimme .welle i:nth-child(13) { animation-delay: -.55s; }
.szene-stimme .zitat { position: absolute; left: 6%; bottom: 9%; max-width: 62%; padding: 7px 10px; border-radius: var(--radius); background: var(--flaeche-hoch); border: 1px solid var(--linie-dunkel); color: #f2f5fc; font: 500 11px/1.45 var(--font-mono); animation: ll-sprechblase 5s ease-out infinite; }
.szene-stimme .mikro { position: absolute; right: 8%; top: 12%; width: 30px; height: 30px; border-radius: 50%; background: var(--orange); }
.szene-stimme .mikro::before, .szene-stimme .mikro::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--orange); animation: ll-atmen 2.8s ease-out infinite; }
.szene-stimme .mikro::after { animation-delay: 1.4s; }

.koerper { display: flex; flex-direction: column; gap: 14px; padding: 22px 24px 26px; flex: 1; }
.marken { display: flex; flex-wrap: wrap; gap: 6px; }
.marken span { padding: 5px 8px; border: 1px solid var(--linie-dunkel); border-radius: var(--radius); color: var(--grau); font-size: 11px; }
.marken span:first-child { border-color: var(--akzent); color: var(--akzent); }
.koerper h3 { font-weight: 800; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.1; letter-spacing: -.02em; }
.koerper p { color: var(--grau); }
.koerper .knoepfe { margin-top: auto; padding-top: 8px; }

/* ---------- Leitsatz ---------- */
.leitsatz { padding: clamp(48px, 7vw, 96px) 0 clamp(72px, 10vw, 128px); }
.leitsatz blockquote { margin: 0; font: 800 clamp(28px, 4.6vw, 60px)/1.04 var(--font-display); letter-spacing: -.03em; }
.leitsatz blockquote b { color: var(--orange); font-weight: 600; }
.leitsatz .leise { display: block; margin-top: 18px; font: 400 clamp(17px, 1.7vw, 20px)/1.5 var(--font-sans); letter-spacing: 0; color: var(--grau); max-width: 46ch; }

/* ---------- Fuß ---------- */
.fuss { border-top: 1px solid var(--linie-dunkel); padding: 28px 0 32px; }
.fuss .rahmen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.fuss .klein { color: var(--hell); }
.fuss nav { display: flex; gap: 18px; }
.fuss nav a { text-decoration: none; color: var(--grau); }
.fuss nav a:hover { color: var(--orange); }

/* ---------- Rechtliches & 404 ---------- */
.rechtlich { padding: clamp(40px, 7vw, 80px) 0 clamp(56px, 8vw, 96px); }
.blatt { max-width: 760px; padding: clamp(24px, 5vw, 48px); border: 1px solid var(--linie-dunkel); border-radius: var(--radius); box-shadow: 8px 8px 0 var(--abyss); }
.blatt h1 { font-weight: 800; font-size: clamp(30px, 4.4vw, 46px); letter-spacing: -.03em; margin-bottom: 24px; }
.blatt h1 .strich { color: var(--orange); font-weight: 600; }
.blatt h2 { font: 500 12px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--eis); margin: 30px 0 8px; }
.blatt p, .blatt address { color: var(--grau); font-style: normal; }
.blatt p + p { margin-top: 12px; }
.blatt a { color: var(--tinte); text-decoration-color: var(--orange); text-underline-offset: 3px; }

.verloren { display: grid; place-items: center; text-align: center; padding: 56px 0 80px; }
.verloren .zeichen { width: min(200px, 50vw); height: auto; margin-bottom: 36px; }
.verloren .zeichen .bahn { stroke: rgba(13, 28, 68, .35); stroke-width: .5; stroke-dasharray: 1 2; }
.verloren .zeichen .punkt { animation: ll-verirren 5s ease-in-out infinite alternate; }
.verloren h1 { font-weight: 800; font-size: clamp(32px, 5vw, 60px); letter-spacing: -.03em; line-height: 1.05; }
.verloren h1 .strich { color: var(--orange); font-weight: 600; }
.verloren p { margin: 18px 0 30px; color: var(--grau); }
.verloren .knoepfe { justify-content: center; }

/* ---------- Auftauchen beim Scrollen ---------- */
.js .erscheinen { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .8s var(--feder); }
.js .erscheinen.da { opacity: 1; transform: none; }
.karten .erscheinen:nth-child(2) { transition-delay: .12s; }

/* ---------- Animationen ---------- */
@keyframes ll-drift { to { transform: translate(28px, 28px); } }
@keyframes ll-schweben-a { to { transform: translate(-120px, 80px) scale(1.15); } }
@keyframes ll-schweben-b { to { transform: translate(160px, -60px) scale(.9); } }
@keyframes ll-orbit { to { transform: rotate(360deg); } }
@keyframes ll-wackeln { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-8deg) scale(1.04); } }
@keyframes ll-atmen { from { transform: scale(.92); opacity: .8; } to { transform: scale(1.35); opacity: 0; } }
@keyframes ll-funk { 0% { box-shadow: 0 0 0 0 rgb(92 240 180 / .7); } 100% { box-shadow: 0 0 0 10px rgb(92 240 180 / 0); } }
@keyframes ll-huepfen { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(-.35em); } 90% { transform: translateY(0) scale(1.15, .85); } }
@keyframes ll-verirren { 0% { transform: translate(0, 0); } 100% { transform: translate(20px, -9px); } }
@keyframes ll-laufen { to { transform: translateX(-50%); } }
@keyframes ll-blinken { to { opacity: .15; } }
@keyframes ll-fliessen { to { stroke-dashoffset: -16; } }
@keyframes ll-pegel { 0%, 100% { transform: scaleY(.18); } 50% { transform: scaleY(1); } }
@keyframes ll-ping-knoten { 0% { transform: scale(0); opacity: 0; } 10% { transform: scale(1.2); opacity: 1; } 18%, 80% { transform: scale(1); opacity: 1; } 92%, 100% { transform: scale(0); opacity: 0; } }
@keyframes ll-sprechblase { 0%, 10% { opacity: 0; transform: translateY(8px); } 20%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-4px); } }

/* ---------- Schmal ---------- */
@media (max-width: 860px) {
  .ecke.lu, .ecke.ru { display: none; }
  .karten { grid-template-columns: 1fr; gap: 56px; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .marke .von { display: none; }
  .navi a { padding: 8px; }
  .ecke.lo { display: none; }
  .ecke.ro { left: 50%; right: auto; transform: translateX(-50%); white-space: nowrap; }
  .podest { box-shadow: 6px 6px 0 var(--orange); }
  .aufkleber { width: 84px; right: -8px; top: 44%; }
  .wortmarke.gross { letter-spacing: .03em; }
  .karte .nummer { font-size: 48px; top: -26px; }
  .karte:hover { transform: none; box-shadow: 8px 8px 0 var(--abyss); }
  .fenster .leiste .dauer { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .erscheinen { opacity: 1; transform: none; }
}