/* Ausschließlich die Hauptfiguren-Seite. Originalbilder und Texte bleiben erhalten. */
html { scroll-behavior: auto; }
body {
  color: #49271f;
  background: #eee4cf url("hauptfiguren-garten.png") center top / cover no-repeat fixed;
  padding-bottom: 28px;
}
.characters-page {
  position: relative;
  z-index: 1;
  width: min(1120px, calc(100% - 80px));
  padding-top: 56px;
  padding-bottom: 0;
  min-height: 0;
}
.characters-butterflies {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow: hidden;
  pointer-events: none;
}
.characters-page > :not(.characters-butterflies) { position: relative; z-index: 1; }
.characters-butterfly {
  position: absolute;
  width: var(--butterfly-size);
  aspect-ratio: 1.05;
  pointer-events: none;
  background: url("Bilder/hauptfiguren-schmetterling-rechts.png") center / contain no-repeat;
  filter: hue-rotate(var(--butterfly-hue)) saturate(1.12) drop-shadow(0 0 4px #fff6c6aa) drop-shadow(0 0 9px #e8bb62a0);
  animation: var(--butterfly-flight) var(--butterfly-duration) var(--butterfly-delay) ease-in-out infinite;
  transform-style: preserve-3d;
  will-change: transform;
}
.characters-butterfly::before,
.characters-butterfly::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("Bilder/hauptfiguren-schmetterling-rechts.png") center / contain no-repeat;
  pointer-events: none;
}
.characters-butterfly::before {
  clip-path: polygon(0 18%, 56% 25%, 58% 72%, 0 91%);
  transform-origin: 56% 53%;
  animation: butterfly-left-wing var(--wing-duration) var(--wing-delay) ease-in-out infinite alternate;
}
.characters-butterfly::after {
  clip-path: polygon(46% 20%, 100% 8%, 100% 90%, 46% 73%);
  transform-origin: 47% 53%;
  animation: butterfly-right-wing var(--wing-duration) var(--wing-delay) ease-in-out infinite alternate;
}
.characters-butterfly-sparkles {
  position: absolute;
  z-index: 2;
  inset: -20px;
  pointer-events: none;
  background:
    radial-gradient(circle at 13% 68%, #fff 0 1px, #fff8bd 1.1px 1.8px, transparent 3px),
    radial-gradient(circle at 28% 84%, #fff 0 .9px, #ffd75b 1px 1.8px, transparent 2.8px),
    radial-gradient(circle at 46% 73%, #fff 0 .9px, #fff4bd 1px 1.6px, transparent 2.7px),
    radial-gradient(circle at 63% 91%, #fff 0 1px, #ffca47 1.1px 1.9px, transparent 3px),
    radial-gradient(circle at 78% 61%, #fff 0 .9px, #fff9d7 1px 1.7px, transparent 2.8px),
    radial-gradient(circle at 91% 78%, #fff 0 .9px, #f8bd38 1px 1.8px, transparent 2.9px),
    linear-gradient(45deg, transparent 48%, #fffbe0 49% 51%, transparent 52%) 14% 67% / 7px 7px no-repeat,
    linear-gradient(-45deg, transparent 48%, #fffbe0 49% 51%, transparent 52%) 14% 67% / 7px 7px no-repeat,
    linear-gradient(45deg, transparent 48%, #fff8c2 49% 51%, transparent 52%) 63% 90% / 8px 8px no-repeat,
    linear-gradient(-45deg, transparent 48%, #fff8c2 49% 51%, transparent 52%) 63% 90% / 8px 8px no-repeat;
  filter: drop-shadow(0 0 3px #fffdea) drop-shadow(0 0 7px #ffd96ba8) drop-shadow(0 0 12px #e9b33f6b);
  animation: butterfly-sparkle 1.85s var(--butterfly-delay) ease-out infinite;
}
.characters-butterfly-sparkles::before,
.characters-butterfly-sparkles::after {
  content: "";
  position: absolute;
  inset: -12px;
  pointer-events: none;
  background:
    radial-gradient(circle at 19% 72%, #fff 0 1.1px, #ffe794 1.2px 2px, transparent 3.2px),
    radial-gradient(circle at 39% 82%, #fffdf3 0 1px, #ffd35a 1.1px 1.9px, transparent 3px),
    radial-gradient(circle at 69% 68%, #fff 0 1.2px, #fff3b9 1.3px 2.1px, transparent 3.3px),
    radial-gradient(circle at 87% 88%, #fff 0 .9px, #ffc845 1px 1.7px, transparent 2.8px),
    linear-gradient(45deg, transparent 47%, #fffef2 48% 52%, transparent 53%) 20% 72% / 10px 10px no-repeat,
    linear-gradient(-45deg, transparent 47%, #fffef2 48% 52%, transparent 53%) 20% 72% / 10px 10px no-repeat,
    linear-gradient(45deg, transparent 47%, #fff8c9 48% 52%, transparent 53%) 70% 68% / 8px 8px no-repeat,
    linear-gradient(-45deg, transparent 47%, #fff8c9 48% 52%, transparent 53%) 70% 68% / 8px 8px no-repeat;
  filter: drop-shadow(0 0 3px #fffef2) drop-shadow(0 0 8px #ffe183);
  animation: butterfly-diamond-flash .92s var(--wing-delay) ease-in-out infinite;
}
.characters-butterfly-sparkles::after {
  inset: -18px;
  opacity: .8;
  transform-origin: 38% 68%;
  animation-delay: calc(var(--wing-delay) - .38s);
}
.butterfly-one { --butterfly-size: 38px; --butterfly-hue: 8deg; --butterfly-flight: butterfly-left-hover; --butterfly-duration: 48s; --butterfly-delay: -3s; --wing-duration: 1.08s; --wing-delay: -.2s; top: 72%; left: -60px; }
.butterfly-two { --butterfly-size: 52px; --butterfly-hue: 58deg; --butterfly-flight: butterfly-right-hover; --butterfly-duration: 56s; --butterfly-delay: -10s; --wing-duration: 1.34s; --wing-delay: -.6s; top: 13%; right: -70px; }
.butterfly-three { --butterfly-size: 32px; --butterfly-hue: 285deg; --butterfly-flight: butterfly-left-loop; --butterfly-duration: 44s; --butterfly-delay: -7s; --wing-duration: .92s; --wing-delay: -.4s; top: 54%; left: -50px; }
.butterfly-four { --butterfly-size: 45px; --butterfly-hue: 135deg; --butterfly-flight: butterfly-right-loop; --butterfly-duration: 52s; --butterfly-delay: -13s; --wing-duration: 1.2s; --wing-delay: -.8s; top: 67%; right: -65px; }
.butterfly-five { --butterfly-size: 36px; --butterfly-hue: 325deg; --butterfly-flight: butterfly-left-sweep; --butterfly-duration: 50s; --butterfly-delay: -5s; --wing-duration: 1.02s; --wing-delay: -.5s; top: 35%; left: -50px; }
.butterfly-six { --butterfly-size: 48px; --butterfly-hue: 210deg; --butterfly-flight: butterfly-west-dip; --butterfly-duration: 30s; --butterfly-delay: -16s; --wing-duration: 1.27s; --wing-delay: -.1s; top: 82%; right: -86px; }
.butterfly-seven { --butterfly-size: 42px; --butterfly-hue: 172deg; --butterfly-flight: butterfly-east-dip; --butterfly-duration: 29s; --butterfly-delay: -9s; --wing-duration: 1.16s; --wing-delay: -.7s; top: 29%; left: -80px; }
.butterfly-eight { --butterfly-size: 34px; --butterfly-hue: 305deg; --butterfly-flight: butterfly-west-arc; --butterfly-duration: 23s; --butterfly-delay: -12s; --wing-duration: .96s; --wing-delay: -.3s; top: 67%; right: -72px; }
.butterfly-nine { --butterfly-size: 56px; --butterfly-hue: 92deg; --butterfly-flight: butterfly-east-rise; --butterfly-duration: 32s; --butterfly-delay: -19s; --wing-duration: 1.42s; --wing-delay: -.9s; top: 88%; left: -94px; }
.butterfly-ten { --butterfly-size: 29px; --butterfly-hue: 245deg; --butterfly-flight: butterfly-west-rise; --butterfly-duration: 20s; --butterfly-delay: -15s; --wing-duration: .86s; --wing-delay: -.2s; top: 38%; right: -68px; }
.butterfly-eleven { --butterfly-size: 44px; --butterfly-hue: 334deg; --butterfly-flight: butterfly-east-arc; --butterfly-duration: 26s; --butterfly-delay: -21s; --wing-duration: 1.23s; --wing-delay: -.6s; top: 61%; left: -84px; }
.butterfly-twelve { --butterfly-size: 40px; --butterfly-hue: 190deg; --butterfly-flight: butterfly-west-dip; --butterfly-duration: 31s; --butterfly-delay: -24s; --wing-duration: 1.11s; --wing-delay: -.4s; top: 5%; right: -80px; }
.butterfly-thirteen { --butterfly-size: 35px; --butterfly-hue: 40deg; --butterfly-flight: butterfly-east-dip; --butterfly-duration: 22s; --butterfly-delay: -17s; --wing-duration: 1s; --wing-delay: -.8s; top: 51%; left: -73px; }
.butterfly-fourteen { --butterfly-size: 50px; --butterfly-hue: 275deg; --butterfly-flight: butterfly-west-arc; --butterfly-duration: 33s; --butterfly-delay: -28s; --wing-duration: 1.36s; --wing-delay: -.5s; top: 76%; right: -89px; }
@keyframes butterfly-east-arc {
  0% { transform: translate(0, 0) rotate(-15deg) scale(.9); opacity: 0; }
  8% { opacity: .94; }
  24% { transform: translate(28vw, -42px) rotate(13deg) scale(1); }
  39% { transform: translate(23vw, -10px) rotate(-9deg) scale(.95); }
  55% { transform: translate(56vw, 20px) rotate(16deg) scale(1); }
  72% { transform: translate(51vw, -25px) rotate(-12deg) scale(.94); }
  84% { transform: translate(83vw, -31px) rotate(15deg) scale(1); }
  92% { opacity: .94; }
  100% { transform: translate(calc(100vw + 150px), 12px) rotate(-12deg) scale(.9); opacity: 0; }
}
@keyframes butterfly-west-arc {
  0% { transform: translate(0, 0) rotate(15deg) scale(.9); opacity: 0; }
  8% { opacity: .94; }
  23% { transform: translate(-27vw, 35px) rotate(-14deg) scale(1); }
  40% { transform: translate(-21vw, 4px) rotate(10deg) scale(.95); }
  57% { transform: translate(-57vw, -20px) rotate(-16deg) scale(1); }
  73% { transform: translate(-51vw, 19px) rotate(12deg) scale(.94); }
  85% { transform: translate(-83vw, 28px) rotate(-15deg) scale(1); }
  92% { opacity: .94; }
  100% { transform: translate(calc(-100vw - 150px), -14px) rotate(13deg) scale(.9); opacity: 0; }
}
@keyframes butterfly-east-dip {
  0% { transform: translate(0, 0) rotate(-11deg) scale(.92); opacity: 0; }
  8% { opacity: .9; }
  23% { transform: translate(24vw, 31px) rotate(16deg) scale(1); }
  37% { transform: translate(18vw, 9px) rotate(-11deg) scale(.95); }
  53% { transform: translate(49vw, -19px) rotate(14deg) scale(1); }
  70% { transform: translate(43vw, 25px) rotate(-13deg) scale(.95); }
  84% { transform: translate(76vw, 39px) rotate(12deg) scale(1); }
  92% { opacity: .9; }
  100% { transform: translate(calc(100vw + 150px), -6px) rotate(-14deg) scale(.92); opacity: 0; }
}
@keyframes butterfly-west-rise {
  0% { transform: translate(0, 0) rotate(12deg) scale(.92); opacity: 0; }
  8% { opacity: .92; }
  23% { transform: translate(-25vw, -35px) rotate(-15deg) scale(1); }
  38% { transform: translate(-19vw, -6px) rotate(11deg) scale(.95); }
  55% { transform: translate(-52vw, 12px) rotate(-14deg) scale(1); }
  71% { transform: translate(-45vw, -29px) rotate(10deg) scale(.95); }
  85% { transform: translate(-79vw, -42px) rotate(-13deg) scale(1); }
  92% { opacity: .92; }
  100% { transform: translate(calc(-100vw - 150px), 4px) rotate(15deg) scale(.92); opacity: 0; }
}
@keyframes butterfly-east-rise {
  0% { transform: translate(0, 0) rotate(-13deg) scale(.9); opacity: 0; }
  8% { opacity: .9; }
  23% { transform: translate(25vw, -28px) rotate(14deg) scale(1); }
  39% { transform: translate(19vw, -48px) rotate(-10deg) scale(.95); }
  55% { transform: translate(53vw, -54px) rotate(15deg) scale(1); }
  72% { transform: translate(47vw, -16px) rotate(-11deg) scale(.95); }
  85% { transform: translate(80vw, -18px) rotate(14deg) scale(1); }
  92% { opacity: .9; }
  100% { transform: translate(calc(100vw + 150px), -47px) rotate(-12deg) scale(.9); opacity: 0; }
}
@keyframes butterfly-west-dip {
  0% { transform: translate(0, 0) rotate(13deg) scale(.9); opacity: 0; }
  8% { opacity: .9; }
  22% { transform: translate(-23vw, 39px) rotate(-14deg) scale(1); }
  38% { transform: translate(-17vw, 12px) rotate(10deg) scale(.95); }
  54% { transform: translate(-51vw, 16px) rotate(-15deg) scale(1); }
  71% { transform: translate(-44vw, 47px) rotate(12deg) scale(.95); }
  85% { transform: translate(-80vw, 47px) rotate(-14deg) scale(1); }
  92% { opacity: .9; }
  100% { transform: translate(calc(-100vw - 150px), 23px) rotate(13deg) scale(.9); opacity: 0; }
}
@keyframes butterfly-left-hover {
  0% { transform: translate(-110px, 12px) rotate(-13deg) scale(.96); opacity: 0; }
  8% { transform: translate(6vw, -18px) rotate(14deg) scale(1); opacity: .96; }
  24% { transform: translate(29vw, -58px) rotate(-9deg) scale(.97); }
  35% { transform: translate(26vw, -32px) rotate(12deg) scale(1); }
  50% { transform: translate(52vw, -73px) rotate(-12deg) scale(.96); }
  63% { transform: translate(48vw, -43px) rotate(10deg) scale(1); }
  79% { transform: translate(77vw, -84px) rotate(-14deg) scale(.97); }
  91% { transform: translate(91vw, -52px) rotate(12deg) scale(.99); opacity: .96; }
  100% { transform: translate(calc(100vw + 130px), -71px) rotate(-13deg) scale(.96); opacity: 0; }
}
@keyframes butterfly-right-hover {
  0% { transform: translate(122px, -10px) rotate(13deg) scale(.96); opacity: 0; }
  8% { transform: translate(-5vw, 24px) rotate(-15deg) scale(1); opacity: .96; }
  22% { transform: translate(-27vw, 70px) rotate(9deg) scale(.97); }
  37% { transform: translate(-24vw, 41px) rotate(-13deg) scale(1); }
  53% { transform: translate(-51vw, 84px) rotate(14deg) scale(.96); }
  66% { transform: translate(-47vw, 53px) rotate(-9deg) scale(1); }
  81% { transform: translate(-74vw, 98px) rotate(13deg) scale(.97); }
  91% { transform: translate(-90vw, 65px) rotate(-12deg) scale(.99); opacity: .96; }
  100% { transform: translate(calc(-100vw - 140px), 90px) rotate(13deg) scale(.96); opacity: 0; }
}
@keyframes butterfly-left-loop {
  0% { transform: translate(-96px, -7px) rotate(-10deg) scale(.97); opacity: 0; }
  8% { transform: translate(5vw, 19px) rotate(15deg) scale(1); opacity: .95; }
  21% { transform: translate(24vw, -5px) rotate(-14deg) scale(.96); }
  34% { transform: translate(20vw, -33px) rotate(11deg) scale(1); }
  49% { transform: translate(45vw, 4px) rotate(-12deg) scale(.97); }
  61% { transform: translate(41vw, -29px) rotate(14deg) scale(1); }
  78% { transform: translate(69vw, -54px) rotate(-13deg) scale(.96); }
  91% { transform: translate(89vw, -21px) rotate(10deg) scale(.99); opacity: .95; }
  100% { transform: translate(calc(100vw + 120px), -40px) rotate(-10deg) scale(.97); opacity: 0; }
}
@keyframes butterfly-right-loop {
  0% { transform: translate(104px, 6px) rotate(10deg) scale(.97); opacity: 0; }
  8% { transform: translate(-6vw, -19px) rotate(-15deg) scale(1); opacity: .95; }
  21% { transform: translate(-25vw, 8px) rotate(14deg) scale(.96); }
  35% { transform: translate(-21vw, 37px) rotate(-11deg) scale(1); }
  50% { transform: translate(-49vw, 11px) rotate(12deg) scale(.97); }
  63% { transform: translate(-45vw, 43px) rotate(-14deg) scale(1); }
  79% { transform: translate(-73vw, 18px) rotate(13deg) scale(.96); }
  91% { transform: translate(-91vw, 49px) rotate(-10deg) scale(.99); opacity: .95; }
  100% { transform: translate(calc(-100vw - 130px), 25px) rotate(10deg) scale(.97); opacity: 0; }
}
@keyframes butterfly-left-sweep {
  0% { transform: translate(-100px, 10px) rotate(-12deg) scale(.96); opacity: 0; }
  8% { transform: translate(7vw, -16px) rotate(14deg) scale(1); opacity: .96; }
  23% { transform: translate(28vw, -43px) rotate(-9deg) scale(.97); }
  36% { transform: translate(24vw, -12px) rotate(12deg) scale(1); }
  52% { transform: translate(50vw, -52px) rotate(-13deg) scale(.96); }
  66% { transform: translate(46vw, -20px) rotate(10deg) scale(1); }
  81% { transform: translate(76vw, -63px) rotate(-14deg) scale(.97); }
  92% { transform: translate(91vw, -33px) rotate(12deg) scale(.99); opacity: .96; }
  100% { transform: translate(calc(100vw + 125px), -49px) rotate(-12deg) scale(.96); opacity: 0; }
}
@keyframes butterfly-left-wing {
  from { transform: perspective(90px) rotateY(-5deg) rotate(-7deg) scaleY(.94); }
  to { transform: perspective(90px) rotateY(58deg) rotate(11deg) scaleY(1.02); }
}
@keyframes butterfly-right-wing {
  from { transform: perspective(90px) rotateY(5deg) rotate(7deg) scaleY(.94); }
  to { transform: perspective(90px) rotateY(-58deg) rotate(-11deg) scaleY(1.02); }
}
@keyframes butterfly-sparkle {
  0% { opacity: 0; transform: translate(9px, 5px) scale(.4); }
  18% { opacity: .95; transform: translate(5px, 2px) scale(.8); }
  31% { opacity: 1; transform: translate(2px, 0) scale(1.15); }
  45% { opacity: .42; transform: translate(-3px, 3px) scale(.72); }
  58% { opacity: .9; transform: translate(-7px, 6px) scale(1); }
  76% { opacity: .52; transform: translate(-12px, 10px) scale(.74); }
  100% { opacity: 0; transform: translate(-20px, 16px) scale(.45); }
}
@keyframes butterfly-diamond-flash {
  0%, 100% { opacity: .08; transform: translate(7px, 5px) scale(.38) rotate(0deg); }
  22% { opacity: 1; transform: translate(2px, 1px) scale(1.18) rotate(16deg); }
  38% { opacity: .28; transform: translate(-2px, 4px) scale(.58) rotate(28deg); }
  57% { opacity: .92; transform: translate(-7px, 7px) scale(1) rotate(42deg); }
  76% { opacity: .22; transform: translate(-12px, 11px) scale(.52) rotate(56deg); }
}
.characters-back {
  position: absolute;
  top: 10px;
  left: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: #704438;
  font-size: 1.25rem;
  line-height: 1.2;
  text-decoration: none;
}
.characters-back:hover { color: #48251e; }
.characters-intro { position: relative; text-align: center; margin: 0 auto 32px; }
.characters-page .characters-intro h1 {
  margin: 0 auto 4px;
  max-width: none;
  font-family: var(--serif);
  font-size: clamp(2.2rem, 3.7vw, 3.2rem);
  font-weight: 700;
  line-height: 1.2;
  color: #48251e;
  text-shadow: 0 1px 9px #fff8df80;
}
.characters-ornament {
  display: flex; justify-content: center; align-items: center; gap: 18px;
  font-family: Georgia, serif; font-size: 2.3rem; line-height: 1;
  color: #90954c; margin: 4px 0 14px;
}
.characters-ornament span { color: #bd5660; font-size: 1.9rem; }
.characters-intro p { margin: 0; font-size: 1.05rem; line-height: 1.55; color: #653d2e; }
.characters-intro .characters-lead { font-family: var(--serif); font-size: 1.35rem; font-weight: 700; margin-bottom: 2px; }
.characters-intro .characters-read-hint{position:absolute;top:calc(100% + 9px);left:50%;width:max-content;max-width:100%;margin:0;color:#756e78;font-size:.84rem;line-height:1.2;transform:translateX(-50%)}
.character-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.character { min-width: 0; padding: 12px 14px 20px; border-radius: 20px; background: #fffaf1; box-shadow: 0 4px 16px #6c542619; }
.character-picture { position: relative; height: 0; padding-bottom: 120%; background: #fffaf1; overflow: hidden; border-radius: 7px; }
.character-picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.character h2 { margin: 10px 14px 6px; font-size: 1.6rem; line-height: 1.2; color: #48251e; text-align: left; overflow-wrap: break-word; }
.character p { margin: 0 14px; color: #756e78; font-size: .94rem; line-height: 1.43; }
.characters-footer {
  position: relative;
  z-index: 1;
  width: min(1160px, calc(100% - 64px)); margin: 18px auto 0;
  padding: 13px 32px; border: 0; border-radius: 30px 30px 12px 12px;
  background: #fff8ee; color: #915341; font-size: .9rem;
  min-height: 48px; display: flex; justify-content: flex-start;
}
@media (max-width: 1000px) {
  .characters-page { width: calc(100% - 48px); padding-top: 36px; }
  .character-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
  .characters-footer { width: calc(100% - 40px); }

  /* Der Hinweis wird Teil des normalen Dokumentflusses, sobald er umbrechen kann. */
  .characters-intro .characters-read-hint {
    position: static;
    width: auto;
    max-width: 100%;
    margin: 9px auto 0;
    transform: none;
  }
}
@media (max-width: 600px) {
  .characters-page { width: calc(100% - 36px); padding-top: 28px; }
  .characters-back {
    position: relative;
    top: auto;
    left: auto;
    margin-bottom: 10px;
  }
  .characters-intro p { font-size: 1rem; }
  .characters-intro .characters-lead { font-size: 1.18rem; margin-bottom: 8px; }
  .characters-intro br { display: none; }
  .character-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .character p { font-size: 1rem; line-height: 1.55; }
  .characters-footer { width: calc(100% - 36px); padding-inline: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .characters-butterfly, .characters-butterfly::before, .characters-butterfly::after, .characters-butterfly-sparkles, .characters-butterfly-sparkles::before, .characters-butterfly-sparkles::after { animation: none; }
}

/* Nur die Beschreibungen der drei Karten in der normalen Ansicht. */
.character-grid > .character > p { text-align: justify; }

/* Die Flugbahnen bleiben bewusst in den beiden äußeren Bildzonen. */
.characters-butterfly {
  --butterfly-edge-left: clamp(50px, calc(50vw - 620px), 250px);
  --butterfly-edge-right: clamp(-250px, calc(620px - 50vw), -50px);
}
@keyframes butterfly-left-hover {
  0% { transform: translate(-110px, 12px) rotate(-13deg) scale(.96); opacity: 0; }
  8% { transform: translate(8px, -18px) rotate(14deg) scale(1); opacity: .96; }
  24% { transform: translate(calc(var(--butterfly-edge-left) - 26px), -58px) rotate(-9deg) scale(.97); }
  35% { transform: translate(calc(var(--butterfly-edge-left) - 43px), -32px) rotate(12deg) scale(1); }
  50% { transform: translate(var(--butterfly-edge-left), -73px) rotate(-12deg) scale(.96); }
  63% { transform: translate(calc(var(--butterfly-edge-left) - 21px), -43px) rotate(10deg) scale(1); }
  79% { transform: translate(calc(var(--butterfly-edge-left) - 8px), -84px) rotate(-14deg) scale(.97); }
  91% { transform: translate(19px, -52px) rotate(12deg) scale(.99); opacity: .96; }
  100% { transform: translate(-110px, -71px) rotate(-13deg) scale(.96); opacity: 0; }
}
@keyframes butterfly-right-hover {
  0% { transform: translate(122px, -10px) rotate(13deg) scale(.96); opacity: 0; }
  8% { transform: translate(-8px, 24px) rotate(-15deg) scale(1); opacity: .96; }
  22% { transform: translate(calc(var(--butterfly-edge-right) + 26px), 70px) rotate(9deg) scale(.97); }
  37% { transform: translate(calc(var(--butterfly-edge-right) + 43px), 41px) rotate(-13deg) scale(1); }
  53% { transform: translate(var(--butterfly-edge-right), 84px) rotate(14deg) scale(.96); }
  66% { transform: translate(calc(var(--butterfly-edge-right) + 21px), 53px) rotate(-9deg) scale(1); }
  81% { transform: translate(calc(var(--butterfly-edge-right) + 8px), 98px) rotate(13deg) scale(.97); }
  91% { transform: translate(-19px, 65px) rotate(-12deg) scale(.99); opacity: .96; }
  100% { transform: translate(122px, 90px) rotate(13deg) scale(.96); opacity: 0; }
}
@keyframes butterfly-left-loop {
  0% { transform: translate(-96px, -7px) rotate(-10deg) scale(.97); opacity: 0; }
  8% { transform: translate(7px, 19px) rotate(15deg) scale(1); opacity: .95; }
  21% { transform: translate(calc(var(--butterfly-edge-left) - 18px), -5px) rotate(-14deg) scale(.96); }
  34% { transform: translate(calc(var(--butterfly-edge-left) - 37px), -33px) rotate(11deg) scale(1); }
  49% { transform: translate(var(--butterfly-edge-left), 4px) rotate(-12deg) scale(.97); }
  61% { transform: translate(calc(var(--butterfly-edge-left) - 23px), -29px) rotate(14deg) scale(1); }
  78% { transform: translate(calc(var(--butterfly-edge-left) - 6px), -54px) rotate(-13deg) scale(.96); }
  91% { transform: translate(16px, -21px) rotate(10deg) scale(.99); opacity: .95; }
  100% { transform: translate(-96px, -40px) rotate(-10deg) scale(.97); opacity: 0; }
}
@keyframes butterfly-right-loop {
  0% { transform: translate(104px, 6px) rotate(10deg) scale(.97); opacity: 0; }
  8% { transform: translate(-7px, -19px) rotate(-15deg) scale(1); opacity: .95; }
  21% { transform: translate(calc(var(--butterfly-edge-right) + 18px), 8px) rotate(14deg) scale(.96); }
  35% { transform: translate(calc(var(--butterfly-edge-right) + 37px), 37px) rotate(-11deg) scale(1); }
  50% { transform: translate(var(--butterfly-edge-right), 11px) rotate(12deg) scale(.97); }
  63% { transform: translate(calc(var(--butterfly-edge-right) + 23px), 43px) rotate(-14deg) scale(1); }
  79% { transform: translate(calc(var(--butterfly-edge-right) + 6px), 18px) rotate(13deg) scale(.96); }
  91% { transform: translate(-16px, 49px) rotate(-10deg) scale(.99); opacity: .95; }
  100% { transform: translate(104px, 25px) rotate(10deg) scale(.97); opacity: 0; }
}
@keyframes butterfly-left-sweep {
  0% { transform: translate(-100px, 10px) rotate(-12deg) scale(.96); opacity: 0; }
  8% { transform: translate(9px, -16px) rotate(14deg) scale(1); opacity: .96; }
  23% { transform: translate(calc(var(--butterfly-edge-left) - 24px), -43px) rotate(-9deg) scale(.97); }
  36% { transform: translate(calc(var(--butterfly-edge-left) - 41px), -12px) rotate(12deg) scale(1); }
  52% { transform: translate(var(--butterfly-edge-left), -52px) rotate(-13deg) scale(.96); }
  66% { transform: translate(calc(var(--butterfly-edge-left) - 19px), -20px) rotate(10deg) scale(1); }
  81% { transform: translate(calc(var(--butterfly-edge-left) - 4px), -63px) rotate(-14deg) scale(.97); }
  92% { transform: translate(18px, -33px) rotate(12deg) scale(.99); opacity: .96; }
  100% { transform: translate(-100px, -49px) rotate(-12deg) scale(.96); opacity: 0; }
}

/* iPadOS: dieselbe feste Originalgrafik wie auf Desktop als durchgehende
   Hintergrundebene. Dadurch endet das Einzelbild beim Scrollen nicht unter
   den Karten und es bleibt keine Ersatzfarbe sichtbar. */
@supports (-webkit-touch-callout: none) {
  @media (min-width: 601px) and (max-width: 1366px) {
    body {
      position: relative;
      background: transparent;
    }
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background: url("hauptfiguren-garten.png") center top / cover no-repeat;
    }
  }
}