/* =====================================================================
   Quiznight 2 · DIE SET-KARTE (setkarte.js, QN.setKarte)
   Ein Set als Schaufenster: Titelbild, Name in SEINER Schrift, eine Lockzeile —
   und Leben: Das Bild fährt, die große Karte blendet
   als Trailer durch die Welten des Sets, dazu die Bewegung, die zum Set gehört.

   MASS: Jede Länge hängt an --sk. Wer die Karte einbaut, setzt --sk auf sein
   Maß (das Finale: 1cqmin der Bühne). Keine Schrift unter 9 px.
   FARBEN: --acc/--acc2 sind die des GEZEIGTEN Sets (QN.setKarte.faerbe setzt sie
   an die Karte). --sk-grund ist der dunkle Ton der Bühne, auf der die Karte
   steht (die Rolle --g0 der Umgebung): Schleier und Rand laufen in IHN aus —
   so sitzen drei Karten mit drei Farbwelten in derselben Szene.
   BEWEGUNG: nur transform und opacity. Unter reduzierter Bewegung (und mit
   .sk-ruhig) steht das fertige Titelbild.
   ===================================================================== */
.sk {
  --sk-grund: color-mix(in srgb, var(--g0, #0a0a10) 82%, #000);
  --sk-dauer: 8000ms;
  position: relative; overflow: hidden; isolation: isolate; min-width: 0; min-height: 0; color: #fff;
  border-radius: calc(var(--sk) * 2.4);
  /* Das Licht der Bühne kommt von oben links: Der Schatten fällt nach unten rechts. */
  box-shadow: calc(var(--sk) * .6) calc(var(--sk) * 1.4) calc(var(--sk) * 3.2) rgba(0, 0, 0, .55);
  transition: transform .28s cubic-bezier(.2, .8, .2, 1);
}
.sk.gross { box-shadow: calc(var(--sk) * .6) calc(var(--sk) * 1.4) calc(var(--sk) * 3.2) rgba(0, 0, 0, .55), 0 0 calc(var(--sk) * 7) color-mix(in srgb, var(--acc) 30%, transparent); }

/* ---------- Die Bildbühne: Titelbild, Welten, Bewegung, Schleier ---------- */
.sk-buehne { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; background: var(--sk-grund); pointer-events: none; }
.sk-buehne > * { position: absolute; inset: 0; display: block; }
.sk-bild, .sk-welt { background-size: cover; background-repeat: no-repeat; will-change: transform; backface-visibility: hidden; }
/* Das Titelbild fährt langsam — hin und zurück, nie ruckartig. */
.sk-bild { animation: sk-fahrt 26s ease-in-out infinite alternate; }
.sk.klein .sk-bild { animation-duration: 34s; }
@keyframes sk-fahrt { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.1) translate(-1.3%, -.9%); } }
/* Eine Welt des Trailers: blendet über das Titelbild und fährt dabei weiter. Geht sie, bleibt sie
   stehen, wo sie war (die Fahrt hält an) — sonst spränge sie im Ausblenden zurück. */
.sk-welt {
  opacity: 0; transition: opacity 1.4s cubic-bezier(.4, 0, .2, 1);
  animation: sk-weltfahrt 11s linear infinite alternate; animation-play-state: paused;
}
.sk-welt.an { opacity: 1; animation-play-state: running; }
@keyframes sk-weltfahrt {
  from { transform: scale(1.05) translate(calc(var(--fx, 1) * 1.6%), calc(var(--fy, 1) * 1%)); }
  to { transform: scale(1.17) translate(calc(var(--fx, 1) * -1.6%), calc(var(--fy, 1) * -1%)); }
}
/* Der Schleier: überall derselbe. Oben und links dunkelt er für Marke, Name und Zeile, unten für
   Stimmen und Knopf; am Rand läuft das Bild in den Ton der Bühne aus. */
.sk-schleier {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--sk-grund) 78%, transparent) 0, color-mix(in srgb, var(--sk-grund) 46%, transparent) 34%, transparent 60%),
    linear-gradient(0deg, color-mix(in srgb, var(--sk-grund) 78%, transparent) 0, color-mix(in srgb, var(--sk-grund) 22%, transparent) 26%, transparent 44%),
    radial-gradient(120% 120% at 50% 46%, transparent 62%, color-mix(in srgb, var(--sk-grund) 55%, transparent) 100%);
}
.sk.sk-lage-rechts .sk-schleier {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--sk-grund) 80%, transparent) 0, color-mix(in srgb, var(--sk-grund) 40%, transparent) 38%, transparent 64%),
    linear-gradient(180deg, color-mix(in srgb, var(--sk-grund) 58%, transparent) 0, transparent 30%),
    linear-gradient(0deg, color-mix(in srgb, var(--sk-grund) 78%, transparent) 0, color-mix(in srgb, var(--sk-grund) 22%, transparent) 26%, transparent 44%),
    radial-gradient(120% 120% at 50% 46%, transparent 62%, color-mix(in srgb, var(--sk-grund) 55%, transparent) 100%);
}
/* In einer Welt steht der Name vor einem fremden Bild: Der Schleier links wird dichter (eine zweite
   Fläche blendet ein — der Verlauf selbst lässt sich nicht billig überblenden). */
.sk-schleier::after {
  content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s cubic-bezier(.4, 0, .2, 1);
  background: linear-gradient(90deg, color-mix(in srgb, var(--sk-grund) 86%, transparent) 0, color-mix(in srgb, var(--sk-grund) 54%, transparent) 30%, color-mix(in srgb, var(--sk-grund) 18%, transparent) 52%, transparent 70%);
}
.sk[data-szene="welt"] .sk-schleier::after { opacity: 1; }
.sk.gross.sk-serif .sk-schleier::after { background: linear-gradient(180deg, color-mix(in srgb, var(--sk-grund) 82%, transparent) 0, color-mix(in srgb, var(--sk-grund) 40%, transparent) 40%, transparent 64%); }
/* ---------- Die Bewegung des Sets ----------
   Sie gehört zum TITELBILD (Schnee fällt über dem Marktplatz, nicht in der Stube der nächsten Welt):
   In einer Welt blendet sie aus. */
.sk-leben { overflow: hidden; transition: opacity .6s cubic-bezier(.4, 0, .2, 1); }
.sk[data-szene="welt"] .sk-leben { opacity: 0; }
.sk-leben > i { position: absolute; display: block; will-change: transform, opacity; }
/* Staub im Licht (Kostprobe, Kino): kleine helle Punkte treiben langsam. */
.sk-l-staub {
  width: calc(var(--sk) * .55); height: calc(var(--sk) * .55); min-width: 2px; min-height: 2px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #fff 0, rgba(255, 232, 196, .85) 42%, transparent 72%);
  animation: sk-staub var(--d, 10s) ease-in-out var(--v, 0s) infinite;
}
@keyframes sk-staub {
  0% { opacity: 0; transform: translate(0, 0) scale(var(--s, 1)); }
  22% { opacity: .9; }
  60% { opacity: .4; }
  82% { opacity: .75; }
  100% { opacity: 0; transform: translate(calc(var(--dx, 3) * var(--sk)), calc(var(--dy, -5) * var(--sk))) scale(var(--s, 1)); }
}
/* Kino: Das Bild flackert ganz leicht, wie Film im Projektor — nie mehr als ein Hauch. */
.sk-l-flacker { inset: 0; background: #000; opacity: 0; animation: sk-flacker 2.3s steps(1, end) infinite; }
@keyframes sk-flacker { 0% { opacity: 0; } 9% { opacity: .05; } 15% { opacity: 0; } 34% { opacity: .035; } 41% { opacity: 0; } 58% { opacity: .06; } 63% { opacity: .01; } 79% { opacity: .04; } 86% { opacity: 0; } }
/* Rennsport: Lichter ziehen flach über dem Boden vorbei — in Fahrtrichtung des Wagens, nach links. */
.sk-l-spur {
  right: -46%; width: var(--b, 30%); height: calc(var(--sk) * .28); min-height: 1.5px; border-radius: 99px; opacity: 0;
  background: linear-gradient(270deg, transparent, var(--ton, var(--acc)) 62%, #fff 96%, transparent);
  animation: sk-spur var(--d, 4s) cubic-bezier(.5, 0, .8, 1) var(--v, 0s) infinite;
}
@keyframes sk-spur {
  0% { opacity: 0; transform: translateX(0); }
  6% { opacity: var(--o, .6); }
  44% { opacity: var(--o, .6); }
  52%, 100% { opacity: 0; transform: translateX(-640%); }
}
/* Weihnachten: Schnee fällt in drei Tiefen. Jede Flocke ist ein schmaler Streifen so hoch wie die
   Karte (der Punkt sitzt an seinem Kopf) — so fällt sie mit translateY in Prozent durch die ganze Karte. */
.sk-l-flocke { top: 0; height: 100%; width: calc(var(--sk) * .8); min-width: 3px; opacity: var(--o, .6); animation: sk-schnee var(--d, 8s) linear var(--v, 0s) infinite; }
.sk-l-flocke::before {
  content: ''; position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 1; border-radius: 50%; transform: scale(var(--s, 1));
  background: radial-gradient(circle, #fff 0, rgba(255, 255, 255, .75) 45%, transparent 74%);
}
@keyframes sk-schnee { from { transform: translate(0, -8%); } to { transform: translate(calc(var(--dx, 2) * var(--sk)), 104%); } }
/* Gaming: Klötzchen fallen in Stufen und setzen sich ab — wie Steine in einem alten Spiel. */
.sk-l-pixel { top: 0; height: 100%; width: calc(var(--sk) * .9 * var(--s, 1)); min-width: 3px; opacity: 0; animation: sk-pixel var(--d, 6s) steps(9, end) var(--v, 0s) infinite; }
.sk-l-pixel::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 1; background: var(--ton, var(--acc)); box-shadow: 0 0 calc(var(--sk) * 1.2) color-mix(in srgb, var(--ton, var(--acc)) 70%, transparent); }
@keyframes sk-pixel {
  0% { opacity: 0; transform: translateY(-6%); }
  8% { opacity: .9; }
  56% { opacity: .9; transform: translateY(calc(var(--ziel, 80) * 1%)); }
  84% { opacity: .9; transform: translateY(calc(var(--ziel, 80) * 1%)); }
  100% { opacity: 0; transform: translateY(calc(var(--ziel, 80) * 1%)); }
}
/* Anime: Blütenblätter treiben im Wind von rechts nach links. Jedes Blatt ist ein Streifen so breit wie die
   Karte (das Blatt sitzt an seinem rechten Ende) — so zieht es mit translateX in Prozent durch die ganze Karte
   und sinkt dabei um --dy. Das Blatt selbst (::before, die Kerbe aus --blueten-blatt in qn.css) dreht sich
   in seinem eigenen Takt. */
.sk-l-blatt { left: 0; width: 100%; height: calc(var(--sk) * 1.6); opacity: 0; animation: sk-blatt var(--d, 9s) linear var(--v, 0s) infinite; }
.sk-l-blatt::before {
  content: ''; position: absolute; right: 0; top: 0; width: calc(var(--sk) * 1.1 * var(--s, 1)); min-width: 3px; aspect-ratio: .8;
  background: linear-gradient(0deg, color-mix(in srgb, var(--acc) 38%, #fff) 0, color-mix(in srgb, var(--acc) 82%, #fff) 55%, var(--acc) 100%);
  -webkit-mask: var(--blueten-blatt) center / 100% 100% no-repeat; mask: var(--blueten-blatt) center / 100% 100% no-repeat;
  transform: rotate(var(--w, 40deg)); animation: sk-blatt-dreh var(--dd, 3s) linear infinite;
}
@keyframes sk-blatt {
  0% { opacity: 0; transform: translate(6%, 0); }
  8% { opacity: var(--o, .8); }
  88% { opacity: var(--o, .8); }
  100% { opacity: 0; transform: translate(-100%, calc(var(--dy, 10) * var(--sk))); }
}
@keyframes sk-blatt-dreh { from { transform: rotate(var(--w, 40deg)) rotateX(0deg); } to { transform: rotate(calc(var(--w, 40deg) + 360deg)) rotateX(360deg); } }

/* ---------- Oben: Marke, Minuten, die Striche des Trailers ---------- */
.sk-oben, .sk-titel, .sk > .sk-min, .sk-credit { position: absolute; z-index: 2; pointer-events: none; }
.sk-oben { left: calc(var(--sk) * 1.9); right: calc(var(--sk) * 1.9); top: calc(var(--sk) * 1.8); display: flex; align-items: center; gap: calc(var(--sk) * 1); }
.sk-marke {
  font: 800 max(9px, calc(var(--sk) * 1.6))/1 var(--f-body); letter-spacing: .18em; text-transform: uppercase; white-space: nowrap;
  padding: calc(var(--sk) * .8) calc(var(--sk) * 1.4); border-radius: 99px; background: var(--acc2); color: var(--auf-acc2, #14141a);
}
.sk-min {
  font: 800 max(9px, calc(var(--sk) * 1.7))/1 var(--f-body); white-space: nowrap;
  padding: calc(var(--sk) * .8) calc(var(--sk) * 1.3); border-radius: 99px; background: color-mix(in srgb, var(--sk-grund) 70%, transparent); color: #fff;
}
.sk > .sk-min { right: calc(var(--sk) * 1.4); top: calc(var(--sk) * 1.5); font-size: max(9px, calc(var(--sk) * 1.5)); padding: calc(var(--sk) * .65) calc(var(--sk) * 1); }
.sk.sk-ohne-min > .sk-min { display: none; }
/* Die Striche: einer für den Titel, einer je Welt. Der laufende füllt sich in der Zeit seiner Szene. */
.sk-striche { margin-left: auto; display: flex; gap: calc(var(--sk) * .5); }
.sk-striche i { display: block; width: calc(var(--sk) * 3); height: max(2px, calc(var(--sk) * .5)); border-radius: 99px; overflow: hidden; background: rgba(255, 255, 255, .28); }
.sk-striche b { display: block; width: 100%; height: 100%; border-radius: inherit; background: #fff; transform: scaleX(0); transform-origin: 0 50%; }
.sk-striche i.voll b { transform: scaleX(1); }
.sk-striche i.an b { animation: sk-strich var(--sk-dauer) linear both; }
.sk.sk-halt .sk-striche i.an b { animation-play-state: paused; }
@keyframes sk-strich { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Der Name in der Schrift des Sets, darunter EINE Zeile ---------- */
.sk-titel { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--sk) * 1.1); min-width: 0; }
.sk-name {
  white-space: nowrap; font-family: var(--f-display); font-weight: 900; line-height: 1; text-transform: uppercase; letter-spacing: -.01em;
  font-size: calc(var(--sk) * 3.9); text-shadow: 0 calc(var(--sk) * .3) calc(var(--sk) * 1.6) rgba(0, 0, 0, .8);
}
.sk.gross .sk-titel { left: calc(var(--sk) * 2.4); right: calc(var(--sk) * 2.4); top: calc(var(--sk) * 6.8); }
.sk.gross .sk-name { font-size: calc(var(--sk) * 10.4); text-shadow: 0 calc(var(--sk) * .5) calc(var(--sk) * 2.4) rgba(0, 0, 0, .75); }
.sk.gross.sk-lage-rechts .sk-titel { top: 27%; right: 46%; }
.sk.klein .sk-titel { left: calc(var(--sk) * 1.9); right: calc(var(--sk) * 1.9); top: calc(var(--sk) * 1.6); gap: calc(var(--sk) * .7); }
/* Die Zeilen liegen übereinander in EINER Zelle — es steht immer genau eine: am Titel die Lockzeile,
   in einer Welt ihr Name. Die Zelle ist so hoch wie die höchste; nichts rückt beim Wechsel. */
.sk-zeilen { display: grid; grid-template: auto / minmax(0, 1fr); justify-items: start; align-items: start; width: 100%; min-width: 0; }
.sk-zeile {
  grid-area: 1 / 1; min-width: 0; opacity: 0; transform: translateY(calc(var(--sk) * .7));
  /* Die alte Zeile geht schnell, die neue kommt erst danach (transition-delay unten) — zwei Zeilen
     übereinander wären ein Geisterbild. */
  transition: opacity .16s linear, transform .16s linear;
  font: 700 max(9px, calc(var(--sk) * 2.5))/1.22 var(--f-body); color: rgba(255, 255, 255, .94); text-wrap: balance;
  /* Die Zeile steht auf dem Bild (auch auf hellen Fenstern eines Marktplatzes): ein enger und ein weiter Schatten. */
  text-shadow: 0 calc(var(--sk) * .15) calc(var(--sk) * .5) rgba(0, 0, 0, .95), 0 0 calc(var(--sk) * 1.6) rgba(0, 0, 0, .9), 0 0 calc(var(--sk) * 3) rgba(0, 0, 0, .6);
}
.sk[data-szene="titel"] .sk-z-lock, .sk[data-szene="welt"] .sk-z-welt.an {
  opacity: 1; transform: none;
  transition: opacity .4s cubic-bezier(.4, 0, .2, 1) .2s, transform .45s cubic-bezier(.2, .8, .2, 1) .2s;
}
.sk-z-welt { display: flex; align-items: center; gap: calc(var(--sk) * 1); white-space: nowrap; }
.sk-z-welt i {
  font: 800 max(9px, calc(var(--sk) * 1.5))/1 var(--f-body); font-style: normal; letter-spacing: .16em; text-transform: uppercase; flex: none;
  padding: calc(var(--sk) * .7) calc(var(--sk) * 1.1); border-radius: 99px; color: #fff;
  background: color-mix(in srgb, var(--sk-grund) 66%, transparent); box-shadow: inset 0 0 0 max(1px, calc(var(--sk) * .2)) var(--acc2);
}
.sk-z-welt b { font: 800 max(9px, calc(var(--sk) * 2.9))/1.1 var(--f-display); letter-spacing: 0; }
.sk.klein .sk-zeile { font-size: max(9px, calc(var(--sk) * 1.75)); line-height: 1.25; }
.sk.klein .sk-z-welt i { display: none; }
.sk.klein .sk-z-welt b { font-size: max(9px, calc(var(--sk) * 2)); }
.sk.sk-ohne-zeile .sk-zeilen { display: none; }
/* Das Motiv steht rechts: Die Zeile endet mit dem Titelblock vor ihm. */
.sk.gross.sk-lage-rechts .sk-z-lock { max-width: 100%; }

/* `titelschrift: 'pixel'` (Gaming): Pixelschrift mit versetzten Schatten in den Set-Farben. */
.sk.sk-pixel .sk-name {
  font-family: "Press Start 2P", monospace; font-weight: 400; letter-spacing: 0; line-height: 1.1;
  text-shadow: calc(var(--sk) * .45) calc(var(--sk) * .45) 0 var(--acc2), calc(var(--sk) * -.3) calc(var(--sk) * -.3) 0 var(--acc), 0 calc(var(--sk) * 1) calc(var(--sk) * 3) rgba(0, 0, 0, .6);
}
.sk.gross.sk-pixel .sk-name { font-size: calc(var(--sk) * 5.6); }
.sk.klein.sk-pixel .sk-name { font-size: calc(var(--sk) * 2.4); text-shadow: calc(var(--sk) * .3) calc(var(--sk) * .3) 0 var(--acc2), calc(var(--sk) * -.2) calc(var(--sk) * -.2) 0 var(--acc); }
.sk.sk-pixel .sk-titel { gap: calc(var(--sk) * 1.5); }
.sk.klein.sk-pixel .sk-titel { top: calc(var(--sk) * 2.1); gap: calc(var(--sk) * 1); }
/* `titelschrift: 'serif'` (Kostprobe): kursive Serifenschrift, in der großen Karte mittig über dem Stillleben. */
.sk.sk-serif .sk-name {
  font-family: "Playfair Display", serif; font-style: italic; font-weight: 900; text-transform: none; line-height: 1.1; color: #fff3d8;
  text-shadow: 0 calc(var(--sk) * .5) calc(var(--sk) * 2.6) rgba(0, 0, 0, .75), 0 0 calc(var(--sk) * 3.4) rgba(255, 214, 150, .3);
}
.sk.gross.sk-serif .sk-titel { left: calc(var(--sk) * 2.4); right: calc(var(--sk) * 2.4); top: 13%; align-items: center; gap: calc(var(--sk) * .5); }
.sk.gross.sk-serif .sk-name { font-size: calc(var(--sk) * 9); }
.sk.gross.sk-serif .sk-zeilen { justify-items: center; }
.sk.gross.sk-serif .sk-zeile { text-align: center; justify-content: center; }
.sk.klein.sk-serif .sk-name { font-size: calc(var(--sk) * 4.6); }
.sk.klein.sk-serif .sk-titel { top: calc(var(--sk) * 1.1); gap: calc(var(--sk) * .3); }

/* Ein Foto nennt seinen Urheber, solange es zu sehen ist (KI-Bilder tragen kein Foto-Credit). */
.sk-credit {
  right: calc(var(--sk) * 1.9); top: calc(var(--sk) * 5.2); max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 600 max(9px, calc(var(--sk) * 1.25))/1.2 var(--f-body); color: rgba(255, 255, 255, .78); text-shadow: 0 0 calc(var(--sk) * .8) rgba(0, 0, 0, .9);
}
/* Klein: HOCHKANT AM RECHTEN RAND (Tobi, 2026-10-06: „… werden die Credits vom Fotograf in der Mitte angezeigt,
   das find ich doof, das muss irgendwie an den Rand"). Der Name läuft von unten nach oben am Rand entlang —
   zwischen den Minuten oben und dem, was der Einbauer unten rechts hinlegt (Knopf, Stimme). Vorher stand er
   quer über dem Knopf, mitten im Bild. Passt er nicht in die Höhe, kürzt er mit „…". */
.sk.klein .sk-credit {
  writing-mode: vertical-rl; transform: rotate(180deg);
  top: calc(var(--sk) * 2.2); bottom: calc(var(--sk) * 7); right: calc(var(--sk) * .4); left: auto;
  max-width: none; max-height: calc(100% - var(--sk) * 9.2); text-align: left;
  font-size: max(8px, calc(var(--sk) * .68)); line-height: 1.1; color: rgba(255, 255, 255, .72);
}
.sk-credit > i { font-style: normal; }
.sk.klein .sk-credit > i { display: none; }
.sk-credit:empty { display: none; }

/* ---------- Der Rahmen: bei allen Karten derselbe — helles Glas, das Licht kommt von oben links ---------- */
.sk-rahmen {
  position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 max(1px, calc(var(--sk) * .22)) rgba(255, 255, 255, .24), inset calc(var(--sk) * .5) calc(var(--sk) * .6) calc(var(--sk) * 1.2) rgba(255, 255, 255, .12);
  transition: box-shadow .25s cubic-bezier(.4, 0, .2, 1);
}
.sk.gross .sk-rahmen { box-shadow: inset 0 0 0 max(1.5px, calc(var(--sk) * .32)) rgba(255, 255, 255, .42), inset calc(var(--sk) * .5) calc(var(--sk) * .6) calc(var(--sk) * 1.2) rgba(255, 255, 255, .14); }
/* Zeigen, drücken, gewählt — nur dort, wo man die Karte anfassen kann (.sk-zeigbar setzt der Einbauer). */
.sk.sk-zeigbar:hover, .sk.sk-zeigbar:focus-within { transform: translateY(calc(var(--sk) * -.5)) scale(1.012); }
.sk.sk-zeigbar:active { transform: scale(.988); transition-duration: .08s; }
.sk.sk-zeigbar:hover .sk-rahmen, .sk.sk-zeigbar:focus-within .sk-rahmen { box-shadow: inset 0 0 0 max(1.5px, calc(var(--sk) * .4)) color-mix(in srgb, var(--acc2) 62%, #fff), inset calc(var(--sk) * .5) calc(var(--sk) * .6) calc(var(--sk) * 1.2) rgba(255, 255, 255, .16); }
.sk.sk-gewaehlt .sk-rahmen, .sk.sk-zeigbar.sk-gewaehlt:hover .sk-rahmen { box-shadow: inset 0 0 0 max(2px, calc(var(--sk) * .7)) var(--acc2), inset 0 0 calc(var(--sk) * 3) color-mix(in srgb, var(--acc2) 40%, transparent); }

/* ---------- Reduzierte Bewegung: das fertige Titelbild, nichts fährt, nichts treibt ---------- */
.sk.sk-ruhig .sk-bild, .sk.sk-ruhig .sk-welt, .sk.sk-ruhig .sk-striche b { animation: none !important; }
.sk.sk-ruhig .sk-leben, .sk.sk-ruhig .sk-striche { display: none; }
.sk.sk-ruhig, .sk.sk-ruhig .sk-zeile { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .sk-bild, .sk-welt, .sk-striche b { animation: none !important; }
  .sk-leben, .sk-striche { display: none; }
  .sk, .sk-zeile, .sk-welt { transition: none; }
}