/* =========================================================
   DISPATCH COMMAND – Leitstellen-Akademie
   Ein einziges Tutorial-Stylesheet. Keine Vollbild-Abdunklung.
   ========================================================= */
.side-tutorial{width:100%;min-height:32px;margin-top:8px;padding:6px 8px;border:1px solid rgba(54,163,255,.34);border-radius:6px;background:rgba(25,91,145,.18);color:#8fd5ff;font-size:10px;text-align:left;cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .15s ease}
.side-tutorial:hover{background:rgba(35,122,190,.28);border-color:rgba(75,184,255,.55)}
.side-tutorial:active{transform:translateY(1px)}

.tutorialOverlay{position:fixed;inset:0;z-index:1200;background:transparent;pointer-events:none}
.tutorialOverlay[hidden]{display:none}
.tutorialSpotlight{position:fixed;z-index:1201;border-radius:9px;border:2px solid #31aaff;background:rgba(49,170,255,.045);box-shadow:0 0 0 2px rgba(49,170,255,.14),0 0 22px rgba(49,170,255,.55),inset 0 0 16px rgba(49,170,255,.08);pointer-events:none;transition:left .18s ease,top .18s ease,width .18s ease,height .18s ease}
.tutorialSpotlight[hidden]{display:none}

.tutorialCard{position:fixed;z-index:1202;width:min(390px,calc(100vw - 24px));box-sizing:border-box;padding:15px 16px 13px;border:1px solid rgba(49,170,255,.58);border-radius:15px;background:linear-gradient(145deg,rgba(7,23,37,.98),rgba(6,17,27,.98));box-shadow:0 24px 80px rgba(0,0,0,.62),inset 0 1px rgba(255,255,255,.08);color:#e9f4fc;pointer-events:auto;transform:none;max-height:calc(100vh - 24px);overflow:auto;transition:left .18s ease,top .18s ease}
.tutorialCard[hidden]{display:none}

.tutorialCard::after{content:"";position:absolute;width:12px;height:12px;background:#071725;border-left:1px solid rgba(49,170,255,.58);border-top:1px solid rgba(49,170,255,.58)}
.tutorialCard--below::after{top:-7px;left:clamp(18px,var(--tutorial-arrow-x),calc(100% - 18px));transform:translateX(-50%) rotate(45deg)}
.tutorialCard--above::after{bottom:-7px;left:clamp(18px,var(--tutorial-arrow-x),calc(100% - 18px));transform:translateX(-50%) rotate(225deg)}
.tutorialCard--right::after{left:-7px;top:clamp(18px,var(--tutorial-arrow-y),calc(100% - 18px));transform:translateY(-50%) rotate(-45deg)}
.tutorialCard--left::after{right:-7px;top:clamp(18px,var(--tutorial-arrow-y),calc(100% - 18px));transform:translateY(-50%) rotate(135deg)}
.tutorialCard--center::after{display:none}

.tutorialProgress{display:flex;align-items:center;gap:9px;color:#78a4c5;font-size:8px;font-weight:800;letter-spacing:.12em}
.tutorialProgress i{height:4px;flex:1;border-radius:10px;background:#152b3d;overflow:hidden}.tutorialProgress i b{display:block;height:100%;width:10%;background:linear-gradient(90deg,#168cff,#52c7ff);transition:width .2s}
.tutorialIcon{width:45px;height:45px;margin:11px 0 7px;display:grid;place-items:center;border-radius:12px;background:#0b3150;border:1px solid #176da5;font-size:24px;box-shadow:0 0 24px rgba(28,146,236,.16)}
.tutorialKicker{font-size:8px;color:#44baff;font-weight:900;letter-spacing:.16em}.tutorialCard h2{margin:4px 0 7px;font-size:20px;line-height:1.15}.tutorialCard>p{margin:0;color:#b4c7d6;font-size:11px;line-height:1.5}
.tutorialTask{display:grid;gap:3px;margin-top:10px;padding:9px 10px;border:1px solid rgba(54,153,219,.24);border-radius:9px;background:rgba(20,92,137,.12);font-size:10px;line-height:1.4}.tutorialTask b{color:#79cfff;font-size:9px;letter-spacing:.05em}.tutorialTask span{color:#e1edf5}.tutorialHint{margin-top:7px;color:#8198ab;font-size:9px;line-height:1.4}
.tutorialActions{display:flex;justify-content:space-between;gap:8px;margin-top:11px}.tutorialActions .btn{min-height:34px;font-size:9px}.tutorialActions .btn.primary{box-shadow:0 7px 20px rgba(25,130,235,.22)}
.tutorialRunning .tutorialCard,.tutorialRunning .tutorialSpotlight{filter:none}

@media(max-width:700px){.side-tutorial{font-size:0;text-align:center;padding:5px}.side-tutorial::first-letter{font-size:15px}.tutorialCard{width:calc(100vw - 18px);max-height:calc(100vh - 18px);padding:14px}.tutorialSpotlight{border-radius:8px}.tutorialCard h2{font-size:18px}.tutorialCard>p{font-size:10px}.tutorialTask{font-size:9px}.tutorialActions .btn{flex:1}}

/* Während der Ausbildung wird das Funkgerät geschlossen und die Bedienung erfolgt unter Maßnahmen. */
.tutorialRunning #radioDrawer.open{display:none!important;}
.tutorialRunning .tutorialCard{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}