@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: block; src: url('fonts/barlow-condensed-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: block; src: url('fonts/barlow-condensed-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 800; font-display: block; src: url('fonts/barlow-condensed-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: block; src: url('fonts/barlow-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: block; src: url('fonts/barlow-latin-600-normal.woff2') format('woff2'); }
@keyframes dcRise {
  0% { transform: translateY(0) scale(.6); opacity: 0; }
  12% { opacity: 1; }
  85% { opacity: .9; }
  100% { transform: translateY(calc(var(--rise) * -1)) scale(1); opacity: 0; }
}
@keyframes dcSteam {
  0% { transform: translateY(24px) scale(.7); opacity: 0; }
  30% { opacity: .5; }
  100% { transform: translateY(-80px) scale(1.5); opacity: 0; }
}
@keyframes dcBlink {
  0%, 92%, 100% { transform: scaleY(1); }
  96% { transform: scaleY(.1); }
}
@keyframes dcBreath {
  0%, 100% { transform: scale(1, 1); }
  50% { transform: scale(1.012, 1.022); }
}
@keyframes dcWave {
  0%, 78%, 100% { transform: rotate(0deg); }
  84% { transform: rotate(22deg); }
  90% { transform: rotate(4deg); }
  95% { transform: rotate(18deg); }
}
@keyframes dcBrow {
  0%, 68%, 100% { transform: translateY(0); }
  74%, 88% { transform: translateY(-6px); }
}
@keyframes dcStache {
  0%, 86%, 100% { transform: scale(1, 1); }
  90% { transform: scale(1.05, .92); }
  95% { transform: scale(.98, 1.05); }
}
@keyframes dcDrip {
  0% { transform: translateY(0) scale(.6); opacity: 0; }
  20% { opacity: .95; }
  100% { transform: translateY(34px) scale(1); opacity: 0; }
}
@keyframes dcPulseY {
  0%, 100% { box-shadow: 0 6px 0 #A88C00, 0 0 0 0 rgba(255,212,0,0); }
  50% { box-shadow: 0 6px 0 #A88C00, 0 0 0 12px rgba(255,212,0,.28); }
}
@keyframes dcPulseR {
  0%, 100% { box-shadow: 0 6px 0 #8E0014, 0 0 0 0 rgba(214,0,28,0); }
  50% { box-shadow: 0 6px 0 #8E0014, 0 0 0 12px rgba(214,0,28,.35); }
}
@keyframes dcShrink {
  from { width: 100%; }
  to { width: 0%; }
}
@keyframes dcFill {
  from { transform: scaleY(.04); }
  to { transform: scaleY(.62); }
}
@keyframes dcRing {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: 503; }
}
@keyframes dcWaves {
  0%, 100% { opacity: .15; }
  50% { opacity: 1; }
}
@keyframes dcTap {
  0%, 100% { transform: translate(0px, 0px) rotate(-14deg); }
  50% { transform: translate(34px, -8px) rotate(-6deg); }
}
.bb { position: absolute; bottom: -14px; border-radius: 50%; animation: dcRise 7s ease-in infinite; }
.st { position: absolute; border-radius: 50%; filter: blur(9px); animation: dcSteam 5s ease-out infinite; }

/* Horst Motions (aus dem Charakterblatt) */
.mb { transform-box: view-box; transform-origin: 100px 228px; }
.ms { transform-box: view-box; transform-origin: 100px 231px; }
.ml { transform-box: view-box; transform-origin: 62px 153px; }
.mr { transform-box: view-box; transform-origin: 138px 153px; }
.mh { transform-box: view-box; transform-origin: 100px 56px; }
.mc { transform-box: view-box; transform-origin: -14px 214px; }
.mq { transform-box: view-box; transform-origin: -21px 168px; }
.mv { transform-box: view-box; transform-origin: 0px 232px; }
.mf { transform-box: fill-box; transform-origin: center; }
@keyframes mHop1 {
  0%, 52%, 100% { transform: translateY(0px); }
  12%, 36% { transform: translateY(-6px); }
  24%, 48% { transform: translateY(0px); }
}
@keyframes mWave1 {
  0%, 56%, 100% { transform: rotate(0deg); }
  8%, 28%, 48% { transform: rotate(40deg); }
  18%, 38% { transform: rotate(20deg); }
}
@keyframes mArc1 {
  0%, 6% { opacity: 0; transform: translateX(6px); }
  22%, 40% { opacity: 1; transform: translateX(0px); }
  56%, 100% { opacity: 0; transform: translateX(-4px); }
}
@keyframes mTip2 {
  0%, 14%, 100% { transform: translate(0px, 0px) rotate(0deg); }
  26%, 60% { transform: translate(-12px, -16px) rotate(-18deg); }
  72% { transform: translate(0px, 0px) rotate(0deg); }
}
@keyframes mOpen2 {
  0%, 24%, 64%, 100% { opacity: 1; }
  28%, 60% { opacity: 0; }
}
@keyframes mShut2 {
  0%, 24%, 64%, 100% { opacity: 0; }
  28%, 60% { opacity: 1; }
}
@keyframes mSpark2 {
  0%, 28%, 66%, 100% { opacity: 0; transform: scale(.2) rotate(0deg); }
  36% { opacity: 1; transform: scale(1.25) rotate(20deg); }
  50% { opacity: 1; transform: scale(1) rotate(30deg); }
}
@keyframes mJump3 {
  0% { transform: translateY(0px) scale(1.06, .93); }
  38% { transform: translateY(-30px) scale(.96, 1.05); }
  72% { transform: translateY(0px) scale(1.07, .92); }
  86% { transform: translateY(0px) scale(1, 1); }
  100% { transform: translateY(0px) scale(1.06, .93); }
}
@keyframes mShadow3 {
  0%, 72%, 100% { transform: scale(1, 1); opacity: 1; }
  38% { transform: scale(.7, .7); opacity: .55; }
}
@keyframes mUpL3 {
  0%, 100% { transform: rotate(16deg); }
  38% { transform: rotate(66deg); }
  72% { transform: rotate(10deg); }
}
@keyframes mUpR3 {
  0%, 100% { transform: rotate(-16deg); }
  38% { transform: rotate(-66deg); }
  72% { transform: rotate(-10deg); }
}
@keyframes mHelm3 {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  46% { transform: translateY(-8px) rotate(5deg); }
  78% { transform: translateY(1px) rotate(0deg); }
}
@keyframes mConf {
  0%, 12% { opacity: 0; transform: translate(0px, 0px) rotate(0deg) scale(.4); }
  26% { opacity: 1; }
  74% { opacity: 1; transform: translate(var(--dx), var(--dy)) rotate(var(--dr)) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 26px)) rotate(var(--dr)) scale(1); }
}
@keyframes mRumble4 {
  0%, 100% { transform: translateX(0px); }
  50% { transform: translateX(.8px); }
}
@keyframes mCup4 {
  0% { opacity: 0; }
  6%, 88% { opacity: 1; }
  96%, 100% { opacity: 0; }
}
@keyframes mLiq4 {
  0%, 8% { transform: scaleY(.02); }
  80%, 100% { transform: scaleY(.86); }
}
@keyframes mStream4 {
  0%, 6% { opacity: 0; }
  10%, 80% { opacity: 1; }
  86%, 100% { opacity: 0; }
}
@keyframes mFlow {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -22; }
}
@keyframes mCup5 {
  0%, 10% { opacity: 1; transform: translate(0px, 0px) rotate(0deg); }
  28% { opacity: 1; transform: translate(-22px, -40px) rotate(-14deg); }
  38% { opacity: 0; transform: translate(-46px, -34px) rotate(-20deg); }
  44% { opacity: 0; transform: translate(-8px, -70px) rotate(0deg); }
  58% { opacity: 1; transform: translate(0px, 4px) rotate(0deg); }
  62%, 100% { opacity: 1; transform: translate(0px, 0px) rotate(0deg); }
}
@keyframes mLiq5 {
  0%, 36% { transform: scaleY(.86); }
  40%, 60% { transform: scaleY(.02); }
  82%, 100% { transform: scaleY(.86); }
}
@keyframes mStream5 {
  0%, 60% { opacity: 0; }
  66%, 82% { opacity: 1; }
  88%, 100% { opacity: 0; }
}
@keyframes mArm5 {
  0%, 6%, 46%, 100% { transform: rotate(-10deg); }
  16%, 34% { transform: rotate(26deg); }
}
@keyframes mLook5 {
  0%, 10% { transform: translate(-3px, 3px); }
  30%, 44% { transform: translate(-5px, -4px); }
  60%, 100% { transform: translate(-3px, 3px); }
}
@keyframes mSalute6 {
  0%, 8%, 84%, 100% { transform: rotate(0deg); }
  20%, 68% { transform: rotate(-74deg); }
}
@keyframes mHelm6 {
  0%, 12%, 80%, 100% { transform: rotate(0deg) translateY(0px); }
  22%, 66% { transform: rotate(5deg) translateY(2px); }
}
@keyframes mQr6 {
  0%, 18% { opacity: 0; transform: translate(35px, -15px) scale(.1); }
  32% { opacity: 1; transform: translate(0px, 0px) scale(1.1); }
  38%, 74% { opacity: 1; transform: translate(0px, 0px) scale(1); }
  90%, 100% { opacity: 0; transform: translate(-8px, 8px) scale(.9); }
}
@keyframes mShake7 {
  0%, 30%, 100% { transform: translateX(0px) rotate(0deg); }
  3%, 11%, 19% { transform: translateX(-4px) rotate(-2.5deg); }
  7%, 15%, 23% { transform: translateX(4px) rotate(2.5deg); }
  27% { transform: translateX(-2px) rotate(-1deg); }
}
@keyframes mFlailL7 {
  0%, 30%, 100% { transform: rotate(0deg); }
  4%, 12%, 20% { transform: rotate(38deg); }
  8%, 16%, 24% { transform: rotate(-8deg); }
}
@keyframes mFlailR7 {
  0%, 30%, 100% { transform: rotate(0deg); }
  4%, 12%, 20% { transform: rotate(-38deg); }
  8%, 16%, 24% { transform: rotate(8deg); }
}
@keyframes mBeacon7 {
  0%, 100% { opacity: .1; }
  50% { opacity: 1; }
}
@keyframes mSweat7 {
  0%, 20% { opacity: 0; transform: translateY(0px); }
  30% { opacity: 1; transform: translateY(0px); }
  80% { opacity: 1; transform: translateY(26px); }
  100% { opacity: 0; transform: translateY(30px); }
}
@keyframes mGasp7 {
  0%, 100% { transform: scale(1, 1); }
  50% { transform: scale(1.12, .9); }
}
@keyframes mSnore8 {
  0%, 100% { transform: scale(1, 1); }
  50% { transform: scale(1.02, 1.035); }
}
@keyframes mNod8 {
  0%, 50%, 100% { transform: rotate(0deg) translateY(0px); }
  34% { transform: rotate(9deg) translateY(3px); }
  40% { transform: rotate(-4deg) translateY(-2px); }
}
@keyframes mAwake8 {
  0%, 37%, 52%, 100% { opacity: 0; }
  40%, 49% { opacity: 1; }
}
@keyframes mAsleep8 {
  0%, 37%, 52%, 100% { opacity: 1; }
  40%, 49% { opacity: 0; }
}
@keyframes mZ {
  0% { opacity: 0; transform: translate(0px, 0px) scale(.6); }
  20% { opacity: 1; }
  80% { opacity: 1; transform: translate(16px, -26px) scale(1); }
  100% { opacity: 0; transform: translate(20px, -32px) scale(1); }
}

/* ---------- Basis ---------- */
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; overscroll-behavior: none; }
* { -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
button { font-family: inherit; touch-action: manipulation; }
#wrap { position: fixed; inset: 0; background: #000; overflow: hidden; }
#stage { position: absolute; left: 50%; top: 50%; width: 800px; height: 1280px; transform-origin: 50% 50%; box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden; background: #141517; color: #F5F5F5; font-family: Barlow, system-ui, sans-serif; touch-action: manipulation; }
[hidden] { display: none !important; }
#sfill { transition: width .45s ease; }
#hdrBig, #hdrSmall { display: flex; flex-direction: column; flex: none; }
.mode-start #hdrSmall, .mode-sel #hdrBig, .mode-order #hdrBig, .mode-other #hdrBig { display: none; }
.mode-start #hdrBig { display: flex; }
.bb { position: absolute; bottom: -14px; border-radius: 50%; animation: dcRise 7s ease-in infinite; }
.st { position: absolute; border-radius: 50%; filter: blur(9px); animation: dcSteam 5s ease-out infinite; }
.hsvg { display: block; }

/* ---------- Bestell-Hauptbereich ---------- */
#mOrder { flex: 1; min-height: 0; box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; padding: 16px 32px 28px; }
.mode-start #mOrder { padding: 18px 32px 12px; }
#mOther { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#mOther > main { flex: 1; min-height: 0; }
#cardsRow { display: flex; gap: 24px; }
.col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#col-w { order: 0; } #col-p { order: 1; }
.card { position: relative; overflow: hidden; border-radius: 14px; border: 4px solid #3A3D42; background: #0E0F11; display: block; box-sizing: border-box; width: 100%; padding: 0; color: inherit; cursor: pointer; flex: 1; min-height: 0; --rise: 480px; --bar: 108px; --nfs: 50px; --pfs: 30px; outline: none; }
.card:focus-visible { outline: 4px solid #FFFFFF; outline-offset: 2px; }
.card.sel { border-color: #FFD400; box-shadow: 0 0 0 3px #D6001C, 0 12px 22px rgba(0,0,0,.55); z-index: 2; }
.card .art { position: absolute; left: 0; top: 0; right: 0; bottom: 0; }
.card .art > svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.card.off .art { filter: saturate(.25); }
.card .gauge { position: absolute; left: 18px; top: 40px; bottom: calc(var(--bar) + 22px); width: 8px; border-radius: 4px; background: rgba(255,255,255,.12); }
.card .top { position: absolute; left: 0; right: 0; top: 0; height: 14px; background: repeating-linear-gradient(-45deg, #FFD400 0 10px, #141517 10px 20px); }
.card .bar { position: absolute; left: 0; right: 0; bottom: 0; height: var(--bar); background: #FFD400; color: #111; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; text-transform: uppercase; }
.card.off .bar { background: #8C8F95; }
.card .nm { font-size: var(--nfs); line-height: calc(var(--nfs) + 4px); letter-spacing: 1px; }
.card .pr { font-size: var(--pfs); line-height: calc(var(--pfs) + 2px); }
.card .offov { display: none; position: absolute; left: 0; right: 0; top: 14px; bottom: var(--bar); background: rgba(14,15,17,.6); flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 0 20px; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; text-transform: uppercase; }
.card.off .offov { display: flex; }
.offov .o1 { font-size: 46px; line-height: 48px; letter-spacing: 1px; }
.offov .o2 { font-size: 34px; line-height: 36px; color: #FFD400; }
.offov .o3 { width: 200px; height: 12px; border-radius: 6px; background: #3A3D42; overflow: hidden; display: block; }
.offov .o3 span { display: block; width: 62%; height: 100%; background: #FFD400; }
.card .badge { display: none; position: absolute; right: 14px; top: 28px; min-width: 64px; height: 52px; box-sizing: border-box; padding: 0 10px; border-radius: 26px; border: 4px solid #141517; background: #FFD400; color: #111; font: 800 34px/44px 'Barlow Condensed', sans-serif; text-align: center; }
.mode-order .card .badge.has { display: block; }

/* Start und Bestellung: Karten gleich gross */
.mode-start #cardsRow { flex: 1; min-height: 0; }
.mode-order #cardsRow { flex: 0 1 540px; min-height: 220px; }
.mode-order .card { --rise: 400px; }
/* Auswahl */
.mode-sel #cardsRow { align-items: flex-start; flex: none; }
.mode-sel .col { flex: none; width: 252px; }
.mode-sel .col.sel { width: 460px; }
.mode-sel .card { flex: none; height: 400px; --rise: 260px; --bar: 100px; --nfs: 38px; --pfs: 26px; }
.mode-sel .card.sel { --nfs: 48px; --pfs: 28px; }
.drawer { display: none; position: relative; z-index: 1; margin-top: -22px; box-sizing: border-box; padding: 44px 18px 16px; border-radius: 0 0 14px 14px; background: #202226; box-shadow: inset 0 16px 16px -12px rgba(0,0,0,.7); flex-direction: column; gap: 12px; }
.mode-sel .col.sel .drawer { display: flex; }
.drawer .dh { display: flex; align-items: baseline; justify-content: space-between; }
.drawer .dt { font: 800 32px/36px 'Barlow Condensed', sans-serif; letter-spacing: 1px; text-transform: uppercase; }
.drawer .dp { font: 800 30px/36px 'Barlow Condensed', sans-serif; color: #FFD400; }
.drawer .segs { display: flex; gap: 8px; }
.drawer .cap { font: 600 22px/26px Barlow, sans-serif; color: #B8BCC2; min-height: 26px; }
.seg { flex: 1; height: 72px; box-sizing: border-box; padding: 0 4px; border-radius: 10px; font: 800 28px/30px 'Barlow Condensed', sans-serif; letter-spacing: .5px; text-transform: uppercase; display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; border: 3px solid #4A4E55; background: transparent; color: #F5F5F5; }
.seg svg { display: none; }
.seg[aria-checked="true"] { border: none; background: #FFD400; color: #111; }
.seg[aria-checked="true"] svg { display: block; }
#infoBtn, #addBtn, #spacer, #panel, #payBtn { display: none; }
.mode-start #infoBtn { display: flex; }
.mode-sel #addBtn { display: flex; }
.mode-sel #spacer { display: block; flex: 1; min-height: 0; }
.mode-sel #panel.has, .mode-order #panel.has { display: flex; }
.mode-sel #panel { flex: none; }
.mode-order #panel { flex: 1 1 0; min-height: 0; }
.mode-sel #payBtn.has, .mode-order #payBtn.has { display: flex; }
.mode-order #payBtn { animation: dcPulseY 2.2s ease-in-out infinite; }
#rows button[disabled] { opacity: .3; }
button { cursor: pointer; }
button:active:not([disabled]), .card:active, #reader:active { filter: brightness(1.14); }
#addBtn:active, #payBtn:active { transform: translateY(3px); }

/* ---------- Overlays ---------- */
#ovConfirm, #ovInfo, #ovIdle, #ovSnack { position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; }
#ovConfirm > *, #ovInfo > *, #ovIdle > *, #ovSnack > * { pointer-events: auto; }
#ovSnack > div[role="status"] { pointer-events: auto; }
#ovInfo { z-index: 20; } #ovConfirm { z-index: 21; } #ovIdle { z-index: 22; } #ovSnack { z-index: 10; }
#ovSnack:empty, #ovConfirm:empty, #ovInfo:empty, #ovIdle:empty { display: none; }

/* ---------- Moderator ---------- */
#modZone { position: absolute; left: 0; top: 0; width: 140px; height: 70px; z-index: 30; }
#mod { position: absolute; inset: 0; z-index: 40; background: rgba(0,0,0,.94); color: #F5F5F5; font: 600 28px/36px Barlow, sans-serif; padding: 44px 40px; box-sizing: border-box; overflow-y: auto; }
#mod h2 { font: 800 56px/60px 'Barlow Condensed', sans-serif; text-transform: uppercase; margin: 0 0 6px; color: #FFD400; }
#mod .mrow { margin: 20px 0 6px; font-weight: 700; color: #B8BCC2; text-transform: uppercase; letter-spacing: 1px; font-size: 22px; }
#mod .opts { display: flex; gap: 10px; flex-wrap: wrap; }
#mod .opts button, #mod .acts button { min-height: 64px; padding: 0 22px; border-radius: 10px; border: 3px solid #4A4E55; background: transparent; color: #F5F5F5; font: 800 28px/30px 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .5px; }
#mod .opts button[aria-pressed="true"] { background: #FFD400; border-color: #FFD400; color: #111; }
#mod .acts { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
#mod .acts .go { background: #FFD400; color: #111; border-color: #FFD400; }
#mod .stat { margin-top: 18px; font-size: 22px; line-height: 28px; color: #B8BCC2; }

/* ---------- Startbildschirm ---------- */
#startOv { position: fixed; inset: 0; z-index: 100; background: #000; display: flex; align-items: center; justify-content: center; font-family: Barlow, system-ui, sans-serif; color: #F5F5F5; }
.so-card { width: min(560px, 90vw); text-align: center; background: #141517; border-radius: 16px; overflow: hidden; padding-bottom: 36px; }
.so-stripe { height: 22px; background: repeating-linear-gradient(-45deg, #FFD400 0 18px, #141517 18px 36px); }
.so-card h1 { margin: 28px 0 0; font: 800 80px/84px 'Barlow Condensed', sans-serif; text-transform: uppercase; }
.so-card p { margin: 6px 24px 0; font: 600 22px/28px Barlow, sans-serif; color: #B8BCC2; }
.so-card button { margin-top: 28px; height: 96px; padding: 0 44px; border: none; border-radius: 10px; background: #FFD400; box-shadow: 0 6px 0 #A88C00; color: #111; font: 800 44px/48px 'Barlow Condensed', sans-serif; letter-spacing: 1.5px; text-transform: uppercase; }
.so-card .so-hint { margin-top: 26px; font-size: 18px; line-height: 24px; }