/* Weitere Darstellungen der Abstimmung (Entwürfe 10.11.2026, Bert): Mischpult-Fader und Kassetten-Duell.
   Gehäuse, Schrauben, Skalenfenster, Schalter und Buchsen kommen aus poll.css (gleiche Klassen wie beim Zeiger). */
@font-face { font-family:'MK Anton'; src:url('fonts/Anton-Regular.ttf') format('truetype'); font-display:swap; }

/* ---------- Mischpult-Fader ---------- */
.mk-article-poll .mk-fader-window { display:flex; align-items:stretch; gap:2px; padding:8px 8px 8px 6px; }
.mk-article-poll .mk-fader-scale { display:block; flex:0 0 150px; width:150px; height:196px; overflow:visible; cursor:grab; touch-action:none; }
.mk-article-poll .mk-fader-scale:active { cursor:grabbing; }
.mk-article-poll .mk-fader-scale.mk-poll-dial-locked { cursor:default; touch-action:auto; }
.mk-article-poll .mk-fader-ticks line { stroke:#24291e; }
.mk-article-poll .mk-fader-tick-major { stroke-width:1.6; }
.mk-article-poll .mk-fader-tick-minor { stroke-width:.9; }
.mk-article-poll .mk-fader-numbers text { fill:#22251c; font:400 12px/1 Arial,Helvetica,sans-serif; text-anchor:end; }
.mk-article-poll .mk-fader-red { fill:#b8432c; }
.mk-article-poll .mk-fader-slot { fill:#191a12; stroke:#00000066; stroke-width:1; }
.mk-article-poll .mk-fader-slot-glint { stroke:#ffffff1f; stroke-width:1; }
.mk-article-poll .mk-fader-cap-shadow { fill:#2b23124d; }
.mk-article-poll .mk-fader-cap-body { stroke:#5b4519; stroke-width:.8; }
.mk-article-poll .mk-fader-cap-grooves { stroke:#3d2c0c47; stroke-width:1; }
.mk-article-poll .mk-fader-cap-line { stroke:#1b1a14; stroke-width:2.4; stroke-linecap:round; }
.mk-article-poll .mk-fader-side { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; justify-content:space-between; gap:8px; padding:4px 2px 2px 0; text-align:right; }
.mk-article-poll .mk-fader-side .mk-poll-endpoint {
    display:block; width:100%; min-height:24px; height:auto; padding:0; margin:0; border:0; border-radius:2px; background:none; box-shadow:none;
    color:var(--mk-label-color, rgb(70, 73, 59)) !important; font:400 11.5px/1.3 Arial,Helvetica,sans-serif !important;
    text-align:right; white-space:normal; overflow-wrap:anywhere; text-shadow:none !important; touch-action:manipulation;
}
.mk-article-poll .mk-fader-readout { display:flex; flex-direction:column; align-items:flex-end; gap:3px; }
.mk-article-poll .mk-fader-readout-label { color:#5a5446; font:700 8.5px/1.2 Arial,Helvetica,sans-serif; letter-spacing:.1em; text-transform:uppercase; }
.mk-article-poll .mk-fader-lcd { display:block; padding:3px; border-radius:4px; background:linear-gradient(#26281f,#1c1d18); box-shadow:0 1px 0 #fff8dc99; }
.mk-article-poll .mk-fader-lcd-value { display:block; min-width:70px; padding:4px 7px 3px; border-radius:2px; background:radial-gradient(ellipse at 50% 30%,#3a2e17,#1f190d); color:#ffbe55; text-shadow:0 0 7px #ffaa3cbf; font:400 28px/1 'MK Anton',Impact,'Arial Narrow',sans-serif; letter-spacing:.05em; text-align:right; }
.mk-article-poll .mk-fader-lcd-value.is-empty { color:#8a6a35; text-shadow:none; }

/* ---------- Kassetten-Duell ---------- */
.mk-article-poll .mk-duel-window { display:flex; flex-direction:column; align-items:center; gap:8px; padding:11px 9px 10px; }
/* Kassette (11.11.2026): Grafik als SVG (components/articlepoll/cassette.htm), Beschriftung als Text darüber.
   Beim Drücken einer Taste laufen die Spulen an: Seite A dreht linksherum, Seite B rechtsherum.
   Die Spule mit mehr Band dreht langsamer (gleiche Bandgeschwindigkeit) – Dauer je Spule in --spin aus variants.js. */
.mk-article-poll .mk-cassette { position:relative; width:240px; max-width:100%; aspect-ratio:240 / 152; filter:drop-shadow(0 5px 6px #00000073); }
.mk-article-poll .mk-cassette-art { display:block; width:100%; height:100%; overflow:visible; }
.mk-article-poll .mk-cassette-names { position:absolute; left:9%; right:9%; top:17.5%; display:flex; justify-content:space-between; gap:8px; color:#1f3f8a; font:700 16px/1.25 'Segoe Print','Bradley Hand','Marker Felt','Comic Sans MS',cursive; text-align:left; pointer-events:none; }
.mk-article-poll .mk-cassette-names span { max-width:50%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transform:rotate(-1.5deg); }
.mk-article-poll .mk-cassette-names span + span { text-align:right; transform:rotate(1deg); }
.mk-article-poll .mk-reel-pack { transition:r .7s ease; }
.mk-article-poll .mk-reel-hub { transform-box:view-box; transform-origin:0 0; }
.mk-article-poll .mk-cassette.is-playing .mk-reel-hub { animation:mk-reel-spin var(--spin,2.4s) linear infinite; }
.mk-article-poll .mk-cassette.is-playing.is-side-b .mk-reel-hub { animation-direction:reverse; }
.mk-article-poll .mk-cassette.is-stopping .mk-reel-hub { animation-play-state:paused; }
.mk-article-poll .mk-reel-hub-a { --spin:var(--spin-a,2.4s); }
.mk-article-poll .mk-reel-hub-b { --spin:var(--spin-b,2.9s); }
@keyframes mk-reel-spin { from { transform:rotate(0deg); } to { transform:rotate(-360deg); } }
/* Reduzierte Bewegung: Die Spulen drehen trotzdem (nur nach Tastendruck, langsam), aber kürzer (variants.js). */
@media (prefers-reduced-motion:reduce) { .mk-article-poll .mk-reel-pack { transition:none; } }
.mk-article-poll .mk-duel-counter { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:6px; width:100%; }
.mk-article-poll .mk-duel-side-name { overflow:hidden; color:#282b20; font:700 10.5px/1.2 Arial,Helvetica,sans-serif; text-align:left; text-overflow:ellipsis; white-space:nowrap; }
.mk-article-poll .mk-duel-side-name:last-child { text-align:right; }
.mk-article-poll .mk-duel-digits { display:flex; align-items:center; gap:3px; padding:3px 4px; border-radius:4px; background:linear-gradient(#26281f,#1c1d18); box-shadow:0 1px 0 #fff8dc99; }
.mk-article-poll .mk-duel-digits b { color:#d9c48a; font:700 9.5px/1 Arial,Helvetica,sans-serif; }
.mk-article-poll .mk-duel-digits i { width:1px; height:16px; margin:0 2px; background:#55564f; }
.mk-article-poll .mk-duel-drum { display:inline-block; min-width:38px; padding:3px 3px 2px; border-radius:2px; background:linear-gradient(#0f0f0d,#2a2a25 50%,#0f0f0d); color:#f4f0e2; font:400 15px/1 'MK Anton',Impact,'Arial Narrow',sans-serif; letter-spacing:.18em; text-align:center; }
.mk-article-poll .mk-duel-bar { position:relative; display:flex; width:100%; height:7px; overflow:hidden; border-radius:4px; box-shadow:inset 0 1px 2px #00000080; }
.mk-article-poll .mk-duel-bar-a { width:var(--a,50%); background:linear-gradient(#f2a531,#c9801a); transition:width .7s ease; }
.mk-article-poll .mk-duel-bar-b { flex:1 1 auto; background:linear-gradient(#4f86c6,#2a63ad); }
.mk-article-poll .mk-duel-bar i { position:absolute; top:0; bottom:0; left:50%; width:2px; margin-left:-1px; background:#2a2822; }
.mk-article-poll .mk-duel-bar.is-empty .mk-duel-bar-a, .mk-article-poll .mk-duel-bar.is-empty .mk-duel-bar-b { background:#c9bf9f; }
.mk-article-poll .mk-duel-keys { gap:8px; margin:0 4px; }
.mk-article-poll .mk-duel-key { flex:1 1 0; min-width:0; width:auto; height:36px; display:flex; align-items:center; justify-content:center; gap:4px; padding:0 5px; border:1px solid #23251e; border-radius:4px; background:linear-gradient(#8d9479,#6a7259 50%,#5d644f); color:#fffbed; font:700 12px/1.2 Arial,Helvetica,sans-serif !important; text-shadow:0 1px 1px #0008; box-shadow:inset 0 1px 0 #ffffff4d,0 3px 0 #2b2e25,0 4px 6px #0005; transform:translateY(-1px); transition:transform .08s ease,box-shadow .08s ease; }
.mk-article-poll .mk-duel-key:hover:enabled { background:linear-gradient(#979e83,#747c62 50%,#666d57); }
.mk-article-poll .mk-duel-key[aria-pressed="true"] { background:linear-gradient(#5a6150,#4c5244); box-shadow:inset 0 2px 5px #0008,0 1px 0 #2b2e25; transform:translateY(2px); }
.mk-article-poll .mk-duel-key:disabled { cursor:default; }
.mk-article-poll .mk-duel-key b { flex:0 0 auto; padding:1px 4px; border-radius:2px; background:#00000040; color:#f3d48a; font:700 10px/1.2 Arial,Helvetica,sans-serif; }
.mk-article-poll .mk-duel-key-text { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mk-article-poll .mk-duel-led { flex:0 0 7px; width:7px; height:7px; border-radius:50%; background:#3a3c33; box-shadow:inset 0 1px 1px #000; }
.mk-article-poll .mk-duel-key[aria-pressed="true"] .mk-duel-led { background:radial-gradient(circle at 35% 35%,#ffe3a1,#f2a531 60%); box-shadow:0 0 7px #f2a531; }
@container (max-width:240px) {
    .mk-article-poll .mk-fader-scale { flex-basis:132px; width:132px; height:173px; }
    .mk-article-poll .mk-duel-key { font-size:11px !important; padding:0 4px; }
}