.zmk { --zmk-ink:#2a1a06; --zmk-accent:#6b0f0f; --zmk-accent-dark:#4a0707; --zmk-gold:#a27e44; --zmk-paper:#fffaf1;
font-family: inherit; color: var(--zmk-ink); margin: 2rem 0; }
.zmk *, .zmk *::before, .zmk *::after { box-sizing: border-box; }
.zmk__head { text-align: center; margin-bottom: 1rem; }
.zmk__kicker { margin: 0 0 .2rem; font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; color: #7a5a1e; font-weight: 600; }
.zmk__title { margin: 0; font-size: clamp(1.4rem, 1.1rem + 1.3vw, 2rem); line-height: 1.2; color: var(--zmk-accent-dark); }
.zmk__sub { margin: .3rem 0 0; color: #4a3513; }
.zmk__toolbar { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin: 0 0 1rem; }
.zmk__btn { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .55rem 1.1rem; margin: 0;
font: inherit; font-size: 1rem; font-weight: 700; line-height: 1.2; cursor: pointer;
color: #fff; background: var(--zmk-accent); border: 2px solid var(--zmk-accent); border-radius: 6px;
transition: background .2s, transform .2s; }
.zmk__btn:hover { background: var(--zmk-accent-dark); border-color: var(--zmk-accent-dark); transform: translateY(-1px); }
.zmk__btn--ghost { background: transparent; color: var(--zmk-accent); }
.zmk__btn--ghost:hover { color: #fff; }
.zmk__btn[disabled] { opacity: .45; cursor: default; transform: none; }
.zmk__btn svg { width: 1.1em; height: 1.1em; fill: currentcolor; }
.zmk :focus-visible { outline: 3px solid #0b57d0; outline-offset: 3px; }
.zmk__stage { position: relative; border-radius: 8px; overflow-x: auto; overscroll-behavior-x: contain;
box-shadow: 0 0 0 1px rgb(162 126 68 / 45%), 0 8px 24px rgb(74 40 10 / 18%); background: #fde4c8; }
.zmk-svg { display: block; width: 100%; height: auto; min-width: 760px; max-width: none; }
.zmk__swipe { display: none; margin: .4rem 0 0; font-size: .85rem; text-align: center; color: #4a3513; }
@media (max-width: 47.99em) { .zmk__swipe { display: block; } } .zmk-part, .zmk-lbl { cursor: pointer; }
.zmk-part { transition: opacity .3s, filter .3s; }
.zmk-hit { fill: transparent; }
.zmk-zone { fill: transparent; transition: fill .3s; }
.zmk-part:hover { filter: brightness(1.08) drop-shadow(0 0 4px rgb(107 15 15 / 55%)); }
.zmk.has-active .zmk-part:not(.is-active) { opacity: .28; }
.zmk-wall, .zmk-welle2, .zmk-deco { transition: opacity .3s; }
.zmk.has-active .zmk-wall, .zmk.has-active .zmk-welle2, .zmk.has-active .zmk-deco { opacity: .35; }
.zmk-part.is-active { filter: drop-shadow(0 0 5px rgb(227 20 27 / 80%)); }
.zmk-part.is-active .zmk-zone { fill: rgb(255 255 255 / 30%); }
.zmk-lbl text { font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: 20px; fill: var(--zmk-ink); letter-spacing: .02em; transition: fill .2s; }
.zmk-lbl--big text { font-weight: 400; font-size: 29px; }
.zmk-lbl--light text { fill: #fff; }
.zmk-lead { fill: none; stroke: var(--zmk-ink); stroke-width: 1.6; transition: stroke .2s; }
.zmk-lbl:hover text, .zmk-lbl.is-active text { fill: #c40d14; }
.zmk-lbl.is-active .zmk-lead { stroke: #c40d14; stroke-width: 2.6; }
.zmk-lbl--light.is-active text, .zmk-lbl--light:hover text { fill: #ffe08a; }
.zmk.has-active .zmk-lbl:not(.is-active) { opacity: .5; }
.zmk-floorhatch line { stroke: #4a4a4a; stroke-width: 1.6; }
.zmk-hint { font-family: inherit; font-size: 21px; font-style: italic; fill: #7a5a1e; }
.zmk.is-touched .zmk-hint { display: none; } .zmk__info { margin-top: 1rem; padding: 1.1rem 1.3rem; background: var(--zmk-paper); border-left: 5px solid var(--zmk-gold);
border-radius: 0 8px 8px 0; min-height: 7.5rem; }
.zmk__info-step { margin: 0 0 .2rem; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; color: #7a5a1e; font-weight: 600; }
.zmk__info-title { margin: 0 0 .4rem; font-size: 1.35rem; line-height: 1.25; color: var(--zmk-accent-dark); }
.zmk__info-text { margin: 0; line-height: 1.6; }
.zmk__tournav { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .9rem; }
.zmk__tournav[hidden] { display: none; } .zmk__parts { margin-top: 1rem; }
.zmk__parts-title { margin: 0 0 .5rem; font-size: 1rem; font-weight: 700; }
.zmk__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.zmk__chips li { margin: 0; }
.zmk__chip { min-height: 2.5rem; padding: .35rem .8rem; margin: 0; font: inherit; font-size: .95rem; cursor: pointer;
color: var(--zmk-accent); background: #fff; border: 1.5px solid rgb(107 15 15 / 45%); border-radius: 999px; transition: background .2s, color .2s; }
.zmk__chip:hover { background: #f6e9e2; }
.zmk__chip[aria-pressed="true"] { background: var(--zmk-accent); border-color: var(--zmk-accent); color: #fff; } .zmk-mv, .zmk-stream, .zmk-water, .zmk-shoe, .zmk-taenzer, .zmk-shake-beutel, .zmk-shake-stock,
.zmk-grain, .zmk-flour, .zmk-sift, .zmk-branbit, .zmk-drop {
animation-play-state: paused; animation-timing-function: linear; animation-iteration-count: infinite; }
.zmk.is-running :is(.zmk-mv, .zmk-stream, .zmk-water, .zmk-shoe, .zmk-taenzer, .zmk-shake-beutel, .zmk-shake-stock,
.zmk-grain, .zmk-flour, .zmk-sift, .zmk-branbit, .zmk-drop) { animation-play-state: running; }
.zmk-mv--rad { animation-name: zmk-down26; animation-duration: 1.3s; }
.zmk-mv--kamm { animation-name: zmk-down22; animation-duration: 1.1s; }
.zmk-mv--stock { animation-name: zmk-up10; animation-duration: .32s; }
.zmk-mv--klk { animation-name: zmk-down16; animation-duration: .4s; }
.zmk-mv--sp { animation-name: zmk-right11; animation-duration: .18s; }
.zmk-mv--laeufer { animation-name: zmk-right16; animation-duration: .26s; }
.zmk-mv--welle { animation-name: zmk-down12; animation-duration: .6s; }
.zmk-mv--welle2 { animation-name: zmk-up10; animation-duration: .22s; }
@keyframes zmk-down26 { to { transform: translateY(26px); } }
@keyframes zmk-down22 { to { transform: translateY(22px); } }
@keyframes zmk-down16 { to { transform: translateY(16px); } }
@keyframes zmk-down12 { to { transform: translateY(12px); } }
@keyframes zmk-up10 { to { transform: translateY(-10px); } }
@keyframes zmk-right11 { to { transform: translateX(11px); } }
@keyframes zmk-right16 { to { transform: translateX(16px); } }
.zmk-stream { opacity: 0; transition: opacity .4s; }
.zmk.is-running .zmk-stream { opacity: 1; }
.zmk-water { animation-name: zmk-wave; animation-duration: 1.2s; animation-direction: alternate; animation-timing-function: ease-in-out; }
@keyframes zmk-wave { to { transform: translateX(-6px); } }
.zmk-shoe, .zmk-shake-stock { animation-name: zmk-shake; animation-duration: .2s; }
.zmk-shake-beutel { animation-name: zmk-shake-s; animation-duration: .2s; }
@keyframes zmk-shake { 0%,100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
@keyframes zmk-shake-s { 0%,100% { transform: translate(0,0); } 50% { transform: translate(3px,1px); } }
.zmk-taenzer { animation-name: zmk-jig; animation-duration: .2s; }
@keyframes zmk-jig { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.zmk-particles > *, .zmk-branbit, .zmk-drop { opacity: 0; animation-delay: var(--d, 0s); }
.zmk-grain { fill: #c98f22; animation-name: zmk-fall-grain; animation-duration: 2s; }
@keyframes zmk-fall-grain { 0% { opacity: 0; transform: translateY(0); } 10% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(225px); } }
.zmk-flour { fill: #fffaf0; stroke: #d9c08e; stroke-width: .8; animation-name: zmk-chute; animation-duration: 2.4s; }
@keyframes zmk-chute { 0% { opacity: 0; transform: translate(0,0); } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; transform: translate(130px,140px); } }
.zmk-sift { fill: #fffaf0; animation-name: zmk-sift; animation-duration: 1.6s; }
@keyframes zmk-sift { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(40px); } }
.zmk-branbit { fill: #e0b30d; animation-name: zmk-bran; animation-duration: 2s; }
@keyframes zmk-bran { 0% { opacity: 0; transform: translate(0,0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(14px,28px); } }
.zmk-drop { fill: #1ba4e6; animation-name: zmk-drop; animation-duration: 1.4s; }
@keyframes zmk-drop { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(36px); } }
.zmk-flourpile { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(.3); transition: transform 6s ease-out; }
.zmk.is-running .zmk-flourpile { transform: scaleY(1.6); }
@media (prefers-reduced-motion: reduce) {
.zmk.is-running :is(.zmk-mv, .zmk-water, .zmk-shoe, .zmk-taenzer, .zmk-shake-beutel, .zmk-shake-stock) { animation-duration: 4s !important; }
}
@media print { .zmk__toolbar, .zmk__tournav, .zmk__parts, .zmk__swipe { display: none !important; } }