/* Landingpage: bewegte Bildchen — Probe-Rad im Kopf, Deko, und die kleinen
   Szenen oben in den vier Werkzeug-Karten. Alles CSS/SVG, keine Bilddateien. */

/* ---------- Probe-Rad ---------- */
.held-buehne {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 20px;
  padding: 18px 0 6px;
}
.probe-rad {
  position: relative;
  width: min(82vw, 460px);
  aspect-ratio: 1;
}
.probe-scheibe {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 6px 8px rgba(80, 60, 160, .16)) drop-shadow(0 22px 40px rgba(80, 60, 160, .22));
}
.probe-scheibe .drehteil { transition: transform 4.2s cubic-bezier(.12, .62, .1, 1); }
.probe-scheibe text { font-family: var(--schrift-titel); font-weight: 600; }
.probe-zeiger {
  position: absolute;
  left: 50%;
  top: -5%;
  width: 12%;
  translate: -50% 0;
  filter: drop-shadow(0 4px 5px rgba(80, 60, 160, .35));
  z-index: 2;
}
/* Die Nabe ist der Knopf: weiß gewölbt wie beim großen Rad */
.probe-nabe {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #f4f0ff 75%);
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .7), 0 10px 26px rgba(80, 60, 160, .3);
  color: var(--akzent);
  font-family: var(--schrift-titel);
  font-weight: 650;
  font-size: clamp(1rem, 3.8vw, 1.35rem);
  line-height: 1.05;
  cursor: pointer;
  transition: scale .12s ease;
}
.probe-nabe:not(:disabled):hover { scale: 1.05; }
.probe-nabe:not(:disabled):active { scale: .95; }
.probe-nabe:focus-visible { outline: 4px solid var(--himmel); outline-offset: 4px; }
.probe-nabe:disabled { cursor: progress; }
/* Bis zum ersten Dreh atmet die Nabe: das Einzige, das von selbst lockt */
.probe-rad:not(.lief) .probe-nabe { animation: pochen 2s ease-in-out infinite; }
@keyframes pochen { 50% { scale: 1.05; } }

.probe-blase {
  position: relative;
  max-width: min(90vw, 400px);
  margin: 0;
  padding: 14px 20px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .7);
  -webkit-backdrop-filter: var(--glas-blur);
  backdrop-filter: var(--glas-blur);
  box-shadow: var(--schatten);
  font-weight: 550;
  text-align: center;
}
.probe-blase::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -8px;
  width: 16px;
  height: 16px;
  translate: -50% 0;
  rotate: 45deg;
  border-radius: 3px;
  background: rgba(255, 255, 255, .85);
}
.probe-blase strong { color: var(--akzent); font-family: var(--schrift-titel); font-weight: 700; font-size: 1.2em; }
.probe-blase a { color: var(--messing-tief); font-weight: 600; }
.probe-zeiger stop:nth-child(1) { stop-color: var(--zeiger-1); }
.probe-zeiger stop:nth-child(2) { stop-color: var(--zeiger-2); }
.probe-zeiger stop:nth-child(3) { stop-color: var(--zeiger-3); }
.probe-zeiger circle { fill: var(--zeiger-punkt); }
.probe-blase.neu { animation: aufploppen .4s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes aufploppen { from { scale: .7; opacity: 0; } }

/* Deko um das Probe-Rad: Münze und Karte deuten die anderen Werkzeuge an */
.deko { position: absolute; display: grid; place-items: center; pointer-events: none; }
.deko-muenze {
  left: 2%;
  top: 8%;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .8) 0 6%, transparent 35%),
    radial-gradient(circle, #ffd76a 0 62%, #d69a14 64% 66%, #ffe38f 68% 70%, #f2b62a 72% 88%, #c48808 100%);
  box-shadow: 0 10px 20px rgba(170, 120, 20, .3);
  color: #8a5a00;
  font-family: var(--schrift-titel);
  font-weight: 600;
  font-size: .95rem;
  animation: schweben 5s ease-in-out infinite;
}
.deko-karte {
  right: 3%;
  top: 46%;
  width: 56px;
  height: 78px;
  border-radius: 10px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .3), transparent 60%),
    var(--verlauf);
  box-shadow: inset 0 0 0 4px #fff, 0 12px 24px rgba(139, 92, 246, .35);
  color: #fff;
  font-family: var(--schrift-titel);
  font-weight: 600;
  font-size: 1.7rem;
  rotate: 14deg;
  animation: schweben 6s ease-in-out -2s infinite;
}
.deko-stern { display: none; }
/* Am Handy ist neben dem Rad kaum Rand: die Deko lugt kleiner HINTER dem Rad hervor,
   statt Felder zu verdecken. */
@media (max-width: 599px) {
  .probe-rad { z-index: 1; }
  .deko-muenze { left: 0; top: 4%; width: 52px; height: 52px; font-size: .75rem; }
  .deko-karte { right: 0; width: 42px; height: 58px; font-size: 1.3rem; }
}
@keyframes schweben { 50% { translate: 0 -12px; } }
@keyframes drehen-langsam { to { rotate: 360deg; } }

/* ---------- Szenen in den Werkzeug-Karten ---------- */
.szene {
  position: relative;
  display: grid;
  place-items: center;
  height: 196px;
  overflow: clip;
}
/* Alle vier Szenen auf zartem Glas: die Farbe gehört den Dingen darauf */
.szene { background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .8), rgba(255, 255, 255, .25) 75%); }

/* Rad */
.szene-rad-scheibe {
  width: 150px;
  height: 150px;
  animation: drehen-langsam 14s linear infinite;
  filter: drop-shadow(0 10px 16px rgba(80, 60, 160, .25));
}
.werkzeug-karte:hover .szene-rad-scheibe { animation-duration: 1.4s; }
.szene-rad-zeiger {
  position: absolute;
  top: 10px;
  left: 50%;
  width: 20px;
  height: 26px;
  translate: -50% 0;
  border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
  clip-path: polygon(0 0, 100% 0, 100% 45%, 50% 100%, 0 45%);
  background: var(--verlauf);
  filter: drop-shadow(0 2px 3px rgba(80, 60, 160, .3));
}

/* Münze: dreht sich um die Hochachse, beim Darüberfahren schneller und höher */
.szene-muenze { perspective: 600px; }
.mini-muenze {
  position: relative;
  width: 104px;
  height: 104px;
  transform-style: preserve-3d;
  animation: muenz-flip 3.6s cubic-bezier(.45, 0, .55, 1) infinite;
}
.werkzeug-karte:hover .mini-muenze { animation-duration: 1.1s; }
.mm-vorne, .mm-hinten {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .8) 0 6%, transparent 35%),
    radial-gradient(circle, #ffd76a 0 62%, #d69a14 64% 66%, #ffe38f 68% 70%, #f2b62a 72% 88%, #c48808 100%);
  color: #8a5a00;
  font-family: var(--schrift-titel);
  font-weight: 600;
  font-size: 1.35rem;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.mm-hinten {
  transform: rotateX(180deg);
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .9) 0 6%, transparent 35%),
    radial-gradient(circle, #e9ecf3 0 62%, #9aa0b2 64% 66%, #fff 68% 70%, #d3d7e2 72% 88%, #8b91a4 100%);
  color: #4a5068;
}
/* Erst liegen, dann fliegen: so zeigt auch ein Standbild meist eine flache Münze. */
@keyframes muenz-flip {
  0%, 40% { transform: translateY(16px) rotateX(0deg); }
  70% { transform: translateY(-34px) rotateX(540deg); }
  100% { transform: translateY(16px) rotateX(1080deg); }
}
.mini-schatten {
  position: absolute;
  bottom: 22px;
  width: 90px;
  height: 14px;
  border-radius: 50%;
  background: rgba(80, 60, 160, .25);
  filter: blur(5px);
  animation: schatten-atmen 3.6s cubic-bezier(.45, 0, .55, 1) infinite;
}
.werkzeug-karte:hover .mini-schatten { animation-duration: 1.1s; }
@keyframes schatten-atmen { 0%, 40%, 100% { scale: 1; } 70% { scale: .55; opacity: .5; } }

/* Flasche */
.mini-tisch {
  position: absolute;
  width: 168px;
  height: 168px;
  border-radius: 50%;
  background: radial-gradient(circle at 45% 40%, #7c5cf0, #3f2b96 78%);
  box-shadow: inset 0 0 0 8px rgba(255, 255, 255, .75), inset 0 0 24px 10px rgba(30, 10, 80, .3), 0 14px 28px rgba(80, 60, 160, .3);
}
.mini-flasche {
  position: relative;
  width: 36px;
  height: 108px;
  animation: flasche-dreh 5s cubic-bezier(.2, .7, .2, 1) infinite;
  filter: drop-shadow(0 6px 5px rgba(0, 0, 0, .35));
}
.werkzeug-karte:hover .mini-flasche { animation-duration: 2s; }
@keyframes flasche-dreh {
  0% { rotate: 0deg; }
  70%, 100% { rotate: 1200deg; }
}
.mini-name {
  position: absolute;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--flaeche);
  box-shadow: var(--schatten-klein);
  font-weight: 600;
  font-size: .8rem;
}
.mini-name.n1 { top: 6px; left: 50%; translate: -50% 0; background: var(--verlauf); color: #fff; }
.mini-name.n2 { bottom: 20px; right: calc(50% - 120px); }
.mini-name.n3 { bottom: 20px; left: calc(50% - 120px); }

/* Karten: Fächer, der beim Darüberfahren aufgeht */
.szene-karten { perspective: 800px; }
.mini-karte {
  position: absolute;
  display: grid;
  place-items: center;
  width: 86px;
  height: 120px;
  border-radius: 12px;
  transform-origin: 50% 120%;
  transition: rotate .3s ease, translate .3s ease;
  font-family: var(--schrift-titel);
  font-weight: 600;
  font-size: .82rem;
  line-height: 1.15;
  text-align: center;
  box-shadow: 0 8px 18px rgba(80, 60, 160, .2);
}
.mini-karte.k1, .mini-karte.k2 {
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .35), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .1) 0 6px, transparent 6px 12px),
    var(--verlauf);
  box-shadow: inset 0 0 0 5px #fff, 0 8px 18px rgba(80, 60, 160, .2);
}
.mini-karte.k1 { rotate: -16deg; }
.mini-karte.k2 { rotate: -5deg; }
.mini-karte.k3 {
  rotate: 9deg;
  background: linear-gradient(var(--akzent-2) 0 6px, #fff 6px calc(100% - 6px), var(--akzent) calc(100% - 6px));
  animation: karte-heben 3.6s ease-in-out infinite;
}
@keyframes karte-heben { 50% { translate: 6px -14px; } }
.werkzeug-karte:hover .mini-karte.k1 { rotate: -30deg; }
.werkzeug-karte:hover .mini-karte.k2 { rotate: -12deg; }
.werkzeug-karte:hover .mini-karte.k3 { rotate: 16deg; }

/* Würfel: zwei Sechser hüpfen und kippen, daneben ein W20 */
.mini-w {
  position: absolute;
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  place-items: center;
  width: 70px;
  height: 70px;
  padding: 10px;
  border-radius: 16px;
  background: radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .5), transparent 55%), linear-gradient(160deg, #a78bfa, #7c3aed);
  box-shadow: inset 0 -5px 8px rgba(0, 0, 0, .15), 0 10px 20px rgba(80, 60, 160, .3);
  animation: w-huepfen 2.8s cubic-bezier(.3, .7, .4, 1) infinite;
}
.mini-w i { width: 11px; height: 11px; border-radius: 50%; }
.mini-w i.a { background: #fff; box-shadow: inset 0 2px 2px rgba(0, 0, 0, .25); }
.mw1 { left: calc(50% - 96px); top: 62px; rotate: -10deg; }
.mw2 { left: calc(50% - 20px); top: 48px; rotate: 12deg; background: radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .5), transparent 55%), linear-gradient(160deg, #f472b6, #db2777); animation-delay: -.5s; }
.mini-w20 {
  position: absolute;
  left: calc(50% + 52px);
  top: 70px;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  background: radial-gradient(circle at 35% 25%, rgba(255, 255, 255, .45), transparent 55%), linear-gradient(160deg, #818cf8, #4f46e5);
  color: #fff;
  font-weight: 750;
  font-size: 1.15rem;
  animation: w-huepfen 2.8s cubic-bezier(.3, .7, .4, 1) -1s infinite;
}
@keyframes w-huepfen {
  0%, 55%, 100% { translate: 0 0; }
  70% { translate: 0 -22px; }
  85% { translate: 0 0; }
}
.werkzeug-karte:hover .mini-w, .werkzeug-karte:hover .mini-w20 { animation-duration: 1s; }

/* Teams: zwei Mini-Teamkarten, ein Name wandert von links nach rechts und zurück */
.mini-team {
  position: absolute;
  top: 46px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 6px;
  width: 104px;
  height: 104px;
  padding: 30px 10px 10px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .85);
  box-shadow: 0 10px 22px rgba(80, 60, 160, .18);
  overflow: visible;
}
.mini-team b { position: absolute; inset: 0 0 auto; height: 22px; border-radius: 18px 18px 0 0; }
.mini-team i { width: 36px; height: 14px; border-radius: 999px; }
.mt1 { left: calc(50% - 116px); rotate: -4deg; }
.mt1 b { background: linear-gradient(135deg, #8b5cf6, #c4b5fd); }
.mt1 i { background: #ede9fe; box-shadow: inset 0 0 0 1px #c4b5fd; }
.mt2 { left: calc(50% + 12px); rotate: 4deg; }
.mt2 b { background: linear-gradient(135deg, #ec4899, #f9a8d4); }
.mt2 i { background: #fce7f3; box-shadow: inset 0 0 0 1px #f9a8d4; }
.mt1 i.wandert { background: #fff; box-shadow: 0 4px 10px rgba(80, 60, 160, .3); animation: team-wechsel 3.2s cubic-bezier(.4, .7, .3, 1) infinite; }
@keyframes team-wechsel {
  0%, 30% { translate: 0 0; }
  45% { translate: 64px -40px; }
  60%, 80% { translate: 128px 4px; }
  100% { translate: 0 0; }
}
.werkzeug-karte:hover .mt1 i.wandert { animation-duration: 1.4s; }

/* Finger-Wahl: kleines dunkles Feld, vier leuchtende Punkte, einer wird gewählt */
.mini-feld {
  position: relative;
  width: 168px;
  height: 128px;
  border-radius: 22px;
  background: radial-gradient(ellipse at 50% 30%, #3b2f8f, #1c1650 90%);
  box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .6), 0 12px 26px rgba(80, 60, 160, .25);
}
.mini-feld i {
  position: absolute;
  width: 30px;
  height: 30px;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--f);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--f) 40%, transparent), 0 0 14px 3px var(--f);
  animation: mini-finger 3.2s ease-in-out infinite;
}
.mini-feld .f1 { --f: #8b5cf6; left: 30%; top: 32%; }
.mini-feld .f2 { --f: #ec4899; left: 72%; top: 30%; animation-name: mini-gewinner; }
.mini-feld .f3 { --f: #22d3ee; left: 36%; top: 72%; }
.mini-feld .f4 { --f: #f59e0b; left: 74%; top: 70%; }
@keyframes mini-finger { 0%, 45% { opacity: 1; scale: 1; } 60%, 90% { opacity: .25; scale: .7; } 100% { opacity: 1; scale: 1; } }
@keyframes mini-gewinner { 0%, 45% { scale: 1; } 60%, 90% { scale: 1.45; } 100% { scale: 1; } }
.werkzeug-karte:hover .mini-feld i { animation-duration: 1.6s; }

/* Frag ZOK: kleine Glaskugel mit Nebel, die Antwort glimmt auf */
.mini-kugel {
  position: relative;
  display: grid;
  place-items: center;
  width: 124px;
  height: 124px;
  margin-top: -14px;
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(circle at 34% 22%, rgba(255, 255, 255, .55), transparent 28%),
    radial-gradient(circle at 30% 60%, rgba(236, 72, 153, .6), transparent 45%),
    radial-gradient(circle at 70% 45%, rgba(34, 211, 238, .5), transparent 45%),
    radial-gradient(circle at 50% 55%, #1a1446 0 40%, #2c2178 64%, #5b3fc4 88%, #a78bfa);
  box-shadow: 0 16px 34px rgba(60, 40, 160, .35), 0 0 30px 4px rgba(52, 211, 153, .3);
  animation: mini-kugel 4s ease-in-out infinite;
}
.mini-kugel b {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(10, 6, 34, .8);
  color: #fff;
  font-family: var(--schrift-titel);
  font-size: 1.15rem;
  text-shadow: 0 0 10px #34d399;
  animation: mini-antwort 4s ease-in-out infinite;
}
.mini-sockel { position: absolute; left: calc(50% - 40px); top: 152px; width: 80px; height: 20px; border-radius: 50% 50% 20% 20%; background: linear-gradient(180deg, #4b3aa8, #1c1650); }
@keyframes mini-kugel { 0%, 100% { rotate: 0deg; } 8% { rotate: -6deg; } 14% { rotate: 6deg; } 20% { rotate: 0deg; } }
@keyframes mini-antwort { 0%, 22% { opacity: 0; scale: .6; } 35%, 90% { opacity: 1; scale: 1; } 100% { opacity: 0; } }
.werkzeug-karte:hover .mini-kugel, .werkzeug-karte:hover .mini-kugel b { animation-duration: 2s; }

/* Lostrommel: achteckige Glastrommel dreht, eine Kugel fällt heraus */
.mini-trommel {
  position: relative;
  width: 118px;
  height: 118px;
  margin: -26px 0 0 -40px;
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
  background: var(--verlauf);
  animation: drehen-langsam 7s linear infinite;
}
.mini-trommel::before {
  content: "";
  position: absolute;
  inset: 7px;
  clip-path: inherit;
  background: radial-gradient(circle at 35% 30%, #fff, #ede9fe);
}
.mini-trommel i { position: absolute; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset -3px -4px 0 rgba(0, 0, 0, .18); }
.mini-trommel .b1 { left: 28px; top: 62px; background: #8b5cf6; }
.mini-trommel .b2 { left: 52px; top: 70px; background: #f59e0b; }
.mini-trommel .b3 { left: 70px; top: 50px; background: #10b981; }
.mini-trommel .b4 { left: 40px; top: 36px; background: #ec4899; }
.mini-los-kugel {
  position: absolute;
  left: calc(50% + 34px);
  top: 104px;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fff 0 8%, #0ea5b7 34%, #0b5f73);
  box-shadow: 0 10px 20px rgba(14, 165, 183, .35);
  animation: mini-los 3.6s ease-in infinite;
}
.mini-los-kugel b {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  color: var(--tusche);
  font-family: var(--schrift-titel);
  font-size: .95rem;
}
@keyframes mini-los { 0%, 30% { translate: -40px -50px; scale: .4; opacity: 0; } 50%, 92% { translate: 0 0; scale: 1; opacity: 1; } 100% { opacity: 0; } }
.werkzeug-karte:hover .mini-trommel { animation-duration: 1.4s; }

/* Reihenfolge: drei Namen tauschen ihre Plätze, die Nummern bleiben stehen */
.mini-reihe { position: relative; width: 170px; height: 132px; }
.mini-reihe b, .mini-reihe i {
  position: absolute;
  display: grid;
  place-items: center;
  height: 34px;
  border-radius: 999px;
  font-style: normal;
  font-weight: 700;
}
.mini-reihe b { left: 0; width: 34px; color: #fff; }
.mini-reihe b:nth-of-type(1) { top: 4px; background: linear-gradient(135deg, #fde68a, #f59e0b); color: #78350f; }
.mini-reihe b:nth-of-type(2) { top: 49px; background: linear-gradient(135deg, #f1f5f9, #94a3b8); color: #1e293b; }
.mini-reihe b:nth-of-type(3) { top: 94px; background: linear-gradient(135deg, #fed7aa, #c2703d); }
.mini-reihe i { left: 44px; width: 120px; background: #fff; color: var(--tusche); box-shadow: 0 6px 16px rgba(80, 60, 160, .16); }
.mini-reihe .n1 { animation: mini-reihe-1 7s ease-in-out infinite; }
.mini-reihe .n2 { animation: mini-reihe-2 7s ease-in-out infinite; }
.mini-reihe .n3 { animation: mini-reihe-3 7s ease-in-out infinite; }
@keyframes mini-reihe-1 { 0%, 26% { top: 4px; } 33%, 59% { top: 94px; } 66%, 92% { top: 49px; } 100% { top: 4px; } }
@keyframes mini-reihe-2 { 0%, 26% { top: 49px; } 33%, 59% { top: 4px; } 66%, 92% { top: 94px; } 100% { top: 49px; } }
@keyframes mini-reihe-3 { 0%, 26% { top: 94px; } 33%, 59% { top: 49px; } 66%, 92% { top: 4px; } 100% { top: 94px; } }
.werkzeug-karte:hover .mini-reihe i { animation-duration: 2.4s; }

/* Schere, Stein, Papier: beide hüpfen dreimal, dann leuchtet der Stein */
.szene-ssp { grid-auto-flow: column; gap: 10px; place-content: center; }
.mini-ssp {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #fff, rgba(255, 255, 255, .6) 70%);
  box-shadow: inset 0 0 0 3px rgba(139, 92, 246, .4), 0 10px 22px rgba(80, 60, 160, .16);
  animation: mini-ssp 3.6s ease-in-out infinite;
}
.mini-ssp.zok { box-shadow: inset 0 0 0 3px rgba(236, 72, 153, .4), 0 10px 22px rgba(80, 60, 160, .16); animation-name: mini-ssp-zok; }
.mini-ssp svg { width: 66%; height: 66%; }
.mini-vs { font-weight: 750; color: var(--tusche-weich); }
@keyframes mini-ssp { 0%, 30% { translate: 0 0; } 6%, 16%, 26% { translate: 0 -14px; } 11%, 21% { translate: 0 0; } 40%, 90% { box-shadow: inset 0 0 0 4px #f59e0b, 0 0 0 8px rgba(245, 158, 11, .2); } }
@keyframes mini-ssp-zok { 0%, 30% { translate: 0 0; } 6%, 16%, 26% { translate: 0 -14px; } 11%, 21% { translate: 0 0; } 40%, 90% { opacity: .55; } }
.werkzeug-karte:hover .mini-ssp { animation-duration: 1.8s; }

/* Pro & Contra: der Balken kippt hin und her, die Schalen gehen mit, bleiben aber waagrecht */
.mini-waage { position: relative; width: 200px; height: 150px; }
.mini-waage i { position: absolute; font-style: normal; }
.mini-waage .saeule { left: 96px; top: 30px; width: 8px; height: 104px; border-radius: 4px; background: #7c6f9e; }
.mini-waage .saeule::after { content: ""; position: absolute; left: -26px; bottom: -6px; width: 60px; height: 12px; border-radius: 6px 6px 3px 3px; background: #c4b5fd; }
.mini-waage .balken { left: 18px; top: 28px; width: 164px; height: 8px; border-radius: 4px; background: var(--verlauf); z-index: 1; animation: mini-balken 5s ease-in-out infinite; }
.mini-waage .schale {
  top: 62px;
  display: grid;
  place-items: center;
  width: 62px;
  height: 26px;
  border-radius: 4px 4px 30px 30px;
  font-weight: 700;
  font-size: .78rem;
  animation: mini-schale-l 5s ease-in-out infinite;
}
.mini-waage .schale::before { content: ""; position: absolute; bottom: 100%; left: calc(50% - 1px); width: 2px; height: 30px; background: #b4aad6; }
.mini-waage .links { left: -8px; background: #a7f3d0; color: #065f46; }
.mini-waage .rechts { right: -8px; background: #fbcfe8; color: #9d174d; animation-name: mini-schale-r; }
@keyframes mini-balken { 0%, 100% { rotate: -11deg; } 50% { rotate: 7deg; } }
/* Balken links hoch (−11°) ⇒ linke Schale hoch */
@keyframes mini-schale-l { 0%, 100% { translate: 0 -16px; } 50% { translate: 0 10px; } }
@keyframes mini-schale-r { 0%, 100% { translate: 0 16px; } 50% { translate: 0 -10px; } }
.werkzeug-karte:hover .mini-waage i { animation-duration: 2s; }

/* Turnierplan: vier Namen, zwei kommen weiter, einer gewinnt (der Reihe nach eingeblendet) */
.mini-baum { position: relative; width: 210px; height: 150px; }
.mini-baum i, .mini-baum b {
  position: absolute;
  display: grid;
  place-items: center;
  width: 62px;
  height: 26px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(80, 60, 160, .14);
  font-style: normal;
  font-weight: 650;
  font-size: .78rem;
}
.mini-baum .s1 { left: 0; top: 4px; } .mini-baum .s2 { left: 0; top: 36px; }
.mini-baum .s3 { left: 0; top: 88px; } .mini-baum .s4 { left: 0; top: 120px; }
.mini-baum .f1 { left: 74px; top: 20px; } .mini-baum .f2 { left: 74px; top: 104px; }
.mini-baum b { left: 148px; top: 62px; background: linear-gradient(135deg, #fde68a, #f59e0b); color: #78350f; }
.mini-baum .f1, .mini-baum .f2 { color: #5b21b6; background: #ede9fe; animation: mini-weiter 6s ease-out infinite; }
.mini-baum b { animation: mini-sieger 6s ease-out infinite; }
.mini-baum .s1, .mini-baum .s4 { animation: mini-raus 6s ease-out infinite; }
@keyframes mini-weiter { 0%, 18% { opacity: 0; translate: -12px 0; } 28%, 92% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }
@keyframes mini-sieger { 0%, 45% { opacity: 0; scale: .6; } 55%, 92% { opacity: 1; scale: 1; } 100% { opacity: 0; } }
@keyframes mini-raus { 0%, 18% { opacity: 1; } 28%, 92% { opacity: .4; } 100% { opacity: 1; } }
.werkzeug-karte:hover .mini-baum * { animation-duration: 2.6s; }

/* Wichteln (A.15.0.0): drei Geschenke hüpfen, ein Zettel „Anna → ?“ dreht sich um zu „Ben“ */
.mini-wichteln { position: relative; width: 210px; height: 150px; }
.mini-wichteln i {
  position: absolute;
  bottom: 6px;
  width: 54px;
  height: 46px;
  border-radius: 8px;
  background:
    linear-gradient(90deg, transparent 22px, #fbbf24 22px 32px, transparent 32px),
    linear-gradient(transparent 14px, #fbbf24 14px 22px, transparent 22px),
    linear-gradient(135deg, #ef4444, #be123c);
  box-shadow: 0 8px 18px rgba(190, 18, 60, .28);
  animation: mini-huepf 2.4s ease-in-out infinite;
}
/* Schleife: zwei Schlaufen, die sich in der Mitte treffen */
.mini-wichteln i::before, .mini-wichteln i::after {
  content: "";
  position: absolute;
  left: calc(50% - 14px);
  top: -11px;
  width: 14px;
  height: 11px;
  border: 4px solid #fbbf24;
  border-radius: 60% 40% 10% 60%;
  rotate: 18deg;
  transform-origin: 100% 100%;
}
.mini-wichteln i::after { left: 50%; border-radius: 40% 60% 60% 10%; rotate: -18deg; transform-origin: 0 100%; }
.mini-wichteln .g1 { left: 6px; }
.mini-wichteln .g2 { left: 78px; width: 58px; height: 58px; background-color: #8b5cf6; animation-delay: .3s;
  background: linear-gradient(90deg, transparent 24px, #fde68a 24px 34px, transparent 34px), linear-gradient(transparent 20px, #fde68a 20px 28px, transparent 28px), linear-gradient(135deg, #8b5cf6, #6d28d9); }
.mini-wichteln .g3 { left: 152px; animation-delay: .6s;
  background: linear-gradient(90deg, transparent 22px, #fde68a 22px 32px, transparent 32px), linear-gradient(transparent 14px, #fde68a 14px 22px, transparent 22px), linear-gradient(135deg, #10b981, #047857); }
.mini-wichteln b {
  position: absolute;
  left: 50%;
  top: 8px;
  translate: -50% 0;
  padding: 6px 14px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(80, 60, 160, .16);
  font-size: .9rem;
  font-weight: 700;
  white-space: nowrap;
  backface-visibility: hidden;
  animation: mini-zettel-vorn 6s ease-in-out infinite;
}
.mini-wichteln .z2 { background: linear-gradient(135deg, #ef4444, #be123c); color: #fff; animation-name: mini-zettel-hinten; }
@keyframes mini-huepf { 0%, 100% { translate: 0 0; } 40% { translate: 0 -10px; } 55% { translate: 0 0; } }
@keyframes mini-zettel-vorn { 0%, 40% { rotate: y 0deg; } 50%, 90% { rotate: y 180deg; } 100% { rotate: y 360deg; } }
@keyframes mini-zettel-hinten { 0%, 40% { rotate: y -180deg; } 50%, 90% { rotate: y 0deg; } 100% { rotate: y 180deg; } }
.werkzeug-karte:hover .mini-wichteln * { animation-duration: 1.4s; }
.werkzeug-karte:hover .mini-wichteln b { animation-duration: 3s; }

@media (min-width: 900px) {
  .held-buehne { padding-top: 30px; }
  .deko-muenze { left: -2%; width: 84px; height: 84px; }
}
@media (prefers-reduced-motion: reduce) {
  .szene *, .deko { animation: none !important; }
}