@font-face { font-family: "Ruslan Display"; src: url("schrift/ruslan-display.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Kurale"; src: url("schrift/kurale.woff2") format("woff2"); font-display: swap; }

:root {
  --nacht: #120f33;
  --gold: #e9c46a;
  --gold-hell: #f7dc8a;
  --gold-tief: #6b3a10;
  --papier: #f4e4c4;
  --lack: #6e141a;
  --lack-mitte: #470a10;
  --lack-tief: #1d0407;
  --grund: #1d1220;
  color-scheme: dark;
}

/* Grund wie der dunkle Boden der Szene: falls ein Gerät doch einen Rand freilässt, fällt er nicht auf */
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--grund); }
body { font-family: Kurale, Georgia, serif; color: var(--papier); background: var(--grund); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); -webkit-tap-highlight-color: transparent; }

/* --breite und --hoehe setzt szene.js: als App vom Home-Bildschirm meldet iOS eine zu kleine Höhe */
#szene { position: fixed; inset: 0 auto auto 0; width: var(--breite, 100%); height: var(--hoehe, 100%); display: block; touch-action: none; }
/* Projektor (projektor.js): zeigt die Szene durch einen Shader, die Leinwand darunter nimmt weiter die Zeiger an */
#projektor { position: fixed; inset: 0 auto auto 0; width: var(--breite, 100%); height: var(--hoehe, 100%); display: block; pointer-events: none; }
body.projiziert #szene { opacity: 0; }
body.brennt .titel, body.brennt .nochmal { opacity: 0; transition: opacity .3s ease; }
#korn { position: fixed; inset: 0 auto auto 0; width: var(--breite, 100%); height: var(--hoehe, 100%); display: block; pointer-events: none; z-index: 20; }
.vignette { position: fixed; inset: 0 auto auto 0; width: var(--breite, 100%); height: var(--hoehe, 100%); pointer-events: none; z-index: 2; background: radial-gradient(ellipse 75% 70% at 50% 46%, transparent 58%, rgba(12, 5, 22, .5) 100%); }

.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Titel oben: erscheint, wenn das Motto liegt. Er ist immer da, damit die Szene darunter Platz lässt. */
.titel { position: fixed; z-index: 3; top: calc(env(safe-area-inset-top, 0px) + max(12px, 2.2vh)); left: 50%; transform: translateX(-50%); width: min(92vw, 900px); margin: 0; text-align: center; pointer-events: none; opacity: 0; transition: opacity 1.6s ease; }
.titel.da { opacity: 1; }
/* Feuervogel und Sternwort fliegen durch den Himmel über dem Haus: der Titel tritt dann ganz zurück, rasch, damit er
   nie vor dem Vogel steht, und der Knopf darin lässt sich so lange nicht treffen */
body.feuerwerk .titel.da { opacity: 0; transition-duration: .45s; }
body.feuerwerk .titel .info { pointer-events: none; }
.titel .kicker { margin: 0; font-size: clamp(13px, 1.9vh, 19px); letter-spacing: .34em; text-transform: uppercase; color: var(--gold); text-shadow: 0 0 10px rgba(10, 6, 30, .9); }
.titel h2 { margin: .08em 0 .16em; text-wrap: balance; font-family: "Ruslan Display", Georgia, serif; font-weight: 400; font-size: clamp(30px, 6.2vh, 66px); line-height: 1.04; color: var(--gold-hell); text-shadow: 0 2px 0 var(--gold-tief), 0 0 22px rgba(16, 8, 40, .95), 0 0 4px rgba(16, 8, 40, .8); }
.titel .datum { margin: 0; font-size: clamp(17px, 2.9vh, 28px); color: var(--papier); text-shadow: 0 0 12px rgba(10, 5, 30, .95), 0 1px 2px rgba(10, 5, 30, .9); }

@media (max-aspect-ratio: 1/1) {
  .titel { top: calc(env(safe-area-inset-top, 0px) + max(18px, 3vh)); }
  .titel h2 { font-size: clamp(34px, 11.5vw, 60px); }
  .titel .kicker { font-size: clamp(12px, 3.4vw, 16px); }
  .titel .datum { font-size: clamp(17px, 5vw, 26px); }
}

/* Vorspann wie im alten Märchenfilm: Lack, Gold, Ranken */
.vorspann { position: fixed; inset: 0 auto auto 0; width: var(--breite, 100%); height: var(--hoehe, 100%); z-index: 10; display: grid; place-items: center; box-sizing: border-box; padding-bottom: calc(var(--hoehe, 0px) - var(--sicht, 0px)); cursor: pointer; background: radial-gradient(ellipse at 50% 42%, var(--lack) 0%, var(--lack-mitte) 52%, var(--lack-tief) 100%); transition: opacity .9s ease; }
.vorspann.weg { opacity: 0; pointer-events: none; }
.rahmen { position: relative; box-sizing: border-box; width: min(86vw, 780px); padding: clamp(46px, 9vmin, 84px) clamp(30px, 8vmin, 90px); text-align: center; border: 2px solid var(--gold); outline: 1px solid rgba(233, 196, 106, .6); outline-offset: 7px; animation: atmen 2.4s ease-in-out infinite alternate; }
/* Sui und Fizkik stehen hinter dem Rahmen: die Unterkante ihrer Leinwand liegt auf der äusseren Goldlinie, links neben der Krone */
.rahmen .gruss { position: absolute; bottom: calc(100% + 9px); right: calc(50% + clamp(130px, 26vmin, 210px) * .4); height: clamp(76px, 19vmin, 150px); aspect-ratio: 160 / 140; pointer-events: none; }
.rahmen .ecke { position: absolute; width: clamp(54px, 10vmin, 90px); height: auto; aspect-ratio: 1; }
.rahmen .ecke:nth-of-type(1) { left: -12px; top: -12px; }
.rahmen .ecke:nth-of-type(2) { right: -12px; top: -12px; transform: scaleX(-1); }
.rahmen .ecke:nth-of-type(3) { left: -12px; bottom: -12px; transform: scaleY(-1); }
.rahmen .ecke:nth-of-type(4) { right: -12px; bottom: -12px; transform: scale(-1); }
.rahmen .krone { position: absolute; left: 50%; top: -30px; width: clamp(130px, 26vmin, 210px); transform: translateX(-50%); background: radial-gradient(ellipse at 50% 70%, var(--lack-mitte) 40%, transparent 70%); }
.rahmen h2 { margin: .32em 0 .36em; text-wrap: balance; font-family: "Ruslan Display", Georgia, serif; font-weight: 400; font-size: clamp(22px, min(7.6vmin, 6.3vw), 56px); hyphens: manual; line-height: 1.06; color: var(--gold-hell); text-shadow: 0 3px 0 #5a1d08, 0 0 34px rgba(255, 196, 96, .22); }
.rahmen .unter { margin: 0; font-size: clamp(17px, 2.9vmin, 25px); color: var(--papier); }
@keyframes atmen { from { filter: brightness(.96); } to { filter: brightness(1.05); } }

.nochmal { position: fixed; z-index: 4; left: 50%; transform: translateX(-50%); bottom: max(10px, env(safe-area-inset-bottom)); padding: 6px 18px 5px; font: inherit; font-size: 15px; letter-spacing: .08em; color: var(--gold-hell); background: rgba(40, 8, 14, .78); border: 1.5px solid var(--gold); border-radius: 999px; cursor: pointer; opacity: 0; transition: opacity 1s ease, background .2s ease; }
.nochmal.da { opacity: 1; }
/* beide Knöpfe sind schmal gezeichnet, fürs Tippen aber gut 44 px gross */
.nochmal::before, .ton::before { content: ""; position: absolute; inset: -7px; }
.nochmal:hover { background: rgba(90, 16, 24, .9); }
.nochmal:focus-visible { outline: 2px solid var(--gold-hell); outline-offset: 3px; }

/* Ton: im Vorspann ein Knopf mit Wort unter dem Titel, im Film nur noch der Lautsprecher unten links */
.ton { position: fixed; z-index: 11; left: max(14px, env(safe-area-inset-left)); bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(0); display: inline-flex; align-items: center; height: 36px; box-sizing: border-box; padding: 0 7px; font: inherit; font-size: 15px; letter-spacing: .08em; color: var(--gold-hell); background: rgba(40, 8, 14, .78); border: 1.5px solid var(--gold); border-radius: 999px; cursor: pointer; transition: left .9s cubic-bezier(.22, 1, .36, 1), bottom .9s cubic-bezier(.22, 1, .36, 1), transform .9s cubic-bezier(.22, 1, .36, 1), padding .9s cubic-bezier(.22, 1, .36, 1), background .2s ease; }
.ton svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ton .lautsprecher { fill: currentColor; stroke-width: 1.2; }
.ton[aria-pressed="false"] .wellen, .ton[aria-pressed="true"] .stumm { display: none; }
.ton span { display: inline-block; max-width: 0; margin-left: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width .8s cubic-bezier(.22, 1, .36, 1), margin .8s cubic-bezier(.22, 1, .36, 1), opacity .4s ease; }
body.vorspann-da .ton { left: 50%; transform: translateX(-50%); bottom: max(16px, 4.5vh, env(safe-area-inset-bottom)); padding: 0 16px 0 12px; }
body.knopf-unten:not(.vorspann-da) .ton { bottom: max(10px, env(safe-area-inset-bottom)); }
body.vorspann-da .ton span { max-width: 7em; margin-left: 8px; opacity: 1; }
.ton:hover { background: rgba(90, 16, 24, .9); }
.ton:focus-visible { outline: 2px solid var(--gold-hell); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .rahmen { animation: none; }
  .titel, .vorspann, .nochmal, .ton, .ton span { transition: none; }
}

@media (min-aspect-ratio: 28/25) {
  .titel { left: max(28px, 4.5vw, env(safe-area-inset-left)); top: calc(env(safe-area-inset-top, 0px) + max(22px, 6vh)); transform: none; width: auto; max-width: min(36vw, 560px); text-align: left; }
  .titel h2 { font-size: clamp(30px, min(7.6vh, 4.6vw), 78px); margin: .14em 0 .18em; }
  .titel .datum { font-size: clamp(17px, min(3.2vh, 2.2vw), 30px); }
}
body:not(.knopf-unten) .nochmal { left: auto; right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); transform: none; }

/* Infos & Anfahrt: der Knopf steht unter dem Datum und kommt mit dem Titel */
.titel .info { position: relative; pointer-events: auto; margin-top: .9em; padding: 7px 18px 6px; font: inherit; font-size: 15px; letter-spacing: .08em; color: var(--gold-hell); background: rgba(40, 8, 14, .78); border: 1.5px solid var(--gold); border-radius: 999px; cursor: pointer; transition: background .2s ease; }
.titel .info::before { content: ""; position: absolute; inset: -7px; }
.titel .info:hover { background: rgba(90, 16, 24, .9); }
.titel .info:focus-visible { outline: 2px solid var(--gold-hell); outline-offset: 3px; }

/* Das Blatt mit den Infos: derselbe Lack wie der Vorspann, doppelter Goldrand, lässt sich auf kleinen Handys scrollen */
.infos { width: min(560px, calc(100vw - 24px)); max-width: none; max-height: none; margin: auto; padding: 0; border: 0; background: transparent; color: var(--papier); overflow: visible; }
.infos::backdrop { background: rgba(10, 4, 14, .76); }
.infos[open] { animation: blatt-auf .5s cubic-bezier(.22, 1, .36, 1); }
@keyframes blatt-auf { from { opacity: 0; transform: translateY(16px) scale(.985); } }
.infos-blatt { position: relative; box-sizing: border-box; max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); overflow-y: auto; overscroll-behavior: contain; padding: clamp(28px, 6vw, 44px) clamp(20px, 5.5vw, 42px) clamp(26px, 5vw, 38px); background: radial-gradient(ellipse at 50% 22%, var(--lack) 0%, var(--lack-mitte) 58%, var(--lack-tief) 100%); border: 2px solid var(--gold); outline: 1px solid rgba(233, 196, 106, .5); outline-offset: -9px; }
.zu { position: sticky; top: 0; float: right; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; margin: -14px -10px 4px 12px; padding: 0; color: var(--gold-hell); background: rgba(29, 4, 7, .7); border: 1.5px solid var(--gold); border-radius: 50%; cursor: pointer; }
.zu svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.zu:hover { background: rgba(90, 16, 24, .9); }
.infos-von { margin: 0; font-size: 13px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.infos h2 { margin: .35em 0 .75em; font-family: "Ruslan Display", Georgia, serif; font-weight: 400; font-size: clamp(25px, 7vw, 36px); line-height: 1.06; color: var(--gold-hell); text-shadow: 0 2px 0 #5a1d08; text-wrap: balance; hyphens: manual; }
.brief p { margin: 0 0 .7em; max-width: 58ch; font-size: 17px; line-height: 1.55; }
.brief .gruss { margin: 1em 0 0; }
.eckdaten { display: grid; grid-template-columns: auto 1fr; gap: 12px 18px; margin: 26px 0 0; padding: 18px 0 0; border-top: 1px solid rgba(233, 196, 106, .35); }
.eckdaten div { display: contents; }
.eckdaten dt { padding-top: .32em; font-size: 12px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }
.eckdaten dd { margin: 0; font-size: 17px; line-height: 1.45; }
.karte { margin: 24px 0 0; }
.karte figcaption { margin-top: 7px; font-size: 12px; color: rgba(244, 228, 196, .74); }
.karte figcaption a { color: inherit; text-underline-offset: 2px; }
.karte-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 18px; padding: 0 22px; box-sizing: border-box; font-size: 16px; letter-spacing: .04em; color: var(--lack-tief); background: var(--gold); border-radius: 999px; text-decoration: none; transition: background .2s ease; }
.karte-link:hover { background: var(--gold-hell); }
.karte-link:focus-visible, .zu:focus-visible, .karte figcaption a:focus-visible { outline: 2px solid var(--gold-hell); outline-offset: 3px; }

/* Anfahrtsskizze (werkzeug/karte.py): Gold auf dunklem Lack, Masse in Einheiten der 1000 breiten Zeichnung */
.skizze { display: block; width: 100%; height: auto; background: #170609; border: 1px solid rgba(233, 196, 106, .45); }
.skizze .see { fill: #262a58; stroke: rgba(150, 160, 225, .5); stroke-width: 1.6; }
.skizze .fluss { fill: none; stroke: rgba(130, 150, 215, .6); stroke-width: 2.6; }
.skizze .weg { fill: none; stroke: rgba(244, 228, 196, .26); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.skizze .haupt { fill: none; stroke: rgba(244, 228, 196, .74); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.skizze .uhland { fill: none; stroke: var(--gold); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.skizze text { font-family: Kurale, Georgia, serif; fill: var(--papier); paint-order: stroke; stroke: #170609; stroke-linejoin: round; }
.skizze .strasse { font-size: 29px; stroke-width: 7px; fill: rgba(244, 228, 196, .86); }
.skizze .strasse.hell { fill: var(--gold-hell); }
.skizze .ort { font-family: "Ruslan Display", Georgia, serif; font-size: 44px; stroke-width: 8px; fill: var(--gold-hell); }
.skizze .see-name { font-size: 25px; stroke-width: 6px; fill: rgba(196, 204, 240, .9); }
.skizze .rand { font-size: 28px; stroke-width: 7px; }
.skizze .pfeil { fill: none; stroke: var(--gold); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.skizze .nord path { fill: var(--gold); stroke: none; }
.skizze .nord text { font-size: 26px; stroke-width: 5px; fill: var(--gold); }
.skizze .mass path { fill: none; stroke: var(--papier); stroke-width: 3; }
.skizze .mass text { font-size: 24px; stroke-width: 6px; }
.skizze .hof { fill: rgba(233, 196, 106, .16); stroke: none; }
.skizze .stern { fill: #c23a2c; stroke: var(--gold-hell); stroke-width: 2.6; stroke-linejoin: round; }
.skizze .ziel { font-family: "Ruslan Display", Georgia, serif; font-size: 40px; stroke-width: 8px; fill: var(--gold-hell); }
.skizze .ziel-zeile { font-size: 27px; stroke-width: 7px; }

@media (prefers-reduced-motion: reduce) {
  .infos[open] { animation: none; }
}

/* Am Steg: Titel und Knöpfe treten zurück, oben links geht es zurück, oben rechts stehen die Hüpfer */
body.am-steg .titel, body.am-steg .nochmal { opacity: 0 !important; pointer-events: none !important; transition: opacity .5s ease; }
.steg-ui { opacity: 0; transition: opacity .45s ease; }
.steg-ui.da { opacity: 1; }
.zurueck { position: fixed; z-index: 12; top: max(14px, env(safe-area-inset-top)); left: max(14px, env(safe-area-inset-left)); display: inline-flex; align-items: center; gap: 3px; height: 38px; box-sizing: border-box; padding: 0 17px 0 9px; font: inherit; font-size: 15px; letter-spacing: .08em; color: var(--gold-hell); background: rgba(40, 8, 14, .78); border: 1.5px solid var(--gold); border-radius: 999px; cursor: pointer; }
.zurueck::before { content: ""; position: absolute; inset: -7px; }
.zurueck svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.zurueck:hover { background: rgba(90, 16, 24, .9); }
.zurueck:focus-visible { outline: 2px solid var(--gold-hell); outline-offset: 3px; }
.steg-stand { position: fixed; z-index: 11; top: max(10px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); max-width: min(56vw, 340px); text-align: right; pointer-events: none; text-shadow: 0 0 12px rgba(8, 4, 24, .95), 0 1px 2px rgba(8, 4, 24, .9); }
.steg-stand p { margin: 0; }
.steg-zahl { font-family: "Ruslan Display", Georgia, serif; font-size: clamp(38px, 7.5vh, 64px); line-height: 1; color: var(--gold-hell); text-shadow: 0 2px 0 var(--gold-tief), 0 0 18px rgba(16, 6, 30, .9); transform-origin: right center; }
.steg-zahl:empty, .steg-zeile:empty, .steg-rekord:empty { display: none; }
.steg-zahl.hops { animation: hops .34s cubic-bezier(.22, 1, .36, 1); }
@keyframes hops { from { transform: scale(1.35); } to { transform: none; } }
.steg-zeile { margin-top: .3em !important; font-size: 15px; line-height: 1.35; color: var(--papier); text-wrap: balance; }
.steg-rekord { margin-top: .35em !important; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
@media (prefers-reduced-motion: reduce) { .steg-ui { transition: none; } .steg-zahl.hops { animation: none; } }

/* Bis zum ersten eigenen Wurf: Am Steinhaufen (--haufen-x, --haufen-y setzt szene.js) drückt eine Hand auf einen Stein,
   wischt schnell nach oben und lässt los, der Stein fliegt weiter. Daneben steht, wie es geht; hochkant darüber, quer
   links davon. Bewegt wird nur mit transform und opacity, das rechnet der Browser neben der Szene. */
.wurf-tipp { position: fixed; inset: 0; z-index: 10; pointer-events: none; opacity: 0; transition: opacity .4s ease; }
.wurf-tipp.da { opacity: 1; }
.wurf-geste { position: absolute; left: calc(var(--haufen-x, 50vw) - 60px); top: calc(var(--haufen-y, 86vh) - 160px); width: 80px; height: 170px; }
.wurf-bahn { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--gold-hell); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: .1 8; opacity: 0; animation: wurf-bahn 3.2s ease infinite; }
.wurf-stein { position: absolute; left: 51px; top: 140px; width: 18px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 36% 32%, #c9c3d2, #7a7386 55%, #4b4655); box-shadow: 0 2px 4px rgba(8, 4, 24, .7); opacity: 0; animation: wurf-stein 3.2s infinite; }
.wurf-hand { position: absolute; left: 40.5px; top: 157px; width: 40px; height: 52px; overflow: visible; fill: var(--papier); stroke: var(--lack-tief); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; transform-origin: 19.5px 3px; opacity: 0; animation: wurf-hand 3.2s infinite; }
.wurf-hand .schatten { fill: none; stroke: rgba(8, 4, 24, .55); stroke-width: 7; }
.wurf-hand .falte { fill: none; stroke-width: 1.2; }
@keyframes wurf-hand {
  0% { opacity: 0; transform: translate(6px, 16px); }
  12% { opacity: 1; transform: none; }
  24%, 32% { transform: scale(.88); animation-timing-function: cubic-bezier(.55, 0, .9, .5); }
  46% { transform: translate(-7px, -58px) scale(.88); }
  56% { opacity: 1; transform: translate(-28px, -126px) scale(.88); }
  62% { opacity: 1; transform: translate(-33px, -140px); }
  74%, 100% { opacity: 0; transform: translate(-35px, -144px); }
}
@keyframes wurf-stein {
  0%, 20% { opacity: 0; transform: translateY(5px) scale(.6); }
  26%, 32% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.55, 0, .9, .5); }
  46% { transform: translate(-7px, -58px); }
  56% { opacity: 1; transform: translate(-28px, -126px); animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  84% { opacity: 0; transform: translate(-64px, -250px) scale(.3); }
  100% { opacity: 0; transform: translate(-64px, -250px) scale(.3); }
}
@keyframes wurf-bahn { 0%, 34% { opacity: 0; } 54%, 68% { opacity: .85; } 84%, 100% { opacity: 0; } }
.wurf-text { position: absolute; left: 50%; bottom: calc(100% - var(--haufen-y, 86vh) + 186px); width: min(84vw, 330px); margin: 0; transform: translateX(-50%); text-align: center; font-size: 16px; line-height: 1.35; color: var(--papier); text-wrap: balance; text-shadow: 0 0 12px rgba(8, 4, 24, .95), 0 1px 2px rgba(8, 4, 24, .9); }
.wurf-text strong { display: block; margin-bottom: .2em; font-family: "Ruslan Display", Georgia, serif; font-weight: 400; font-size: 24px; line-height: 1.05; color: var(--gold-hell); text-shadow: 0 2px 0 var(--gold-tief), 0 0 16px rgba(16, 6, 30, .9); }
.wurf-flach { display: block; margin-top: .4em; font-size: 13px; color: var(--gold); }
@media (orientation: landscape) {
  .wurf-text { left: auto; right: calc(100% - var(--haufen-x, 50vw) + 84px); bottom: calc(100% - var(--haufen-y, 86vh) + 14px); width: min(38vw, 320px); transform: none; text-align: right; }
}
@media (prefers-reduced-motion: reduce) {
  .wurf-tipp { transition: none; }
  .wurf-hand, .wurf-stein, .wurf-bahn { animation: none; opacity: 1; }
  .wurf-hand { transform: translate(-16px, -82px) scale(.88); }
  .wurf-stein { transform: translate(-16px, -82px); }
}