/* seasons/halloween/saison.css — the Halloween skin (only while it is on):
   palette for both brands (#mock keeps its own), corner webs and hero glow
   without JS, and the look of what saison.js draws (prefix sz-hw-). Every
   animation hangs on html.sz-fx: reduced motion, "Effekte aus", no JS = still. */

/* ── 1. Palette */
:root.dark {
  --background: oklch(0.155 0.045 300); --foreground: oklch(0.965 0.018 80);
  --card: oklch(0.2 0.052 302); --card-foreground: oklch(0.965 0.018 80);
  --popover: oklch(0.19 0.05 302); --popover-foreground: oklch(0.965 0.018 80);
  --primary: oklch(0.965 0.018 80); --primary-foreground: oklch(0.2 0.06 300);
  --secondary: oklch(0.25 0.055 302); --secondary-foreground: oklch(0.965 0.018 80);
  --muted: oklch(0.24 0.05 302); --muted-foreground: oklch(0.73 0.04 300);
  --accent: oklch(0.28 0.06 302); --accent-foreground: oklch(0.965 0.018 80);
  --border: oklch(0.31 0.055 302); --input: oklch(0.31 0.055 302);
  --brand: oklch(0.74 0.175 55); --brand-ink: oklch(0.2 0.06 300); --ring: var(--brand);
  --dot-ink: oklch(0.82 0.11 62); --outline-stroke: oklch(0.76 0.16 58 / .78);
  --halo: oklch(0.8 0.12 60 / .12); --vignette: oklch(0.155 0.045 300 / .86);
  --surf-a: oklch(0.82 0.08 300 / .05); --surf-b: oklch(0.82 0.08 300 / .015); --surf-edge: oklch(0.86 0.07 300 / .1);
  --solid-a: oklch(0.8 0.16 62); --solid-b: oklch(0.71 0.185 50); --solid-edge: oklch(0.9 0.11 75);
  --solid-ink: oklch(0.2 0.06 300);
  --solid-sh: 0 1px 2px 0 oklch(0 0 0 / .5), 0 10px 30px -10px oklch(0.7 0.19 48 / .6);
  --price-glow: oklch(0.75 0.16 55 / .18);
  --panel-glow-1: oklch(0.7 0.18 50 / .42); --panel-glow-2: oklch(0.6 0.2 320 / .4);
  --nav-bg: oklch(0.2 0.052 302 / .5); --nav-bg-2: oklch(0.19 0.05 302 / .84);
  /* the skin's own */
  --sz-hw-web: oklch(0.9 0.03 300 / .3); --sz-hw-thread: oklch(0.9 0.03 300 / .55);
  --sz-hw-sil: #0d0716; --sz-hw-tree: #30254a; --sz-hw-cat: #1f1532;
  --sz-hw-st1: #605870; --sz-hw-st2: #2c2638; --sz-hw-st-edge: #17111f;
  --sz-hw-engrave: #17111f; --sz-hw-engrave-hi: oklch(1 0 0 / .2); --sz-hw-moss: #44603a;
  --sz-hw-earth: #3a2a21; --sz-hw-earth-hi: #6e4f38; --sz-hw-grass: #3a5132; --sz-hw-hole: #040107;
  --sz-hw-coat: #3d2f55; --sz-hw-coat-hi: #57467a; --sz-hw-pants: #2a2236; --sz-hw-boot: #120d18;
  --sz-hw-skin: #e9dcc3; --sz-hw-skin-sh: #c9b597; --sz-hw-nose: #e3a07f; --sz-hw-hat: #18121f;
  --sz-hw-fog: oklch(0.88 0.04 300 / .16); --sz-hw-fog-page: oklch(0.85 0.05 300 / .07);
  --sz-hw-cloud: oklch(0.5 0.06 300 / .75); --sz-hw-ghost: #f7f3ff; --sz-hw-ghost-sh: #c9bde6;
  --sz-hw-moonglow: oklch(0.82 0.15 70 / .38);
}
:root:not(.dark) {
  --background: oklch(0.972 0.022 82); --foreground: oklch(0.24 0.07 300);
  --card: oklch(0.99 0.012 85); --card-foreground: oklch(0.24 0.07 300);
  --popover: oklch(0.99 0.012 85); --popover-foreground: oklch(0.24 0.07 300);
  --primary: oklch(0.26 0.075 300); --primary-foreground: oklch(0.99 0.01 85);
  --secondary: oklch(0.94 0.025 78); --secondary-foreground: oklch(0.24 0.07 300);
  --muted: oklch(0.945 0.024 78); --muted-foreground: oklch(0.46 0.055 300);
  --accent: oklch(0.93 0.03 72); --accent-foreground: oklch(0.24 0.07 300);
  --border: oklch(0.885 0.032 72); --input: oklch(0.885 0.032 72);
  --brand: oklch(0.555 0.175 42); --brand-ink: oklch(0.99 0 0); --ring: var(--brand);
  --ink: oklch(0.24 0.07 300); --dot-ink: oklch(0.45 0.12 45); --outline-stroke: oklch(0.52 0.16 42 / .6);
  --halo: oklch(0.6 0.14 50 / .07); --vignette: oklch(0.972 0.022 82 / .8);
  --surf-a: oklch(1 0.012 85 / .85); --surf-b: oklch(1 0.012 85 / .45); --surf-edge: oklch(1 0.01 85 / .95);
  --solid-a: oklch(0.56 0.17 45); --solid-b: oklch(0.48 0.16 36); --solid-edge: oklch(0.72 0.15 60 / .7);
  --solid-ink: oklch(0.99 0.01 85);
  --solid-sh: 0 1px 2px 0 oklch(0.3 0.08 40 / .3), 0 10px 26px -12px oklch(0.55 0.17 42 / .55);
  --price-glow: oklch(0.6 0.15 50 / .1);
  --panel-glow-1: oklch(0.72 0.16 55 / .26); --panel-glow-2: oklch(0.6 0.15 320 / .16);
  --nav-bg: oklch(0.99 0.012 85 / .72); --nav-bg-2: oklch(0.99 0.012 85 / .9);
  --sz-hw-web: oklch(0.3 0.06 300 / .3); --sz-hw-thread: oklch(0.3 0.06 300 / .5);
  --sz-hw-sil: #24153a; --sz-hw-tree: #4b3d60; --sz-hw-cat: #2b1d40;
  --sz-hw-st1: #d6cfdd; --sz-hw-st2: #9b91aa; --sz-hw-st-edge: #5d536d;
  --sz-hw-engrave: #3a2f49; --sz-hw-engrave-hi: oklch(1 0 0 / .55); --sz-hw-moss: #6f9150;
  --sz-hw-earth: #6a4a33; --sz-hw-earth-hi: #8d6a4c; --sz-hw-grass: #6b8a4a; --sz-hw-hole: #2a1a12;
  --sz-hw-coat: #4a3a66; --sz-hw-coat-hi: #67558c; --sz-hw-pants: #3a3048; --sz-hw-boot: #241b2c;
  --sz-hw-skin: #f0e2c8; --sz-hw-skin-sh: #cdb894; --sz-hw-nose: #e59a78; --sz-hw-hat: #261c30;
  --sz-hw-fog: oklch(0.55 0.05 300 / .13); --sz-hw-fog-page: oklch(0.55 0.06 300 / .06);
  --sz-hw-cloud: oklch(0.75 0.03 300 / .8); --sz-hw-ghost: #fffdf8; --sz-hw-ghost-sh: #d9cfe6;
  --sz-hw-moonglow: oklch(0.8 0.14 65 / .3);
}
::selection { background-color: color-mix(in srgb, var(--brand) 32%, transparent) }

/* ── 2. Still decoration */
/* Spider webs in the top corners, under the header pill (z 50). */
body::before, body::after {
  content: ""; position: fixed; top: 0; z-index: 49; pointer-events: none;
  width: clamp(104px, 13vw, 210px); aspect-ratio: 1;
  background-color: var(--sz-hw-web);
  -webkit-mask: var(--sz-hw-netz) no-repeat 0 0 / 100% 100%; mask: var(--sz-hw-netz) no-repeat 0 0 / 100% 100%;
  --sz-hw-netz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M186 7L0 0 183 46M173 88L0 0 152 132M108 155L0 0 68 176M30 189L0 0 7 203M25 1Q22 3 26 6 21 8 23 12 19 13 19 17 15 17 15 21 10 20 9 24 6 22 4 26 2 22 1 27M43 1Q37 5 41 10 35 13 40 21 31 21 33 29 25 28 25 35 18 33 16 41 10 37 7 43 4 38 2 45M62 2Q54 8 60 15 51 19 56 29 45 30 48 41 36 40 37 53 25 48 23 60 14 52 10 62 5 54 2 62M85 3Q71 10 83 21 67 25 72 37 59 40 64 55 48 53 49 69 34 63 30 78 18 69 13 81 7 71 3 84M105 4Q89 12 99 25 84 31 93 48 74 50 77 67 60 66 58 83 42 79 37 96 23 86 16 102 9 89 4 103M127 4Q107 15 125 31 101 38 115 59 90 61 98 85 73 81 74 106M46 120Q28 105 19 123 10 108 4 123M150 5Q127 18 145 36 120 45 134 68 106 72 110 95 86 95 84 120 60 113 55 143 33 124 23 148 12 128 5 151M168 6Q146 21 166 41 139 52 157 80M131 114Q99 110 102 145 69 131 61 158M27 169Q14 147 6 175M112 98q-6 22 2 44' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E");
}
body::before { left: 0 }
body::after { right: 0; transform: scaleX(-1) }

/* Glow behind the hero (inside its box, so no edge shows). */
#inhalt > section.dots:first-child::after {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(ellipse 44% 40% at 50% 34%, oklch(0.66 0.19 48 / .17), transparent 72%),
    radial-gradient(ellipse 20% 32% at 79% 18%, oklch(0.52 0.2 310 / .2), transparent 72%),
    radial-gradient(ellipse 18% 30% at 19% 30%, oklch(0.5 0.18 300 / .14), transparent 72%);
}
:root:not(.dark) #inhalt > section.dots:first-child::after {
  background: radial-gradient(ellipse 44% 40% at 50% 34%, oklch(0.78 0.15 60 / .22), transparent 72%),
    radial-gradient(ellipse 20% 32% at 79% 18%, oklch(0.7 0.14 310 / .14), transparent 72%);
}

/* ── 3. What saison.js draws */
.sz-hw-abs { position: absolute; pointer-events: none }
svg.sz-hw-abs, .sz-hw-friedhof svg, .sz-hw-lug svg, .sz-hw-buh svg { display: block; overflow: visible }
.sz-hw-lug svg, .sz-hw-buh svg { width: 100% }
.sz-hw-friedhof > svg { position: relative }
.sz-hw-fade { mask-image: linear-gradient(90deg, transparent, #000 15%, #000 86%, transparent) }

/* Moon in the hero, behind the text; a cloud and now and then a witch pass. */
.sz-hw-mond { z-index: -1; top: 6.6rem; right: 1%; width: 132px; aspect-ratio: 1 }
.sz-hw-mond-glow {
  position: absolute; inset: 9%; border-radius: 50%;
  box-shadow: 0 0 46px 14px var(--sz-hw-moonglow), 0 0 120px 46px color-mix(in srgb, var(--sz-hw-moonglow) 45%, transparent);
}
.sz-hw-mond-disk { position: absolute; inset: 0; width: 100%; height: 100% }
.sz-hw-himmel { position: absolute; top: -34%; bottom: -34%; left: -150%; right: 0; overflow: hidden }
.sz-hw-wolke { position: absolute; top: 56%; left: 62%; width: 30%; opacity: .85; transform: translateX(10%) }
.sz-hw-wolke path { fill: var(--sz-hw-cloud) }
.sz-hw-hexe { position: absolute; top: 24%; left: 100%; width: 17%; opacity: 0; color: var(--sz-hw-sil) }
@media (max-width: 640px) { .sz-hw-mond { top: 5.4rem; right: 12px; width: 66px } }

/* Lanterns at the hero's lower corners (wide screens) */
.sz-hw-laterne-hero { bottom: -.25rem; width: 58px }
.sz-hw-links { left: 3% }
.sz-hw-rechts { right: 3%; width: 46px }
@media (max-width: 1023px) { svg.sz-hw-laterne-hero { display: none } }

/* Graveyard standing on the top edge of the footer */
.sz-hw-friedhof {
  position: absolute; bottom: 100%; z-index: 1; pointer-events: none; padding: 0 6px;
  right: max(1rem, calc((100% - 72rem) / 2 + 1.5rem));
  display: flex; align-items: flex-end; gap: 10px;
}
.sz-hw-boden {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 7px;
  background: var(--sz-hw-earth); border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.sz-hw-stein-a { width: 60px }
.sz-hw-kreuz { width: 30px; margin-left: -4px }
.sz-hw-stein-b { width: 62px }
.sz-hw-laterne { width: 50px; margin: 0 -2px 0 2px }
.sz-hw-gd { width: 141px; margin-bottom: -1px }
.sz-hw-stein-c { width: 70px; margin-left: -6px }
.sz-hw-baum { width: 82px; margin-left: -4px }
@media (max-width: 767px) {
  .sz-hw-friedhof { right: .75rem; gap: 6px }
  .sz-hw-friedhof .sz-hw-w { display: none }
  .sz-hw-stein-b { width: 46px } .sz-hw-laterne { width: 38px }
  .sz-hw-gd { width: 104px } .sz-hw-stein-c { width: 52px }
}
.sz-hw-st1 { stop-color: var(--sz-hw-st1) }
.sz-hw-st2 { stop-color: var(--sz-hw-st2) }
.sz-hw-edge, .sz-hw-bevel, .sz-hw-crack { fill: none; stroke: var(--sz-hw-st-edge); stroke-width: 1.4 }
.sz-hw-bevel { stroke-width: 1; opacity: .45 }
.sz-hw-crack { stroke-width: .9; stroke-linejoin: round }
.sz-hw-shine { fill: none; stroke: var(--sz-hw-engrave-hi); stroke-width: 1.2 }
.sz-hw-moss { fill: var(--sz-hw-moss) }
.sz-hw-grass { fill: none; stroke: var(--sz-hw-grass); stroke-width: 1.4; stroke-linecap: round }
.sz-hw-mound, .sz-hw-earth { fill: var(--sz-hw-earth) }
.sz-hw-txt { font: 700 11px Georgia, 'Times New Roman', 'DejaVu Serif', serif; text-anchor: middle }
.sz-hw-txt-k { font-size: 6.4px; letter-spacing: .14em }
.sz-hw-ink { fill: var(--sz-hw-engrave) }
.sz-hw-hi { fill: var(--sz-hw-engrave-hi) }
.sz-hw-schrift { transition: opacity .45s ease }
.sz-hw-swap .sz-hw-schrift { opacity: 0 }
.sz-hw-augen { fill: #ffd23a }
.sz-hw-katze { fill: var(--sz-hw-cat) }
.sz-hw-katze-s { fill: none; stroke: var(--sz-hw-cat); stroke-width: 3; stroke-linecap: round }
.sz-hw-tree-s { stroke: var(--sz-hw-tree) }
.sz-hw-tree-b { fill: var(--sz-hw-tree) }

/* The gravedigger */
.sz-hw-earth-hi { fill: none; stroke: var(--sz-hw-earth-hi); stroke-width: 1.4; stroke-linecap: round }
.sz-hw-hole { fill: var(--sz-hw-hole) }
.sz-hw-leg { fill: none; stroke: var(--sz-hw-pants); stroke-width: 7; stroke-linecap: round }
.sz-hw-leg2 { stroke: color-mix(in srgb, var(--sz-hw-pants) 75%, #000) }
.sz-hw-boot { fill: var(--sz-hw-boot) }
.sz-hw-coat { fill: var(--sz-hw-coat) }
.sz-hw-coat-hi { fill: none; stroke: var(--sz-hw-coat-hi); stroke-width: 1.2; stroke-linecap: round }
.sz-hw-sleeve { fill: none; stroke: var(--sz-hw-coat); stroke-width: 6; stroke-linecap: round }
.sz-hw-sleeve2 { stroke: color-mix(in srgb, var(--sz-hw-coat) 72%, #000) }
.sz-hw-skin { fill: var(--sz-hw-skin) }
.sz-hw-skin-sh { fill: var(--sz-hw-skin-sh) }
.sz-hw-nose { fill: var(--sz-hw-nose) }
.sz-hw-stubble { fill: none; stroke: var(--sz-hw-skin-sh); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: .1 2.2 }
.sz-hw-hat { fill: var(--sz-hw-hat) }
.sz-hw-band, .sz-hw-scarf { fill: var(--brand) }
.sz-hw-scarf-s { fill: none; stroke: color-mix(in srgb, var(--brand) 55%, #000); stroke-width: 1.1; stroke-linecap: round }
.sz-hw-clump, .sz-hw-dirt { fill: var(--sz-hw-earth-hi); opacity: 0 }

/* Pivots, in user units of each SVG */
.sz-hw-gd *, .sz-hw-baum-fm, .sz-hw-augen-g { transform-box: view-box }
.sz-hw-gd-up { transform-origin: 88px 84px }
.sz-hw-gd-rig, .sz-hw-gd-arm { transform-origin: 84px 54px }
.sz-hw-gd-fore { transform-origin: 75px 66px }
.sz-hw-gd-head { transform-origin: 83px 45px }
.sz-hw-gd-hat { transform-origin: 81px 29px }
.sz-hw-gd-eye { transform-origin: 77px 35px }
.sz-hw-gd-tail { transform-origin: 90px 49px }
.sz-hw-gd-all { transform-origin: 75px 128px }
.sz-hw-baum-fm { transform-origin: 61px 49px }
.sz-hw-augen-g { transform-origin: 70px 33px }

/* Fog around the graves (clipped to the graveyard) and along the viewport's foot */
.sz-hw-nebelzone { position: absolute; left: 0; right: 0; bottom: -14px; height: 60px; overflow: hidden }
.sz-hw-nebel, .sz-hw-nebelbank {
  position: absolute; left: -7%; right: -7%; bottom: 2px; height: 44px; --f: var(--sz-hw-fog);
  background: radial-gradient(ellipse 20% 46% at 13% 60%, var(--f), transparent 72%),
    radial-gradient(ellipse 23% 42% at 40% 62%, var(--f), transparent 72%),
    radial-gradient(ellipse 21% 48% at 67% 58%, var(--f), transparent 72%),
    radial-gradient(ellipse 18% 42% at 90% 64%, var(--f), transparent 72%);
}
.sz-hw-nebel2 { bottom: 10px; height: 30px; opacity: .8; transform: scaleX(-1) }
.sz-hw-nebelbank { left: -15%; right: -15%; bottom: -60px; height: 230px; --f: var(--sz-hw-fog-page) }
.sz-hw-n2 { bottom: -90px; transform: scaleX(-1); opacity: .8 }

/* Spider on its thread (right margin, only where nothing clickable is) */
.sz-hw-spinne { position: fixed; top: 0; left: 0; z-index: 48; width: 0; height: 0; pointer-events: none; transform-origin: 0 0 }
.sz-hw-faden {
  position: absolute; left: -.5px; top: 0; width: 1px; height: 100px;
  background: var(--sz-hw-thread); transform-origin: 0 0; transform: scaleY(0);
}
.sz-hw-spinne-k {
  position: absolute; left: -15px; top: -6px; width: 30px; height: 30px;
  pointer-events: auto; cursor: pointer; color: var(--sz-hw-sil); -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 0 3px oklch(0.8 0.15 60 / .45));
}
:root:not(.dark) .sz-hw-spinne-k { filter: none }

/* Ghosts */
.sz-hw-geist-k { fill: var(--sz-hw-ghost) }
.sz-hw-geist-s { fill: var(--sz-hw-ghost-sh) }
.sz-hw-geist-e { fill: #1b1030 }
.sz-hw-geist-w { fill: #ff9fb5; opacity: .45 }
.sz-hw-geist-eyes { transform-box: fill-box; transform-origin: center }
.sz-hw-lug { z-index: -1; width: 56px; filter: drop-shadow(0 0 10px oklch(0.85 0.06 300 / .45)) }
:root:not(.dark) .sz-hw-lug { filter: drop-shadow(0 4px 10px oklch(0.4 0.08 300 / .25)) }
.sz-hw-buh { position: absolute; left: 0; top: 0; width: 210px; filter: drop-shadow(0 0 22px oklch(0.9 0.06 300 / .55)) }
.sz-hw-buh-text { position: absolute; left: 0; top: 0 }
.sz-hw-buh-text > span {
  display: block; opacity: 0; white-space: nowrap;
  font: 800 64px/1 'Inter', ui-sans-serif, system-ui, sans-serif; letter-spacing: -.03em;
  color: var(--brand); -webkit-text-stroke: 2px var(--sz-hw-sil); paint-order: stroke fill;
  text-shadow: 0 0 24px color-mix(in srgb, var(--brand) 70%, transparent);
}
.sz-hw-buh-blitz {
  position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 35%, oklch(0.12 0.05 300 / .6) 100%);
}
@media (max-width: 640px) {
  .sz-hw-lug { width: 42px } .sz-hw-buh { width: 140px } .sz-hw-buh-text > span { font-size: 44px }
}

/* ── 4. Movement — only while effects may run */
html.sz-fx .sz-hw-mond-glow { animation: sz-hw-glow 7s ease-in-out infinite }
@keyframes sz-hw-glow { 0%, 100% { opacity: .85; transform: scale(1) } 50% { opacity: 1; transform: scale(1.06) } }
html.sz-fx .sz-hw-wolke { animation: sz-hw-wolke 46s linear infinite }
@keyframes sz-hw-wolke { 0% { transform: translateX(150%) } 100% { transform: translateX(-560%) } }
html.sz-fx .sz-hw-hexe.sz-hw-flug { animation: sz-hw-hexe 6.5s cubic-bezier(.35, .1, .65, .9) }
@keyframes sz-hw-hexe {
  0% { opacity: 1; transform: translate(0, 30%) rotate(-4deg) } 25% { transform: translate(-190%, -10%) rotate(2deg) }
  50% { transform: translate(-380%, 25%) rotate(-3deg) } 75% { transform: translate(-570%, 0%) rotate(3deg) }
  100% { opacity: 1; transform: translate(-760%, 35%) rotate(-2deg) }
}

html.sz-fx .sz-hw-pk-face { animation: sz-hw-flacker 3.3s steps(1, end) infinite }
html.sz-fx .sz-hw-pk-in { animation: sz-hw-flacker2 2.1s ease-in-out infinite alternate }
html.sz-fx .sz-hw-pk-ground { animation: sz-hw-flacker2 2.6s ease-in-out infinite alternate-reverse }
html.sz-fx .sz-hw-rechts .sz-hw-pk-face { animation-duration: 2.7s; animation-delay: -1.1s }
@keyframes sz-hw-flacker {
  0% { opacity: 1 } 6% { opacity: .78 } 8% { opacity: 1 } 21% { opacity: .9 } 23% { opacity: .66 } 25% { opacity: .95 }
  47% { opacity: 1 } 52% { opacity: .8 } 54% { opacity: .94 } 71% { opacity: 1 } 79% { opacity: .84 } 82% { opacity: 1 }
  91% { opacity: .74 } 93% { opacity: 1 }
}
@keyframes sz-hw-flacker2 { 0% { opacity: .55 } 40% { opacity: .95 } 60% { opacity: .7 } 100% { opacity: 1 } }

/* Gravedigger: dig (2.2 s, loops), wipe the brow (2.8 s), lean on the shovel (3.6 s) */
html.sz-fx .sz-hw-dig .sz-hw-gd-up { animation: sz-hw-dig-up 2.2s ease-in-out infinite }
html.sz-fx .sz-hw-dig .sz-hw-gd-rig, html.sz-fx .sz-hw-dig .sz-hw-gd-arm { animation: sz-hw-dig-rig 2.2s ease-in-out infinite }
html.sz-fx .sz-hw-dig .sz-hw-clump { animation: sz-hw-clump 2.2s linear infinite }
html.sz-fx .sz-hw-dig .sz-hw-dirt { animation: sz-hw-dirt 2.2s linear infinite }
@keyframes sz-hw-dig-up {
  0%, 100% { transform: none } 14% { transform: translateY(3px) rotate(-16deg) } 24%, 30% { transform: translateY(5px) rotate(-19deg) }
  44% { transform: translateY(1px) rotate(-6deg) } 58% { transform: rotate(6deg) } 64% { transform: rotate(7deg) } 82% { transform: rotate(1deg) }
}
@keyframes sz-hw-dig-rig {
  0%, 100% { transform: rotate(0) } 14% { transform: rotate(24deg) } 24%, 30% { transform: rotate(28deg) }
  44% { transform: rotate(36deg) } 58% { transform: rotate(-62deg) } 64% { transform: rotate(-70deg) } 82% { transform: rotate(-6deg) }
}
@keyframes sz-hw-clump { 0%, 27% { opacity: 0 } 30%, 55% { opacity: 1 } 57%, 100% { opacity: 0 } }
@keyframes sz-hw-dirt {
  0%, 56% { opacity: 0; transform: none } 57% { opacity: 1; transform: none }
  63% { transform: translate(calc(var(--dx) * .2), calc(var(--h) * -.64 + var(--dd) * .2)) }
  69% { transform: translate(calc(var(--dx) * .4), calc(var(--h) * -.96 + var(--dd) * .4)) }
  75% { transform: translate(calc(var(--dx) * .6), calc(var(--h) * -.96 + var(--dd) * .6)) }
  81% { opacity: 1; transform: translate(calc(var(--dx) * .8), calc(var(--h) * -.64 + var(--dd) * .8)) }
  87%, 100% { opacity: 0; transform: translate(var(--dx), var(--dd)) }
}
.sz-hw-d1 { --dx: 8px; --h: 16px; --dd: 10px } .sz-hw-d2 { --dx: 15px; --h: 22px; --dd: 14px }
.sz-hw-d3 { --dx: 22px; --h: 13px; --dd: 18px } .sz-hw-d4 { --dx: 5px; --h: 25px; --dd: 6px }
.sz-hw-d5 { --dx: 18px; --h: 28px; --dd: 20px } .sz-hw-d6 { --dx: 27px; --h: 18px; --dd: 22px }

html.sz-fx .sz-hw-wipe .sz-hw-gd-up { animation: sz-hw-wipe-up 2.8s ease-in-out }
html.sz-fx .sz-hw-wipe .sz-hw-gd-arm { animation: sz-hw-wipe-arm 2.8s ease-in-out }
html.sz-fx .sz-hw-wipe .sz-hw-gd-fore { animation: sz-hw-wipe-fore 2.8s ease-in-out }
html.sz-fx .sz-hw-wipe .sz-hw-gd-head { animation: sz-hw-wipe-head 2.8s ease-in-out }
@keyframes sz-hw-wipe-up { 0%, 100% { transform: rotate(0) } 20%, 80% { transform: rotate(3deg) } }
@keyframes sz-hw-wipe-arm {
  0%, 100% { transform: rotate(0) } 22% { transform: rotate(78deg) } 34% { transform: rotate(70deg) } 46% { transform: rotate(80deg) }
  58% { transform: rotate(70deg) } 70% { transform: rotate(79deg) } 82% { transform: rotate(74deg) }
}
@keyframes sz-hw-wipe-fore {
  0%, 100% { transform: rotate(0) } 22% { transform: rotate(40deg) } 34% { transform: rotate(52deg) } 46% { transform: rotate(36deg) }
  58% { transform: rotate(52deg) } 70% { transform: rotate(38deg) } 82% { transform: rotate(44deg) }
}
@keyframes sz-hw-wipe-head { 0%, 100% { transform: rotate(0) } 22%, 78% { transform: rotate(-7deg) } }
html.sz-fx .sz-hw-lean .sz-hw-gd-up { animation: sz-hw-lean-up 3.6s ease-in-out }
html.sz-fx .sz-hw-lean .sz-hw-gd-head { animation: sz-hw-lean-head 3.6s ease-in-out }
html.sz-fx .sz-hw-lean .sz-hw-gd-hat { animation: sz-hw-lean-hat 3.6s ease-in-out }
@keyframes sz-hw-lean-up { 0%, 100% { transform: rotate(0) } 30% { transform: rotate(-3deg) } 65% { transform: rotate(1.5deg) } }
@keyframes sz-hw-lean-head { 0%, 100% { transform: rotate(0) } 18%, 40% { transform: rotate(-12deg) } 55%, 80% { transform: rotate(8deg) } }
@keyframes sz-hw-lean-hat { 0%, 50%, 72%, 100% { transform: none } 60% { transform: translateY(-3px) rotate(-6deg) } }
html.sz-fx .sz-hw-gd-eye { animation: sz-hw-blink 4.6s linear infinite }
@keyframes sz-hw-blink { 0%, 44%, 50%, 100% { transform: scaleY(1) } 47% { transform: scaleY(.1) } }
html.sz-fx .sz-hw-gd-tail { animation: sz-hw-tail 1.5s ease-in-out infinite alternate }
@keyframes sz-hw-tail { from { transform: rotate(-6deg) } to { transform: rotate(10deg) } }
/* "boo" scares him: a jump, the hat flies */
html.sz-fx .sz-hw-scare .sz-hw-gd-all { animation: sz-hw-jump 1s cubic-bezier(.3, .7, .4, 1) }
html.sz-fx .sz-hw-scare .sz-hw-gd-hat { animation: sz-hw-hatfly 1.1s cubic-bezier(.3, .7, .4, 1) }
@keyframes sz-hw-jump {
  0%, 56%, 100% { transform: none } 14% { transform: translateY(-16px) scaleY(1.04) }
  34% { transform: translateY(0) scaleY(.94) } 44% { transform: translateY(-4px) }
}
@keyframes sz-hw-hatfly {
  0% { transform: none } 16% { transform: translateY(-30px) rotate(-30deg) } 40% { transform: translateY(-36px) rotate(-200deg) }
  64% { transform: translateY(-4px) rotate(-350deg) } 74%, 100% { transform: rotate(-360deg) }
}
html.sz-fx .sz-hw-augen-g { animation: sz-hw-blink 5.4s linear -2s infinite }
html.sz-fx .sz-hw-baum-fm { animation: sz-hw-sway 4.2s ease-in-out infinite alternate }
@keyframes sz-hw-sway { from { transform: rotate(-5deg) } to { transform: rotate(5deg) } }

html.sz-fx .sz-hw-nebel { animation: sz-hw-nebel 15s ease-in-out infinite alternate }
html.sz-fx .sz-hw-nebel2 { animation: sz-hw-nebel2 21s ease-in-out infinite alternate }
@keyframes sz-hw-nebel { from { transform: translateX(-5%) } to { transform: translateX(5%) } }
@keyframes sz-hw-nebel2 { from { transform: scaleX(-1) translateX(-6%) } to { transform: scaleX(-1) translateX(6%) } }
html.sz-fx .sz-hw-nebelbank { animation: sz-hw-bank 26s ease-in-out infinite alternate }
html.sz-fx .sz-hw-n2 { animation: sz-hw-bank2 34s ease-in-out infinite alternate }
@keyframes sz-hw-bank { from { transform: translateX(-6%) } to { transform: translateX(6%) scaleY(1.15) } }
@keyframes sz-hw-bank2 { from { transform: scaleX(-1) translateX(-7%) } to { transform: scaleX(-1) translateX(7%) scaleY(1.2) } }

html.sz-fx .sz-hw-spinne-beine { animation: sz-hw-beine 1.8s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center }
html.sz-fx .sz-hw-klettert .sz-hw-spinne-beine { animation-duration: .16s }
@keyframes sz-hw-beine { from { transform: scaleX(1) } to { transform: scaleX(.86) } }

html.sz-fx .sz-hw-lug.sz-hw-an svg { animation: sz-hw-lug 5.2s cubic-bezier(.4, 0, .2, 1) forwards }
@keyframes sz-hw-lug {
  0%, 88%, 100% { transform: none } 16%, 38% { transform: translate(var(--px), var(--py)) rotate(var(--rot)) }
  26% { transform: translate(calc(var(--px) * .92), calc(var(--py) * .92)) rotate(calc(var(--rot) * .6)) }
  72% { transform: translate(calc(var(--px) * .95), calc(var(--py) * .95)) rotate(var(--rot)) }
}
html.sz-fx .sz-hw-lug.sz-hw-an .sz-hw-geist-eyes { animation: sz-hw-blink 1.9s linear .7s infinite }
html.sz-fx .sz-hw-buh-text.sz-hw-an > span { animation: sz-hw-buh 1.5s cubic-bezier(.2, .9, .3, 1.3) forwards }
@keyframes sz-hw-buh {
  0% { opacity: 0; transform: scale(.2) rotate(-12deg) } 18% { opacity: 1; transform: scale(1.15) rotate(6deg) }
  26% { transform: scale(1) rotate(-4deg) } 34% { transform: scale(1.05) rotate(3deg) }
  78% { opacity: 1; transform: none } 100% { opacity: 0; transform: scale(1.4) }
}
html.sz-fx .sz-hw-buh-blitz.sz-hw-an { animation: sz-hw-blitz 1.1s ease-out forwards }
@keyframes sz-hw-blitz { 12% { opacity: 1 } 100% { opacity: 0 } }

@media print { body::before, body::after, #inhalt > section.dots:first-child::after { display: none !important } }