/* ============================================
   Meldo Note Writer - Frontend Styles
   BuddyBoss Theme Compatible
   ============================================ */

/* Die Schrift kommt aus dem Designpaket (MNW_Design::schrift_url()),
   nicht mehr aus einem @import. Ein @import lädt am Designpaket vorbei
   und hält ausserdem den Seitenaufbau auf. */

/* CSS Variables - Meldo Design System */
:root {
    --mnw-turkis: var(--mnwd-akzent) !important;
    --mnw-lime: var(--mnwd-akzent2) !important;
    --mnw-dark: #111416 !important;
    --mnw-bg: #FAF8F3 !important;
    --mnw-white: #FFFFFF !important;
    --mnw-error: var(--mnwd-fehler) !important;
    --mnw-warning: var(--mnwd-warnung) !important;
    --mnw-success: var(--mnwd-erfolg) !important;
    --mnw-shadow: 0 4px 20px var(--mnwd-akzent-a12) !important;
    --mnw-shadow-hover: 0 8px 30px var(--mnwd-akzent-a2) !important;
    --mnw-radius: 16px !important;
    --mnw-radius-sm: 10px !important;
}

/* Reset BuddyBoss overrides */
.mnw-container,
.mnw-container * {
    box-sizing: border-box !important;
}

/* Main Container */
.mnw-container {
    font-family: var(--mnwd-schrift-text), var(--mnwd-schrift-titel), -apple-system, BlinkMacSystemFont, sans-serif !important;
    max-width: 960px !important;
    margin: 0 auto !important;
    padding: 24px !important;
    background: transparent !important;
    color: var(--mnw-dark) !important;
    /* ══════════════════════════════════════════════════════════════
     * Diese eine Zeile war der Grund, warum der klebende Vorrat einer
     * Zuordnungsaufgabe NICHT klebte (Manuel, 3.183.0: «Klebt noch
     * nicht oben!»).
     *
     * «overflow-x:hidden» klemmt nicht nur waagrecht ab. Sobald EINE
     * Achse nicht «visible» ist, rechnet der Browser die andere auf
     * «auto» — der Kasten wird damit zum Rollkasten. «position:sticky»
     * klebt immer am nächsten rollenden Vorfahren, und das ist dann
     * dieser hier. Er hat aber keine Höhenbegrenzung und rollt nie.
     * Ergebnis: Der Vorrat klebt an etwas, das stillsteht, und wandert
     * mit der Seite aus dem Bild. Gemessen: nach dem Scrollen stand er
     * bei −606 Pixeln.
     *
     * «clip» klemmt genauso ab, macht aber KEINEN Rollkasten daraus.
     * Die senkrechte Achse bleibt «visible», und der Vorrat klebt
     * wieder an der Seite — gemessen: 0 statt −606.
     *
     * Beide Zeilen bleiben stehen, in dieser Reihenfolge: Ein älterer
     * Browser (Safari vor 16) kennt «clip» nicht, überspringt die
     * Zeile und behält «hidden». Dort ist es dann wie bisher — nicht
     * schlechter, nur nicht besser.
     * ══════════════════════════════════════════════════════════════ */
    overflow-x: hidden !important;
    overflow-x: clip !important;
}

/* ══════════════════════════════════════════════════════════════════
 * v3.185.0 — Dieselbe Falle im LearnDash-Quiz.
 *
 * Dort baut nicht game.js die Aufgabe, sondern quiz-init.js, und dessen
 * constrainContainerWidth() setzt auf zwei Ebenen «overflow:hidden»
 * DIREKT ins Element:
 *
 *     .mnw-free-choice-editor   container.style.overflow = 'hidden'
 *       … .mnw-quiz-area        quizArea.style.overflow  = 'hidden'
 *           .mnwx-zo
 *
 * Zwei stillstehende Rollkästen — der Vorrat stand nach dem Scrollen
 * bei −523 Pixeln.
 *
 * quiz-init.js gehört zu den elf Dateien der Spielmaschine, die
 * byteweise unverändert bleiben. Eine Stylesheet-Regel mit «!important»
 * sticht aber einen Stil ohne «!important», der im Element steht. Also
 * wird es hier gelöst, nicht dort.
 *
 * AUSDRÜCKLICH NUR, wo eine Zuordnungsaufgabe drinsteht. Bei den
 * Musiktypen schneidet «hidden» auch senkrecht ab — Tastatur, Notenzeile
 * und Aufklapper verlassen sich womöglich darauf. Meldos Quizze bleiben
 * damit genau, wie sie waren.
 *
 * Ohne «:has()» (Safari vor 15.4) oder ohne «clip» fällt die Regel weg
 * bzw. bleibt «hidden» stehen — dann ist es wie bisher, nicht schlechter.
 * ══════════════════════════════════════════════════════════════════ */
.mnw-free-choice-editor:has(.mnwx-zo),
.mnw-quiz-area:has(.mnwx-zo) {
    overflow-x: clip !important;
    overflow-y: visible !important;
}

/* Notice */
.mnw-notice {
    padding: 20px 24px !important;
    background: linear-gradient(135deg, #FFF3CD, #FFF9E6) !important;
    border-radius: var(--mnw-radius) !important;
    text-align: center !important;
    color: #856404 !important;
    font-size: 15px !important;
    border-left: 4px solid var(--mnwd-warnung) !important;
}

/* Header */
.mnw-header {
    text-align: center !important;
    margin-bottom: 28px !important;
}

.mnw-title {
    font-family: var(--mnwd-schrift-titel) !important;
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: var(--mnw-turkis) !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
}

/* Stats */
.mnw-stats {
    display: flex !important;
    justify-content: center !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
}

.mnw-stat {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: var(--mnw-white) !important;
    padding: 10px 20px !important;
    border-radius: 24px !important;
    box-shadow: var(--mnw-shadow) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    color: var(--mnw-dark) !important;
}

.mnw-stat-score { border-left: 3px solid var(--mnw-lime) !important; }
.mnw-stat-streak { border-left: 3px solid var(--mnw-turkis) !important; }

/* Task Card */
.mnw-task-card {
    background: var(--mnw-white) !important;
    border-radius: var(--mnw-radius) !important;
    padding: 24px !important;
    margin-bottom: 24px !important;
    box-shadow: var(--mnw-shadow) !important;
    border-left: 5px solid var(--mnw-turkis) !important;
}

.mnw-task-badge {
    display: inline-block !important;
    background: linear-gradient(135deg, var(--mnw-turkis), var(--mnw-lime)) !important;
    color: var(--mnw-white) !important;
    padding: 6px 14px !important;
    border-radius: 14px !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    margin-bottom: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.mnw-task-text {
    font-size: 1.25rem !important;
    color: var(--mnw-dark) !important;
    margin: 0 !important;
    line-height: 1.6 !important;
    font-weight: 500 !important;
}

.mnw-task-text b,
.mnw-task-text strong {
    color: var(--mnw-turkis) !important;
    font-weight: 700 !important;
}

.mnw-task-hint {
    margin-top: 12px !important;
    padding: 12px 16px !important;
    background: var(--mnwd-akzent-a08) !important;
    border-radius: var(--mnw-radius-sm) !important;
    font-size: 0.9rem !important;
    color: var(--mnw-turkis) !important;
}

/* Game Area */
.mnw-game-area {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

/* Toolbar */
.mnw-toolbar {
    background: var(--mnw-white) !important;
    border-radius: var(--mnw-radius) !important;
    padding: 12px 16px !important;
    box-shadow: var(--mnw-shadow) !important;
    margin-bottom: 16px !important;
}

/* Compact toolbar layout */
.mnw-toolbar-compact .mnw-tool-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    align-items: flex-start !important;
}

.mnw-tool-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.mnw-tool-section:last-child {
    margin-bottom: 0 !important;
}

.mnw-tool-label {
    font-size: 0.65rem !important;
    color: #888 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}

.mnw-tool-buttons {
    display: flex !important;
    gap: 4px !important;
}

.mnw-acc-buttons {
    gap: 4px !important;
}

/* Key Signature Select */
.mnw-key-select {
    padding: 6px 10px !important;
    border: 2px solid #E0E0E0 !important;
    border-radius: 8px !important;
    background: var(--mnw-bg) !important;
    color: var(--mnw-dark) !important;
    font-size: 0.85rem !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    min-height: 36px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

.mnw-key-select:hover {
    border-color: var(--mnw-turkis) !important;
    background: var(--mnwd-akzent-a1) !important;
}

.mnw-key-select:focus {
    outline: none !important;
    border-color: var(--mnw-turkis) !important;
    box-shadow: 0 0 0 3px var(--mnwd-akzent-a2) !important;
}

/* Tool Buttons - Compact Style */
.mnw-container button.mnw-tool,
button.mnw-tool {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--mnw-bg) !important;
    border: 2px solid #E0E0E0 !important;
    border-radius: 8px !important;
    padding: 6px 10px !important;
    cursor: pointer !important;
    font-size: 1.2rem !important;
    line-height: 1 !important;
    transition: all 0.2s ease !important;
    color: var(--mnw-dark) !important;
    opacity: 1 !important;
    min-height: 36px !important;
    min-width: 36px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Hidden tools (when hide unused tools is enabled) */
.mnw-container button.mnw-tool.mnw-tool-hidden,
button.mnw-tool.mnw-tool-hidden {
    display: none !important;
}

/* Hidden toolbar sections */
.mnw-tool-section.mnw-section-hidden {
    display: none !important;
}

.mnw-container button.mnw-tool:hover,
button.mnw-tool:hover {
    background: var(--mnwd-akzent-a1) !important;
    border-color: var(--mnw-turkis) !important;
    transform: translateY(-2px) !important;
}

.mnw-container button.mnw-tool.active,
button.mnw-tool.active {
    background: linear-gradient(135deg, var(--mnw-turkis), var(--mnwd-akzent-l33)) !important;
    border-color: var(--mnw-turkis) !important;
    color: var(--mnw-white) !important;
    box-shadow: 0 4px 12px var(--mnwd-akzent-a3) !important;
}

/* Disabled tool buttons */
.mnw-container button.mnw-tool:disabled,
button.mnw-tool:disabled,
.mnw-container button.mnw-tool.disabled,
button.mnw-tool.disabled {
    opacity: 0.4 !important;
    cursor: default !important;
}

/* Undo/Redo buttons */
.mnw-container button.mnw-undo-btn,
.mnw-container button.mnw-redo-btn,
button.mnw-undo-btn,
button.mnw-redo-btn {
    font-size: 1.2rem !important;
    font-weight: 700 !important;
}

/* Dotted toggle button - violet when active */
.mnw-container button.mnw-dot-toggle,
button.mnw-dot-toggle {
    font-size: 0.6rem !important;
}

.mnw-container button.mnw-dot-toggle.active,
button.mnw-dot-toggle.active {
    background: linear-gradient(135deg, var(--mnw-turkis, var(--mnwd-akzent)), var(--mnwd-akzent-l33)) !important;
    border-color: var(--mnw-turkis, var(--mnwd-akzent)) !important;
    color: var(--mnw-white) !important;
    box-shadow: 0 4px 12px var(--mnwd-akzent-a3) !important;
}

.mnw-container button.mnw-dot-toggle:hover,
button.mnw-dot-toggle:hover {
    background: var(--mnwd-akzent-a1) !important;
    border-color: var(--mnw-turkis, var(--mnwd-akzent)) !important;
}

/* Triplet toggle button - orange/gold when active */
.mnw-container button.mnw-triplet-toggle,
button.mnw-triplet-toggle {
    font-weight: 700 !important;
    font-size: 1.1rem !important;
}

.mnw-container button.mnw-triplet-toggle.active,
button.mnw-triplet-toggle.active {
    background: linear-gradient(135deg, #F59E0B, #FBBF24) !important;
    border-color: var(--mnwd-warnung) !important;
    color: var(--mnw-white) !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3) !important;
}

.mnw-container button.mnw-triplet-toggle:hover,
button.mnw-triplet-toggle:hover {
    background: rgba(245, 158, 11, 0.1) !important;
    border-color: var(--mnwd-warnung) !important;
}

/* Tie toggle button - purple when active */
.mnw-container button.mnw-tie-toggle,
button.mnw-tie-toggle {
    font-weight: 700 !important;
    font-size: 1.3rem !important;
    line-height: 1 !important;
}

.mnw-container button.mnw-tie-toggle.active,
button.mnw-tie-toggle.active {
    background: linear-gradient(135deg, var(--mnw-turkis, var(--mnwd-akzent)), var(--mnwd-akzent-l33)) !important;
    border-color: var(--mnw-turkis, var(--mnwd-akzent)) !important;
    color: var(--mnw-white) !important;
    box-shadow: 0 4px 12px var(--mnwd-akzent-a3) !important;
}

.mnw-container button.mnw-tie-toggle:hover,
button.mnw-tie-toggle:hover {
    background: var(--mnwd-akzent-a1) !important;
    border-color: var(--mnw-turkis, var(--mnwd-akzent)) !important;
}

/* Tie flip button - same styling as tie toggle */
.mnw-container button.mnw-tie-flip,
button.mnw-tie-flip {
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    line-height: 1 !important;
}

.mnw-container button.mnw-tie-flip.active,
button.mnw-tie-flip.active {
    background: linear-gradient(135deg, var(--mnw-turkis, var(--mnwd-akzent)), var(--mnwd-akzent-l33)) !important;
    border-color: var(--mnw-turkis, var(--mnwd-akzent)) !important;
    color: var(--mnw-white) !important;
    box-shadow: 0 4px 12px var(--mnwd-akzent-a3) !important;
}

.mnw-container button.mnw-tie-flip:hover,
button.mnw-tie-flip:hover {
    background: var(--mnwd-akzent-a1) !important;
    border-color: var(--mnw-turkis, var(--mnwd-akzent)) !important;
}

/* Eraser toggle button - red when active */
.mnw-container button.mnw-eraser-toggle,
button.mnw-eraser-toggle {
    font-size: 1.2rem !important;
}

.mnw-container button.mnw-eraser-toggle.active,
button.mnw-eraser-toggle.active {
    background: linear-gradient(135deg, #E74C3C, #C0392B) !important;
    border-color: var(--mnwd-fehler) !important;
    color: var(--mnw-white) !important;
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3) !important;
}

.mnw-container button.mnw-eraser-toggle.active .mnw-eraser-icon,
button.mnw-eraser-toggle.active .mnw-eraser-icon {
    stroke: white !important;
}

.mnw-container button.mnw-eraser-toggle:hover,
button.mnw-eraser-toggle:hover {
    background: rgba(231, 76, 60, 0.1) !important;
    border-color: var(--mnwd-fehler) !important;
}

.mnw-container button.mnw-eraser-toggle:hover .mnw-eraser-icon,
button.mnw-eraser-toggle:hover .mnw-eraser-icon {
    stroke: #E74C3C !important;
}

/* Eraser SVG icon */
.mnw-eraser-icon {
    display: block !important;
    stroke: currentColor !important;
    transition: stroke 0.2s ease !important;
}

/* Trash/Clear All button */
.mnw-container button.mnw-clear-all-btn,
button.mnw-clear-all-btn {
    font-size: 1.2rem !important;
}

.mnw-container button.mnw-clear-all-btn:hover,
button.mnw-clear-all-btn:hover {
    background: rgba(231, 76, 60, 0.1) !important;
    border-color: var(--mnwd-fehler) !important;
}

.mnw-container button.mnw-clear-all-btn:hover .mnw-trash-icon,
button.mnw-clear-all-btn:hover .mnw-trash-icon {
    stroke: #E74C3C !important;
}

/* Trash SVG icon */
.mnw-trash-icon {
    display: block !important;
    stroke: currentColor !important;
    transition: stroke 0.2s ease !important;
}

/* Eraser mode cursor */
.mnw-eraser-mode {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23E74C3C" stroke-width="2"><path d="M20 20H7L3 16c-.6-.6-.6-1.5 0-2.1l10-10c.6-.6 1.5-.6 2.1 0l7 7c.6.6.6 1.5 0 2.1L15 20"/></svg>') 12 12, pointer !important;
}

/* 16th note SVG icon */
.note-icon-16th {
    display: block !important;
    margin: 0 auto !important;
}

/* Rest buttons - general positioning (Desktop) */
.mnw-container button.mnw-rest-btn .rest-symbol,
button.mnw-rest-btn .rest-symbol {
    display: inline-block !important;
    transform: translateY(-4px) !important;
}

/* Rest buttons - whole rest hangs higher, half rest sits lower */
.mnw-container button.mnw-rest-whole .rest-symbol,
button.mnw-rest-whole .rest-symbol {
    display: inline-block !important;
    transform: translateY(-7px) !important;
}

.mnw-container button.mnw-rest-half .rest-symbol,
button.mnw-rest-half .rest-symbol {
    display: inline-block !important;
    transform: translateY(0px) !important;
}

/* Playback cursor */
.mnw-playback-cursor {
    stroke: var(--mnw-lime) !important;
    stroke-width: 3 !important;
    opacity: 0.8 !important;
    filter: drop-shadow(0 0 4px var(--mnwd-akzent2-a6)) !important;
}

/* Staff Area */
.mnw-staff-area {
    flex: 1 !important;
    background: var(--mnw-white) !important;
    border-radius: var(--mnw-radius) !important;
    padding: 24px !important;
    box-shadow: var(--mnw-shadow) !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* Staff Controls - Zoom left, +Takt right */
.mnw-staff-controls {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    flex-wrap: wrap !important;
}

/* v3.99.178: Beide Takt-Buttons als Gruppe rechts — vorher waren sie einzelne
   Flex-Kinder und wurden von justify-content:space-between über die ganze
   Breite auseinandergezogen (Zoom links, "+ Takt" mittig, "− Takt" rechts). */
.mnw-measure-buttons {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    width: auto !important;
    margin-left: auto !important;
}
.mnw-measure-buttons .mnw-btn-add {
    flex: 0 0 auto !important;
    width: auto !important;
}

/* v3.85.88: Takt-Stepper – Pro Pattern (analog zur Zoom-Control) */
.mnw-measure-control {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 4px 8px !important;
    background: linear-gradient(135deg, #FAF8F3 0%, #e9ecef 100%) !important;
    border-radius: 20px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
    user-select: none;
}
.mnw-measure-control .mnw-measure-icon {
    width: 16px !important;
    height: 16px !important;
    stroke: var(--mnw-dark, #111416) !important;
    opacity: 0.55 !important;
    flex-shrink: 0 !important;
    margin-right: 2px;
}
.mnw-measure-control .mnw-measure-btn {
    width: 24px !important;
    height: 24px !important;
    border: none !important;
    background: transparent !important;
    color: var(--mnw-dark, #111416) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.15s ease !important;
    padding: 0 !important;
    line-height: 1 !important;
}
.mnw-measure-control .mnw-measure-btn:hover:not(:disabled) {
    background: var(--mnw-primary, var(--mnwd-akzent)) !important;
    color: #fff !important;
}
.mnw-measure-control .mnw-measure-btn:active:not(:disabled) {
    transform: scale(0.9) !important;
}
.mnw-measure-control .mnw-measure-btn:disabled {
    opacity: 0.3 !important;
    cursor: not-allowed !important;
}
.mnw-measure-control .mnw-measure-display {
    min-width: 56px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--mnw-dark, #111416);
    padding: 0 2px;
    font-family: var(--mnwd-schrift-text), var(--mnwd-schrift-titel);
}
.mnw-measure-control .mnw-measure-display #mnw-measure-count {
    color: var(--mnw-primary, var(--mnwd-akzent));
    font-weight: 700;
}

/* Clef Buttons */
.mnw-clef-buttons {
    display: flex;
    gap: 12px !important;
    margin-bottom: 20px !important;
}

.mnw-container button.mnw-clef-btn,
button.mnw-clef-btn {
    flex: 1 !important;
    padding: 12px 16px !important;
    background: var(--mnw-bg) !important;
    border: 2px solid #E0E0E0 !important;
    border-radius: var(--mnw-radius-sm) !important;
    cursor: pointer !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    font-family: var(--mnwd-schrift-titel) !important;
    transition: all 0.2s ease !important;
    color: var(--mnw-dark) !important;
    opacity: 1 !important;
}

.mnw-container button.mnw-clef-btn:hover,
button.mnw-clef-btn:hover {
    background: var(--mnwd-akzent-a1) !important;
    border-color: var(--mnw-turkis) !important;
}

.mnw-container button.mnw-clef-btn.active,
button.mnw-clef-btn.active {
    background: linear-gradient(135deg, var(--mnw-turkis), var(--mnwd-akzent-l33)) !important;
    border-color: var(--mnw-turkis) !important;
    color: var(--mnw-white) !important;
}

/* Staff Scroll Container */
.mnw-staff-scroll-container {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.mnw-staff-wrapper {
    flex: 1 !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    background: linear-gradient(180deg, #FAFBFC 0%, #F5F6F8 100%) !important;
    border-radius: var(--mnw-radius-sm) !important;
    border: 1px solid #E8E8E8 !important;
    scrollbar-width: thin !important;
    scrollbar-color: var(--mnw-turkis) #E8E8E8 !important;
}

.mnw-staff-wrapper::-webkit-scrollbar {
    height: 8px !important;
}

.mnw-staff-wrapper::-webkit-scrollbar-track {
    background: #E8E8E8 !important;
    border-radius: 4px !important;
}

.mnw-staff-wrapper::-webkit-scrollbar-thumb {
    background: var(--mnw-turkis) !important;
    border-radius: 4px !important;
}

.mnw-staff-wrapper::-webkit-scrollbar-thumb:hover {
    background: var(--mnwd-akzent-l33) !important;
}

/* Staff Container */
#mnw-staff {
    min-height: 180px !important;
    cursor: crosshair !important;
    display: inline-block !important;
    min-width: 100% !important;
}

#mnw-staff svg {
    display: block !important;
}

/* Scroll Buttons */
.mnw-scroll-btn {
    flex-shrink: 0 !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: var(--mnw-white) !important;
    border: 2px solid #E0E0E0 !important;
    color: var(--mnw-dark) !important;
    font-size: 1.2rem !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.15s ease !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
}

.mnw-scroll-btn:hover {
    background: var(--mnw-turkis) !important;
    border-color: var(--mnw-turkis) !important;
    color: var(--mnw-white) !important;
}

.mnw-scroll-btn:active {
    /* No transform to prevent jumping */
}

.mnw-scroll-btn:disabled {
    opacity: 0.3 !important;
    cursor: not-allowed !important;
}

.mnw-scroll-btn:disabled:hover {
    background: var(--mnw-white) !important;
    border-color: #E0E0E0 !important;
    color: var(--mnw-dark) !important;
}

/* Zoom Control */
.mnw-zoom-control {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 8px !important;
    background: linear-gradient(135deg, #FAF8F3 0%, #e9ecef 100%) !important;
    border-radius: 20px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
    position: relative !important;
    z-index: 10 !important;
}

.mnw-zoom-icon {
    width: 16px !important;
    height: 16px !important;
    stroke: var(--mnw-dark) !important;
    opacity: 0.6 !important;
    flex-shrink: 0 !important;
}

.mnw-zoom-btn {
    width: 24px !important;
    height: 24px !important;
    border: none !important;
    background: transparent !important;
    color: var(--mnw-dark) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.15s ease !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.mnw-zoom-btn:hover {
    background: var(--mnw-primary) !important;
    color: white !important;
}

.mnw-zoom-btn:active {
    transform: scale(0.9) !important;
}

.mnw-zoom-control input[type="range"] {
    width: 80px !important;
    height: 6px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    background: linear-gradient(90deg, var(--mnw-primary) 0%, var(--mnw-secondary) 100%) !important;
    border-radius: 3px !important;
    outline: none !important;
    cursor: pointer !important;
}

.mnw-zoom-control input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 14px !important;
    height: 14px !important;
    background: white !important;
    border: 2px solid var(--mnw-primary) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15) !important;
    transition: transform 0.15s ease !important;
}

.mnw-zoom-control input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.15) !important;
}

.mnw-zoom-control input[type="range"]::-moz-range-thumb {
    width: 14px !important;
    height: 14px !important;
    background: white !important;
    border: 2px solid var(--mnw-primary) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15) !important;
}

/* Staff Zoom Transform - Scale the SVG, not the wrapper */
.mnw-staff-wrapper svg {
    transition: transform 0.2s ease !important;
    transform-origin: left top !important;
}

/* Actions */
.mnw-actions {
    display: flex !important;
    gap: 8px !important;
    margin-top: 16px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}

/* Button Groups */
.mnw-btn-group {
    display: flex !important;
    gap: 6px !important;
    background: #F5F5F5 !important;
    padding: 4px !important;
    border-radius: 12px !important;
}

/* Buttons - Modern Pill Style */
.mnw-container button.mnw-btn,
button.mnw-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 10px 16px !important;
    border: none !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    font-family: var(--mnwd-schrift-text), var(--mnwd-schrift-titel) !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    transition: all 0.15s ease !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    opacity: 1 !important;
    white-space: nowrap !important;
    min-width: auto !important;
    flex: none !important;
}

.mnw-container button.mnw-btn .btn-icon,
button.mnw-btn .btn-icon {
    font-size: 1rem !important;
    line-height: 1 !important;
}

.mnw-container button.mnw-btn-primary,
button.mnw-btn-primary {
    background: var(--mnw-lime) !important;
    color: var(--mnwd-auf-akzent2) !important;
    box-shadow: 0 2px 8px var(--mnwd-akzent2-a25) !important;
}

.mnw-container button.mnw-btn-primary:hover,
button.mnw-btn-primary:hover {
    background: var(--mnwd-akzent2-l52s65) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px var(--mnwd-akzent2-a35) !important;
}

.mnw-container button.mnw-btn-secondary,
button.mnw-btn-secondary {
    background: #fff !important;
    color: var(--mnw-dark) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}

.mnw-container button.mnw-btn-secondary:hover,
button.mnw-btn-secondary:hover {
    background: #FAFAFA !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
}

.mnw-container button.mnw-btn-ghost,
button.mnw-btn-ghost {
    background: transparent !important;
    color: var(--mnwd-schwach) !important;
    padding: 10px 12px !important;
}

.mnw-container button.mnw-btn-ghost:hover,
button.mnw-btn-ghost:hover {
    color: var(--mnw-turkis) !important;
    background: var(--mnwd-akzent-a08) !important;
}

/* Play Button */
.mnw-container button.mnw-btn-play,
button.mnw-btn-play {
    background: var(--mnw-turkis) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px var(--mnwd-akzent-a25) !important;
}

.mnw-container button.mnw-btn-play:hover,
button.mnw-btn-play:hover {
    background: var(--mnwd-akzent-l33) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px var(--mnwd-akzent-a35) !important;
}

.mnw-container button.mnw-btn-play:disabled,
button.mnw-btn-play:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* Loop Button */
.mnw-container button.mnw-btn-loop,
button.mnw-btn-loop {
    background: #f0f0f0 !important;
    color: var(--mnwd-gedaempft) !important;
    border: 1px solid var(--mnwd-linie-stark) !important;
    padding: 8px 12px !important;
    min-width: auto !important;
}

.mnw-container button.mnw-btn-loop:hover,
button.mnw-btn-loop:hover {
    background: #e8e8e8 !important;
    transform: translateY(-1px) !important;
}

.mnw-container button.mnw-btn-loop.active,
button.mnw-btn-loop.active {
    background: var(--mnw-turkis) !important;
    color: #fff !important;
    border-color: var(--mnw-turkis) !important;
}

.mnw-container button.mnw-btn-loop:disabled,
button.mnw-btn-loop:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* Add Measure Button */
.mnw-container button.mnw-btn-add,
button.mnw-btn-add {
    background: transparent !important;
    color: var(--mnw-turkis) !important;
    border: 2px dashed var(--mnw-turkis) !important;
    padding: 8px 14px !important;
    font-size: 0.8rem !important;
}

.mnw-container button.mnw-btn-add:hover,
button.mnw-btn-add:hover {
    background: var(--mnwd-akzent-a08) !important;
    border-style: solid !important;
}

/* Icon-only buttons */
.mnw-container button.mnw-btn-icon,
button.mnw-btn-icon {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border-radius: 8px !important;
    font-size: 1rem !important;
}

/* Reference Section */
.mnw-reference {
    margin-top: 24px !important;
    padding: 16px 20px !important;
    background: var(--mnw-white) !important;
    border-radius: var(--mnw-radius) !important;
    box-shadow: var(--mnw-shadow) !important;
}

.mnw-reference-title {
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    color: var(--mnw-turkis) !important;
    margin-bottom: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.mnw-reference-items {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

.mnw-reference-items span {
    padding: 6px 12px !important;
    background: var(--mnw-bg) !important;
    border-radius: 8px !important;
    font-size: 0.85rem !important;
    color: var(--mnwd-gedaempft) !important;
}

/* v3.99.13/14 — Oktaven-Referenz als kleiner Info-Button (rechts oben im Frageheader) + Modal */
.mnw-octave-info-btn {
    margin-left: auto !important;
    flex: none !important;
    width: 30px !important;
    height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border: 1px solid #e0e6e5 !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: var(--mnw-turkis) !important;
    cursor: pointer !important;
    transition: background 0.12s ease, border-color 0.12s ease !important;
}
.mnw-octave-info-btn:hover {
    background: var(--mnwd-akzent-a1) !important;
    border-color: var(--mnwd-akzent-a35) !important;
}
.mnw-octave-info-btn svg { display: block !important; }
.mnw-octave-modal-overlay {
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    background: rgba(17, 20, 22, 0.45) !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 100000 !important;
    padding: 20px !important;
}
.mnw-octave-modal {
    background: var(--mnw-white) !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22) !important;
    width: 100% !important;
    max-width: 380px !important;
    padding: 18px 20px 20px !important;
}
.mnw-octave-modal-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 14px !important;
}
.mnw-octave-modal-title {
    font-family: var(--mnwd-schrift-titel) !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    color: var(--mnw-turkis) !important;
}
.mnw-octave-modal-close {
    border: 0 !important;
    background: transparent !important;
    font-size: 1.5rem !important;
    line-height: 1 !important;
    color: #888 !important;
    cursor: pointer !important;
    padding: 0 4px !important;
}
.mnw-octave-modal-close:hover { color: #111416 !important; }
.mnw-octave-modal .mnw-reference-items {
    flex-direction: column !important;
    gap: 8px !important;
}

/* v3.99.14 — Aktionsleiste (Zurück · Prüfen · Überspringen): überall sauber & zentriert */
.mnw-actionbar {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #eceeed;
}
.mnw-actionbar-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}
.mnw-actionbar .mnw-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    height: 42px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
}
/* Zurück / Überspringen einheitlich als dezente Ghost-Buttons */
.mnw-actionbar .mnw-btn-ghost {
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid transparent !important;
    color: var(--mnwd-gedaempft) !important;
    box-shadow: none !important;
}
.mnw-actionbar .mnw-btn-ghost:hover {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: #e0e6e5 !important;
    color: #111416 !important;
}

/* v3.99.15 — Sobald die untere Aktionsleiste vorhanden ist, gibt es nur EINEN Prüfen-Button (unten).
   Inline-Check-Buttons der Quiz-Typen werden zuverlässig ausgeblendet (auch nach Re-Render). */
#mnw-game:has(#mnw-actionbar) #mnw-quiz-area .mnw-quiz-check-btn,
#mnw-game:has(#mnw-actionbar) #mnw-quiz-area .mnw-quiz-submit,
#mnw-game:has(#mnw-actionbar) #mnw-quiz-area .mnw-piano-check-btn {
    display: none !important;
}

/* Feedback Overlay */
.mnw-feedback-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.6) !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 999999 !important;
    backdrop-filter: blur(4px) !important;
}

.mnw-feedback-overlay.active {
    display: flex !important;
}

.mnw-feedback-overlay.success .mnw-feedback-icon {
    background: linear-gradient(135deg, var(--mnw-lime), var(--mnwd-akzent2-l52s65)) !important;
}

.mnw-feedback-overlay.error .mnw-feedback-icon {
    background: linear-gradient(135deg, var(--mnw-error), #C0392B) !important;
}

/* v3.84.53: Orange for partial-correct (Ampel-style: green → orange → red) */
.mnw-feedback-overlay.partial .mnw-feedback-icon {
    background: linear-gradient(135deg, #F5A623, #F8B94D) !important;
}

.mnw-feedback-overlay.success .mnw-feedback-title {
    color: var(--mnw-lime) !important;
}

.mnw-feedback-overlay.error .mnw-feedback-title {
    color: var(--mnw-error) !important;
}

.mnw-feedback-overlay.partial .mnw-feedback-title {
    color: #C97A00 !important;
}

.mnw-feedback-card {
    background: var(--mnw-white) !important;
    border-radius: 24px !important;
    padding: 48px !important;
    text-align: center !important;
    max-width: 420px !important;
    width: 90% !important;
    animation: mnw-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
}

@keyframes mnw-pop {
    from { 
        transform: scale(0.7) translateY(20px);
        opacity: 0;
    }
    to { 
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

.mnw-feedback-icon {
    width: 80px !important;
    height: 80px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 2.5rem !important;
    margin: 0 auto 20px !important;
    color: var(--mnw-white) !important;
    background: var(--mnw-lime) !important;
}

.mnw-feedback-card h3,
#mnw-feedback-title {
    margin: 0 0 12px 0 !important;
    font-size: 1.75rem !important;
    font-family: var(--mnwd-schrift-titel) !important;
    font-weight: 700 !important;
    color: var(--mnw-dark) !important;
}

.mnw-feedback-card p,
#mnw-feedback-message {
    color: var(--mnwd-gedaempft) !important;
    margin: 0 0 24px 0 !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    white-space: pre-line !important;
}

/* ================================================
   RESPONSIVE STYLES - See end of file for complete
   responsive design system
   ================================================ */

/* Completion Screen */
.mnw-complete {
    text-align: center !important;
    padding: 40px 20px !important;
}

.mnw-complete-icon {
    font-size: 4rem !important;
    margin-bottom: 16px !important;
}

.mnw-complete h3 {
    color: var(--mnw-turkis) !important;
    font-size: 1.75rem !important;
    margin: 0 0 12px 0 !important;
    font-family: var(--mnwd-schrift-titel) !important;
}

.mnw-complete p {
    color: var(--mnwd-gedaempft) !important;
    margin: 0 0 20px 0 !important;
    font-size: 1.1rem !important;
}

/* ============================================
   Summary Screen Styles
   ============================================ */

.mnw-summary {
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 30px 20px !important;
}

.mnw-summary-header {
    text-align: center !important;
    margin-bottom: 24px !important;
}

.mnw-summary-emoji {
    font-size: 4rem !important;
    margin-bottom: 12px !important;
    animation: bounceIn 0.6s ease-out !important;
}

@keyframes bounceIn {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

.mnw-summary-title {
    font-family: var(--mnwd-schrift-titel) !important;
    font-weight: 700 !important;
    font-size: 2rem !important;
    color: var(--mnw-dark) !important;
    margin: 0 0 8px 0 !important;
}

.mnw-summary-subtitle {
    color: var(--mnwd-gedaempft) !important;
    font-size: 1.05rem !important;
    margin: 0 !important;
}

/* Score Card */
.mnw-summary-score-card {
    background: linear-gradient(135deg, var(--mnw-turkis), var(--mnwd-akzent-l32-4)) !important;
    border-radius: var(--mnw-radius) !important;
    padding: 24px !important;
    margin-bottom: 24px !important;
    color: white !important;
    box-shadow: 0 8px 30px var(--mnwd-akzent-a3) !important;
}

.mnw-summary-main-score {
    text-align: center !important;
    margin-bottom: 20px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid rgba(255,255,255,0.2) !important;
}

.mnw-summary-percentage {
    font-family: var(--mnwd-schrift-titel) !important;
    font-size: 3.5rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    margin-bottom: 4px !important;
}

.mnw-summary-points {
    font-size: 1rem !important;
    opacity: 0.9 !important;
}

.mnw-summary-stats-row {
    display: flex !important;
    justify-content: space-around !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

.mnw-summary-stat {
    text-align: center !important;
    min-width: 70px !important;
}

.mnw-summary-stat-value {
    display: block !important;
    font-family: var(--mnwd-schrift-titel) !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
}

.mnw-summary-stat-label {
    display: block !important;
    font-size: 0.75rem !important;
    opacity: 0.85 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Task Results */
.mnw-summary-tasks {
    background: var(--mnw-bg) !important;
    border-radius: var(--mnw-radius) !important;
    padding: 20px !important;
    margin-bottom: 24px !important;
}

.mnw-summary-tasks-title {
    font-family: var(--mnwd-schrift-titel) !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    color: var(--mnw-dark) !important;
    margin: 0 0 16px 0 !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid #e0e0e0 !important;
}

.mnw-summary-hint {
    font-weight: 400 !important;
    font-size: 0.85rem !important;
    color: var(--mnwd-schwach) !important;
}

.mnw-summary-task {
    background: var(--mnw-white) !important;
    border-radius: var(--mnw-radius-sm) !important;
    padding: 12px 16px !important;
    margin-bottom: 10px !important;
    border-left: 4px solid #e0e0e0 !important;
    transition: background 0.2s ease !important;
}

.mnw-summary-task:last-child {
    margin-bottom: 0 !important;
}

.mnw-summary-task.passed {
    border-left-color: var(--mnw-success) !important;
}

.mnw-summary-task.failed {
    border-left-color: var(--mnw-error) !important;
}

.mnw-summary-task.unanswered {
    border-left-color: var(--mnwd-linie-stark) !important;
    opacity: 0.7 !important;
}

.mnw-summary-task-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 8px !important;
}

.mnw-summary-task-icon {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    flex-shrink: 0 !important;
}

.mnw-summary-task.passed .mnw-summary-task-icon {
    background: var(--mnwd-erfolg-l) !important;
    color: var(--mnw-success) !important;
}

.mnw-summary-task.failed .mnw-summary-task-icon {
    background: var(--mnwd-fehler-l) !important;
    color: var(--mnw-error) !important;
}

.mnw-summary-task.unanswered .mnw-summary-task-icon {
    background: #f5f5f5 !important;
    color: var(--mnwd-schwach) !important;
}

.mnw-summary-task-name {
    flex: 1 !important;
    font-weight: 500 !important;
    color: var(--mnw-dark) !important;
}

.mnw-summary-task-score {
    font-family: var(--mnwd-schrift-titel) !important;
    font-weight: 600 !important;
    color: var(--mnw-turkis) !important;
}

.mnw-summary-task-arrow {
    font-size: 1.5rem !important;
    color: var(--mnwd-schwach) !important;
    transition: transform 0.2s ease, color 0.2s ease !important;
}

.mnw-summary-task:hover {
    background: #f0f0f0 !important;
}

.mnw-summary-task:hover .mnw-summary-task-arrow {
    transform: translateX(4px) !important;
    color: var(--mnw-turkis) !important;
}

.mnw-summary-task-bar {
    height: 6px !important;
    background: #e0e0e0 !important;
    border-radius: 3px !important;
    overflow: hidden !important;
}

.mnw-summary-task-fill {
    height: 100% !important;
    border-radius: 3px !important;
    transition: width 0.5s ease-out !important;
}

.mnw-summary-task.passed .mnw-summary-task-fill {
    background: linear-gradient(90deg, var(--mnw-success), #4caf50) !important;
}

.mnw-summary-task.failed .mnw-summary-task-fill {
    background: linear-gradient(90deg, var(--mnw-error), #ef5350) !important;
}

/* Actions */
.mnw-summary-actions {
    text-align: center !important;
}

.mnw-btn-large {
    padding: 16px 40px !important;
    font-size: 1.15rem !important;
}

/* Grade-based styling */
.mnw-summary.excellent .mnw-summary-score-card {
    background: linear-gradient(135deg, #4caf50, #66bb6a) !important;
}

.mnw-summary.great .mnw-summary-score-card {
    background: linear-gradient(135deg, var(--mnw-turkis), var(--mnwd-akzent-l32-4)) !important;
}

.mnw-summary.good .mnw-summary-score-card {
    background: linear-gradient(135deg, var(--mnw-lime), var(--mnwd-akzent2-l50s63)) !important;
    color: var(--mnw-dark) !important;
}

.mnw-summary.fair .mnw-summary-score-card {
    background: linear-gradient(135deg, #ff9800, #ffb74d) !important;
}

.mnw-summary.needs-work .mnw-summary-score-card {
    background: linear-gradient(135deg, #f44336, #e57373) !important;
}

/* ============================================
   Grading Feedback Styles
   ============================================ */

.mnw-grading-feedback {
    background: var(--mnw-white) !important;
    border-radius: var(--mnw-radius) !important;
    max-width: 700px !important;
    width: 95% !important;
    max-height: 90vh !important;
    margin: 0 auto !important;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15) !important;
    display: flex !important;
    flex-direction: column !important;
    animation: mnw-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.mnw-feedback-header {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    padding: 24px 24px 16px 24px !important;
    border-bottom: 2px solid var(--mnw-bg) !important;
    flex-shrink: 0 !important;
}

.mnw-feedback-body {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 16px 24px !important;
    min-height: 0 !important;
}

.mnw-feedback-footer {
    padding: 16px 24px 24px 24px !important;
    border-top: 2px solid var(--mnw-bg) !important;
    flex-shrink: 0 !important;
    background: var(--mnw-white) !important;
}

.mnw-score-circle {
    width: 80px !important;
    height: 80px !important;
    border-radius: 50% !important;
    border-width: 4px !important;
    border-style: solid !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    background: var(--mnw-white) !important;
}

.mnw-score-value {
    font-family: var(--mnwd-schrift-titel) !important;
    font-weight: 700 !important;
    font-size: 1.5rem !important;
}

.mnw-feedback-title-area {
    flex: 1 !important;
}

.mnw-feedback-title {
    font-family: var(--mnwd-schrift-titel) !important;
    font-weight: 700 !important;
    font-size: 1.4rem !important;
    color: var(--mnw-dark) !important;
    margin: 0 0 4px 0 !important;
}

.mnw-feedback-subtitle {
    color: var(--mnwd-gedaempft) !important;
    margin: 0 0 4px 0 !important;
    font-size: 0.95rem !important;
}

.mnw-feedback-points {
    color: var(--mnw-turkis) !important;
    font-weight: 600 !important;
    margin: 0 !important;
    font-size: 1rem !important;
}

.mnw-feedback-body {
    margin-bottom: 16px !important;
}

.mnw-analysis-label {
    font-weight: 600 !important;
    color: var(--mnw-dark) !important;
    margin-bottom: 10px !important;
    font-size: 0.9rem !important;
}

.mnw-note-analysis {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
}

.mnw-note-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    font-family: var(--mnwd-schrift-text) !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
}

.mnw-note-correct {
    background: var(--mnwd-erfolg-l) !important;
    color: var(--mnwd-erfolg) !important;
}

.mnw-note-partial {
    background: var(--mnwd-warnung-l) !important;
    color: var(--mnwd-warnung) !important;
}

.mnw-note-wrong {
    background: var(--mnwd-fehler-l) !important;
    color: #c62828 !important;
}

.mnw-note-missing {
    background: var(--mnwd-fehler-l) !important;
    color: #c62828 !important;
    text-decoration: line-through !important;
}

.mnw-note-extra {
    background: #f3e5f5 !important;
    color: #7b1fa2 !important;
}

.mnw-note-recovered {
    background: #e3f2fd !important;
    color: #0277bd !important;
}

.mnw-grading-stats {
    display: flex !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    padding: 12px !important;
    background: var(--mnw-bg) !important;
    border-radius: var(--mnw-radius-sm) !important;
    margin-bottom: 16px !important;
}

.mnw-stat-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 8px 16px !important;
    background: var(--mnw-white) !important;
    border-radius: 8px !important;
    min-width: 70px !important;
}

.mnw-stat-value {
    font-family: var(--mnwd-schrift-titel) !important;
    font-weight: 700 !important;
    font-size: 1.3rem !important;
    color: var(--mnw-turkis) !important;
}

.mnw-stat-label {
    font-size: 0.75rem !important;
    color: #888 !important;
    text-align: center !important;
}

.mnw-stat-bonus .mnw-stat-value {
    color: #0277bd !important;
}

.mnw-solution-display {
    background: #e3f2fd !important;
    border-radius: var(--mnw-radius-sm) !important;
    padding: 12px 16px !important;
    margin-bottom: 16px !important;
}

.mnw-solution-label {
    font-weight: 600 !important;
    color: #0277bd !important;
    font-size: 0.85rem !important;
    margin-bottom: 6px !important;
}

.mnw-solution-notes {
    font-family: var(--mnwd-schrift-text) !important;
    color: var(--mnw-dark) !important;
}

.mnw-sol-note {
    display: inline-block !important;
    padding: 2px 8px !important;
    background: var(--mnw-white) !important;
    border-radius: 4px !important;
    margin: 2px !important;
}

.mnw-feedback-legend {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding: 12px !important;
    background: var(--mnw-bg) !important;
    border-radius: var(--mnw-radius-sm) !important;
    margin-bottom: 20px !important;
    justify-content: center !important;
}

.mnw-legend-item {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 0.8rem !important;
    color: var(--mnwd-gedaempft) !important;
}

.mnw-legend-dot {
    width: 12px !important;
    height: 12px !important;
    border-radius: 4px !important;
}

.mnw-legend-dot.correct {
    background: #2e7d32 !important;
}

.mnw-legend-dot.partial {
    background: #f57c00 !important;
}

.mnw-legend-dot.wrong {
    background: #c62828 !important;
}

.mnw-legend-dot.missing {
    background: #c62828 !important;
}

.mnw-legend-dot.recovered {
    background: #0277bd !important;
}

.mnw-legend-dot.extra {
    background: #7b1fa2 !important;
}

/* Notation Preview in Feedback */
.mnw-notation-preview {
    background: var(--mnw-white) !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: var(--mnw-radius-sm) !important;
    padding: 10px !important;
    margin-bottom: 12px !important;
    overflow-x: auto !important;
    text-align: center !important;
}

.mnw-notation-preview svg {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
}

/* Missing notes indicator */
.mnw-missing-notes-info {
    background: var(--mnwd-fehler-l) !important;
    border-radius: var(--mnw-radius-sm) !important;
    padding: 10px 14px !important;
    margin-bottom: 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.mnw-missing-label {
    color: #c62828 !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
}

.mnw-missing-note {
    display: inline-block !important;
    padding: 4px 10px !important;
    background: var(--mnw-white) !important;
    border: 2px solid #c62828 !important;
    border-radius: 6px !important;
    color: #c62828 !important;
    font-weight: 500 !important;
    text-decoration: line-through !important;
}

.mnw-continue-btn {
    width: 100% !important;
    padding: 14px 24px !important;
    font-size: 1.1rem !important;
}

/* Feedback Overlay for Grading */
#mnw-feedback-overlay.active .mnw-grading-feedback {
    animation: slideUp 0.3s ease-out !important;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   FREE CHOICE LEARNDASH INTEGRATION
   ============================================ */

/* Free Choice Container */
.mnw-free-choice-container {
    background: var(--mnw-white) !important;
    border-radius: var(--mnw-radius) !important;
    padding: 20px !important;
    margin: 16px 0 !important;
    box-shadow: var(--mnw-shadow) !important;
}

.mnw-free-choice-container .mnw-task-title {
    font-family: var(--mnwd-schrift-titel) !important;
    font-size: 1.3rem !important;
    font-weight: 600 !important;
    color: var(--mnw-turkis) !important;
    margin-bottom: 10px !important;
}

.mnw-free-choice-container .mnw-task-description {
    color: var(--mnw-dark) !important;
    font-size: 0.95rem !important;
    margin-bottom: 16px !important;
    line-height: 1.5 !important;
}

.mnw-free-choice-container .mnw-editor-wrapper {
    border-radius: var(--mnw-radius-sm) !important;
    overflow: hidden !important;
}

/* Inline Feedback (after editor) */
.mnw-feedback-inline {
    background: linear-gradient(135deg, var(--mnw-bg), #ffffff) !important;
    border-radius: var(--mnw-radius-sm) !important;
    padding: 16px !important;
    margin-top: 16px !important;
    border-left: 4px solid var(--mnw-turkis) !important;
}

.mnw-feedback-inline .mnw-feedback-content {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

.mnw-feedback-inline .mnw-score-circle {
    width: 70px !important;
    height: 70px !important;
    border-radius: 50% !important;
    border: 4px solid currentColor !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    background: var(--mnw-white) !important;
}

.mnw-feedback-inline .mnw-score-circle span {
    font-family: var(--mnwd-schrift-titel) !important;
    font-size: 1.4rem !important;
    font-weight: 700 !important;
}

.mnw-feedback-inline .mnw-feedback-details {
    flex: 1 !important;
}

.mnw-feedback-inline .mnw-feedback-details p {
    margin: 0 !important;
    font-size: 1rem !important;
    color: var(--mnw-dark) !important;
}

/* Hide LearnDash Free Choice input when Note Writer is active */
.wpProQuiz_listItem:has(.mnw-free-choice-container) input.wpProQuiz_questionInput[type="text"],
.wpProQuiz_listItem:has(.mnw-free-choice-editor) input.wpProQuiz_questionInput[type="text"],
.ld-question:has(.mnw-free-choice-editor) input.wpProQuiz_questionInput[type="text"] {
    position: absolute !important;
    left: -9999px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 1px !important;
    height: 1px !important;
}

/* Error message styling */
.mnw-error {
    background: var(--mnwd-fehler-l) !important;
    color: #c62828 !important;
    padding: 16px 20px !important;
    border-radius: var(--mnw-radius-sm) !important;
    border-left: 4px solid #c62828 !important;
    margin: 16px 0 !important;
}

/* ============================================
   Prelistening Section (Höraufgaben)
   ============================================ */

.mnw-prelistening-section {
    background: linear-gradient(135deg, var(--mnwd-akzent-l96s43) 0%, #e8f5e9 100%) !important;
    border: 2px solid var(--mnw-turkis) !important;
    border-radius: var(--mnw-radius) !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* Piano Helper Section (for note_write tasks with keyboard) */
.mnw-piano-helper-section {
    background: linear-gradient(135deg, #f5f0f9 0%, #f0e8f5 100%) !important;
    border: 2px solid #9c27b0 !important;
    border-radius: var(--mnw-radius) !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
}

.mnw-piano-helper-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 15px !important;
}

.mnw-piano-helper-icon {
    font-size: 24px !important;
}

.mnw-piano-helper-title {
    font-family: var(--mnwd-schrift-titel) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #9c27b0 !important;
    flex: 1;
}

.mnw-piano-helper-play-btn {
    background: #9c27b0 !important;
    color: white !important;
    border: none !important;
    padding: 8px 16px !important;
    border-radius: var(--mnw-radius-sm) !important;
    cursor: pointer !important;
    font-size: 14px !important;
}

.mnw-piano-helper-play-btn:hover {
    background: #7b1fa2 !important;
}

.mnw-piano-helper-keyboard-container {
    max-width: 100% !important;
    margin: 0 auto !important;
    overflow-x: scroll !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    background: linear-gradient(180deg, #111416 0%, #1a1a1a 100%) !important;
    padding: 12px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
}
.mnw-piano-helper-keyboard-container::-webkit-scrollbar {
    height: 0px !important;
    display: none !important;
}

.mnw-piano-helper-keys {
    min-width: 800px !important;
}

/* Marked keys styling */
.mnw-piano-key-marked {
    background: linear-gradient(180deg, #9c27b0 0%, #7b1fa2 90%, #6a1b9a 100%) !important;
    border-color: #9c27b0 !important;
}

.mnw-piano-key-marked.mnw-piano-key-white {
    background: linear-gradient(180deg, #e1bee7 0%, #ce93d8 90%, #ba68c8 100%) !important;
}

.mnw-piano-key-marked.mnw-piano-key-black {
    background: linear-gradient(180deg, #9c27b0 0%, #7b1fa2 70%, #6a1b9a 100%) !important;
}

.mnw-prelistening-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 15px !important;
}

.mnw-prelistening-icon {
    font-size: 24px !important;
}

.mnw-prelistening-title {
    font-family: var(--mnwd-schrift-titel) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--mnw-turkis) !important;
}

.mnw-prelistening-staff-container {
    background: var(--mnw-white) !important;
    border-radius: var(--mnw-radius-sm) !important;
    padding: 15px 15px 15px 15px !important;
    margin-bottom: 15px !important;
    border: 1px solid var(--mnwd-akzent-a2) !important;
    overflow-x: scroll !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    pointer-events: auto !important;
    cursor: default !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    /* Force scrollbar always visible on macOS/iOS */
    scrollbar-width: thin !important;
    scrollbar-color: var(--mnw-turkis, var(--mnwd-akzent)) #E8E8E8 !important;
    position: relative !important;
}

/* Force scrollbar always visible (webkit) - hide native, use custom JS scrollbar */
.mnw-prelistening-staff-container::-webkit-scrollbar {
    height: 0px !important;
    display: none !important;
}
.mnw-prelistening-staff-container {
    scrollbar-width: none !important;
}

.mnw-prelistening-staff:not(#mnw-prelistening-staff-container) {
    overflow: visible !important;
    display: inline-block !important;
    min-width: 100% !important;
    pointer-events: none !important;
    cursor: default !important;
}

/* Game template: staff container - full width background, rounded, scrollable */
#mnw-prelistening-staff-container {
    overflow-x: scroll !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    pointer-events: auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    background: #fafafa !important;
    border-radius: 10px !important;
    border: 1px solid var(--mnwd-akzent-a15) !important;
    box-shadow: inset 0 1px 4px rgba(0,0,0,0.04) !important;
    padding: 12px !important;
    min-width: 0 !important;
}
#mnw-prelistening-staff-container::-webkit-scrollbar {
    height: 0px !important;
    display: none !important;
}
/* Inner staff div: inline-block so SVG determines scroll width */
#mnw-prelistening-staff {
    display: inline-block !important;
    min-width: 100% !important;
}

.mnw-prelistening-staff svg,
.mnw-prelistening-staff-container svg {
    display: block !important;
    pointer-events: none !important;
    overflow: visible !important;
}

.mnw-prelistening-controls {
    display: flex;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
}

/* Hidden state for controls (used by notes_only mode) */
.mnw-prelistening-controls.mnw-hidden {
    display: none !important;
}

.mnw-prelistening-controls .mnw-btn {
    min-width: 140px !important;
}

/* Metronome SVG icon styling */
.mnw-metronome-icon {
    display: inline-block;
    vertical-align: middle;
    stroke: currentColor;
}

/* Metronome toggle for prelistening */
.mnw-prelistening-controls .mnw-metronome-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 14px !important;
    background: var(--mnw-gray-100) !important;
    border: 2px solid var(--mnw-gray-300) !important;
    border-radius: var(--mnw-radius-sm) !important;
    cursor: pointer !important;
    font-size: 18px !important;
    transition: all 0.2s ease !important;
}

.mnw-prelistening-controls .mnw-metronome-toggle:hover {
    border-color: var(--mnw-turkis) !important;
    background: var(--mnw-turkis-light, var(--mnwd-akzent-l92s51)) !important;
}

.mnw-prelistening-controls .mnw-metronome-toggle input {
    display: none !important;
}

.mnw-prelistening-controls .mnw-metronome-toggle:has(input:checked),
.mnw-prelistening-controls .mnw-metronome-toggle.active {
    border-color: var(--mnw-turkis) !important;
    background: var(--mnw-turkis) !important;
    color: white !important;
}

/* Play controls with metronome toggle */
.mnw-play-controls {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.mnw-play-controls.mnw-hidden {
    display: none !important;
}

.mnw-actions .mnw-metronome-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 14px !important;
    background: var(--mnw-gray-100) !important;
    border: 2px solid var(--mnw-gray-300) !important;
    border-radius: var(--mnw-radius-sm) !important;
    cursor: pointer !important;
    font-size: 18px !important;
    transition: all 0.2s ease !important;
}

.mnw-actions .mnw-metronome-toggle:hover {
    border-color: var(--mnw-turkis) !important;
    background: var(--mnw-turkis-light, var(--mnwd-akzent-l92s51)) !important;
}

.mnw-actions .mnw-metronome-toggle input {
    display: none !important;
}

.mnw-actions .mnw-metronome-toggle:has(input:checked),
.mnw-actions .mnw-metronome-toggle.active {
    border-color: var(--mnw-turkis) !important;
    background: var(--mnw-turkis) !important;
    color: white !important;
}

/* Tempo Control */
.mnw-tempo-control {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: var(--mnw-white) !important;
    border: 2px solid var(--mnw-gray-300, var(--mnwd-linie-stark)) !important;
    border-radius: var(--mnw-radius-sm) !important;
    padding: 4px 8px !important;
    font-family: var(--mnwd-schrift-text) !important;
}

.mnw-tempo-btn {
    width: 28px !important;
    height: 28px !important;
    border: none !important;
    background: var(--mnw-turkis) !important;
    color: white !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
}

.mnw-tempo-btn:hover {
    background: var(--mnwd-akzent-l33) !important;
    transform: scale(1.1) !important;
}

.mnw-tempo-btn:active {
    transform: scale(0.95) !important;
}

.mnw-tempo-value {
    min-width: 36px !important;
    text-align: center !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--mnw-dark) !important;
}

.mnw-tempo-value::after {
    content: ' BPM' !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    color: #888 !important;
}

/* Export Dropdown */
.mnw-export-dropdown {
    position: relative !important;
    display: inline-block !important;
}

.mnw-export-menu {
    display: none;
    position: absolute !important;
    bottom: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: var(--mnw-white) !important;
    border: 2px solid var(--mnw-turkis) !important;
    border-radius: var(--mnw-radius-sm) !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15) !important;
    padding: 8px !important;
    margin-bottom: 8px !important;
    z-index: 100 !important;
    min-width: 120px !important;
}

.mnw-export-dropdown.open .mnw-export-menu {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.mnw-export-menu::after {
    content: '' !important;
    position: absolute !important;
    bottom: -8px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    border-left: 8px solid transparent !important;
    border-right: 8px solid transparent !important;
    border-top: 8px solid var(--mnw-turkis) !important;
}

.mnw-export-option {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 16px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-family: var(--mnwd-schrift-text) !important;
    font-size: 14px !important;
    color: var(--mnw-dark) !important;
    text-align: left !important;
    white-space: nowrap !important;
    transition: all 0.2s ease !important;
}

.mnw-export-option:hover {
    background: var(--mnw-turkis) !important;
    color: white !important;
}

/* Import option styling */
.mnw-export-option.mnw-import-option {
    color: var(--mnw-lime) !important;
    font-weight: 600 !important;
}

.mnw-export-option.mnw-import-option:hover {
    background: var(--mnw-lime) !important;
    color: var(--mnw-dark) !important;
}

/* Expression Dropdown (Dynamics & Articulation) */
/* ========================================
   EXPRESSION PALETTES (Dynamik & Artikulation)
   ======================================== */

.mnw-palette {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    position: relative !important; /* For mobile dropdown positioning */
}

.mnw-palette-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 12px !important;
    transition: all 0.2s ease !important;
}

.mnw-palette-toggle.expanded {
    background: var(--mnw-turkis) !important;
    color: white !important;
    border-color: var(--mnw-turkis) !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.mnw-palette-icon {
    font-family: 'Bravura', serif !important;
    font-size: 16px !important;
}

.mnw-palette-items {
    display: none;
    align-items: center !important;
    gap: 2px !important;
    background: var(--mnw-white) !important;
    border: 2px solid var(--mnw-turkis) !important;
    border-left: none !important;
    border-radius: 0 var(--mnw-radius-sm) var(--mnw-radius-sm) 0 !important;
    padding: 4px 6px !important;
    animation: mnw-palette-expand 0.2s ease-out !important;
}

@keyframes mnw-palette-expand {
    from {
        opacity: 0;
        transform: scaleX(0);
        transform-origin: left;
    }
    to {
        opacity: 1;
        transform: scaleX(1);
    }
}

.mnw-palette.open .mnw-palette-items {
    display: flex !important;
}

.mnw-palette-item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-family: 'Bravura', serif !important;
    font-size: 15px !important;
    color: var(--mnw-dark) !important;
    transition: all 0.15s ease !important;
}

.mnw-palette-item:hover {
    background: var(--mnwd-akzent-a1) !important;
    border-color: var(--mnw-turkis) !important;
}

.mnw-palette-item.active {
    background: var(--mnw-turkis) !important;
    color: white !important;
    border-color: var(--mnw-turkis) !important;
}

.mnw-palette-item[data-dynamic="sfz"] {
    font-family: var(--mnwd-schrift-text) !important;
    font-size: 11px !important;
    font-style: italic !important;
}

/* Expression section visibility */
.mnw-section-expression.mnw-hidden {
    display: none !important;
}

/* LearnDash prelistening section */
.mnw-free-choice-editor .mnw-prelistening-section {
    margin: 15px 0 !important;
}

.mnw-fc-play-prelistening {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 24px !important;
    background: var(--mnw-turkis) !important;
    color: var(--mnw-white) !important;
    border: none !important;
    border-radius: var(--mnw-radius-sm) !important;
    font-family: var(--mnwd-schrift-titel) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.mnw-fc-play-prelistening:hover {
    background: var(--mnwd-akzent-l23) !important;
    transform: translateY(-1px) !important;
}

.mnw-fc-play-prelistening:disabled {
    opacity: 0.7 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

.mnw-fc-play-prelistening .btn-icon {
    font-size: 16px !important;
}

/* ==========================================
   QUIZ SYSTEM STYLES
   ========================================== */

/* Quiz Area Container */
#mnw-quiz-area {
    margin-top: 20px !important;
    padding: 15px !important;
    text-align: center !important;
}

#mnw-quiz-area.mnw-hidden {
    display: none !important;
}

/* Multiple Choice */
.mnw-quiz-choices {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    justify-content: center !important;
    margin: 20px 0 !important;
}

.mnw-quiz-choice {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 24px !important;
    border: 2px solid var(--mnwd-linie-stark) !important;
    border-radius: 10px !important;
    background: #fff !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    min-width: 140px !important;
    font-size: 16px !important;
    font-family: var(--mnwd-schrift-titel) !important;
    color: #333 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

.mnw-quiz-choice:hover:not(:disabled) {
    border-color: var(--mnw-turkis, var(--mnwd-akzent)) !important;
    background: var(--mnwd-akzent-l97) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
}

.mnw-quiz-choice .mnw-choice-letter {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: var(--mnw-turkis, var(--mnwd-akzent)) !important;
    color: #fff !important;
    font-weight: bold !important;
    font-size: 14px !important;
    flex-shrink: 0 !important;
}

.mnw-quiz-choice .mnw-choice-text {
    font-weight: 600 !important;
    color: #333 !important;
}

.mnw-quiz-choice:disabled {
    cursor: not-allowed !important;
    opacity: 0.9 !important;
}

.mnw-quiz-choice.correct {
    border-color: var(--mnwd-erfolg) !important;
    background: var(--mnwd-erfolg-l) !important;
}

.mnw-quiz-choice.correct .mnw-choice-letter {
    background: #2e7d32 !important;
    color: #fff !important;
}

.mnw-quiz-choice.wrong {
    border-color: #c62828 !important;
    background: var(--mnwd-fehler-l) !important;
}

.mnw-quiz-choice.wrong .mnw-choice-letter {
    background: #c62828 !important;
    color: #fff !important;
}

.mnw-quiz-choice.correct-answer {
    border-color: var(--mnwd-erfolg) !important;
    border-style: dashed !important;
    background: var(--mnwd-akzent2-l94s52) !important;
}

.mnw-quiz-choice.correct-answer .mnw-choice-letter {
    background: #2e7d32 !important;
    color: #fff !important;
}

/* Selected state (LearnDash mode - before submission) */
.mnw-quiz-choice.selected {
    border-color: var(--mnwd-akzent) !important;
    background: var(--mnwd-akzent-a1) !important;
    box-shadow: 0 0 0 2px var(--mnwd-akzent-a3) !important;
}

.mnw-quiz-choice.selected .mnw-choice-letter {
    background: var(--mnwd-akzent) !important;
    color: #fff !important;
}

/* Text Input Quiz */
.mnw-quiz-text-input {
    display: flex !important;
    gap: 10px !important;
    justify-content: center !important;
    margin: 20px 0 !important;
}

.mnw-quiz-answer {
    padding: 14px 20px !important;
    font-size: 18px !important;
    font-family: var(--mnwd-schrift-titel) !important;
    border: 2px solid var(--mnwd-linie-stark) !important;
    border-radius: 10px !important;
    min-width: 220px !important;
    text-align: center !important;
    transition: all 0.2s ease !important;
}

.mnw-quiz-answer:focus {
    border-color: var(--mnw-turkis, var(--mnwd-akzent)) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px var(--mnwd-akzent-a1) !important;
}

.mnw-quiz-answer.correct {
    border-color: var(--mnwd-erfolg) !important;
    background: var(--mnwd-erfolg-l) !important;
}

.mnw-quiz-answer.wrong {
    border-color: #c62828 !important;
    background: var(--mnwd-fehler-l) !important;
}

.mnw-quiz-submit {
    padding: 14px 28px !important;
    background: var(--mnw-turkis, var(--mnwd-akzent)) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    font-family: var(--mnwd-schrift-titel) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.mnw-quiz-submit:hover:not(:disabled) {
    background: var(--mnwd-akzent-l23-9) !important;
    transform: translateY(-1px) !important;
}

.mnw-quiz-submit:disabled {
    background: #ccc !important;
    cursor: not-allowed !important;
}

/* Quiz Hint */
.mnw-quiz-hint {
    color: #888 !important;
    font-size: 13px !important;
    margin-top: 10px !important;
}

/* Quiz Feedback */
.mnw-quiz-feedback {
    text-align: center !important;
    padding: 30px !important;
    margin: 20px 0 !important;
    border-radius: 12px !important;
    background: #f5f5f5 !important;
}

.mnw-quiz-feedback.correct {
    background: var(--mnwd-erfolg-l) !important;
    border: 2px solid var(--mnwd-erfolg) !important;
}

.mnw-quiz-feedback.wrong {
    background: var(--mnwd-fehler-l) !important;
    border: 2px solid #c62828 !important;
}

.mnw-quiz-feedback .mnw-quiz-feedback-icon {
    font-size: 48px !important;
    margin-bottom: 15px !important;
}

.mnw-quiz-feedback.correct .mnw-quiz-feedback-icon {
    color: var(--mnwd-erfolg) !important;
}

.mnw-quiz-feedback.wrong .mnw-quiz-feedback-icon {
    color: #c62828 !important;
}

.mnw-quiz-feedback .mnw-quiz-feedback-text {
    font-size: 16px !important;
    color: #333 !important;
    line-height: 1.6 !important;
}

.mnw-quiz-feedback .mnw-quiz-feedback-points {
    display: block !important;
    font-size: 18px !important;
    font-weight: bold !important;
    margin-top: 10px !important;
}

.mnw-quiz-feedback.correct .mnw-quiz-feedback-points {
    color: var(--mnwd-erfolg) !important;
}

.mnw-quiz-feedback.wrong .mnw-quiz-feedback-points {
    color: #888 !important;
}

.mnw-quiz-feedback .mnw-feedback-icon {
    font-size: 48px !important;
    margin-bottom: 15px !important;
}

/* Quiz Type Answer Feedback (for MC, Text, Piano) */
.mnw-quiz-answer-feedback {
    text-align: center !important;
    padding: 10px 0 !important;
}

.mnw-quiz-answer-box {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 24px !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    margin-bottom: 12px !important;
}

.mnw-quiz-answer-box.correct {
    background: var(--mnwd-akzent2-a15) !important;
    border: 2px solid var(--mnwd-akzent2) !important;
    color: #111416 !important;
}

.mnw-quiz-answer-box.wrong {
    background: rgba(231, 76, 60, 0.1) !important;
    border: 2px solid var(--mnwd-fehler) !important;
    color: #111416 !important;
}

.mnw-quiz-answer-icon {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    font-weight: bold !important;
    flex-shrink: 0 !important;
}

.mnw-quiz-answer-box.correct .mnw-quiz-answer-icon {
    background: var(--mnwd-akzent2) !important;
    color: var(--mnwd-auf-akzent2) !important;
}

.mnw-quiz-answer-box.wrong .mnw-quiz-answer-icon {
    background: #E74C3C !important;
    color: white !important;
}

.mnw-quiz-answer-text {
    font-size: 16px !important;
}

.mnw-quiz-correct-answer {
    margin-top: 8px !important;
    font-size: 14px !important;
    color: var(--mnwd-gedaempft) !important;
}

.mnw-quiz-correct-label {
    color: #888 !important;
}

.mnw-quiz-correct-value {
    font-weight: 600 !important;
    color: var(--mnwd-erfolg) !important;
}

/* Piano Stats in Quiz Feedback */
.mnw-quiz-piano-stats {
    display: flex !important;
    justify-content: center !important;
    gap: 20px !important;
    margin-top: 16px !important;
    padding-top: 16px !important;
    border-top: 1px solid #e0e0e0 !important;
}

.mnw-quiz-piano-stats .mnw-stat-box {
    text-align: center !important;
    min-width: 80px !important;
}

.mnw-quiz-feedback.success .mnw-feedback-icon {
    color: var(--mnwd-erfolg) !important;
}

.mnw-quiz-feedback.error .mnw-feedback-icon {
    color: #c62828 !important;
}

.mnw-quiz-feedback .mnw-feedback-message {
    font-size: 18px !important;
    font-weight: 600 !important;
    margin-bottom: 15px !important;
    color: #333 !important;
}

.mnw-quiz-feedback .mnw-feedback-points {
    font-size: 24px !important;
    font-weight: bold !important;
    margin-bottom: 20px !important;
}

.mnw-quiz-feedback.success .mnw-feedback-points {
    color: var(--mnwd-erfolg) !important;
}

.mnw-quiz-feedback.error .mnw-feedback-points {
    color: #888 !important;
}

.mnw-quiz-feedback .mnw-feedback-continue {
    padding: 12px 30px !important;
    background: var(--mnw-turkis, var(--mnwd-akzent)) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.mnw-quiz-feedback .mnw-feedback-continue:hover {
    background: var(--mnwd-akzent-l23-9) !important;
}

/* Generic hidden class */
.mnw-hidden {
    display: none !important;
}

/* ========================================
   RESPONSIVE DESIGN - MOBILE FIRST
   ======================================== */

/* Tablets and smaller (max-width: 768px) */
@media (max-width: 768px) {
    .mnw-container {
        padding: 8px !important;
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    
    .mnw-game-area {
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }
    
    .mnw-toolbar {
        width: 100% !important;
        min-width: auto !important;
        order: 1 !important; /* Toolbar above staff on mobile */
        box-sizing: border-box !important;
    }
    
    .mnw-staff-area {
        min-width: auto !important;
        order: 2 !important;
        width: 100% !important;
        padding: 10px !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }
    
    /* Task card full width */
    .mnw-task-card {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Compact toolbar layout */
    .mnw-toolbar-compact {
        padding: 8px !important;
    }
    
    .mnw-toolbar-compact .mnw-tool-row {
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        gap: 6px !important;
    }
    
    .mnw-tool-section {
        flex: 0 0 auto !important;
        padding: 6px 8px !important;
        margin: 2px !important;
    }
    
    .mnw-tool-label {
        font-size: 9px !important;
        margin-bottom: 4px !important;
    }
    
    .mnw-tool-buttons {
        gap: 3px !important;
        flex-wrap: wrap !important;
    }
    
    /* Tool buttons on tablet - larger icons */
    .mnw-container button.mnw-tool,
    button.mnw-tool {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        padding: 6px !important;
        font-size: 24px !important;
    }
    
    /* Rest buttons on mobile - centered */
    .mnw-container button.mnw-rest-btn .rest-symbol,
    button.mnw-rest-btn .rest-symbol {
        transform: translateY(0px) !important;
    }
    
    .mnw-container button.mnw-rest-whole .rest-symbol,
    button.mnw-rest-whole .rest-symbol {
        transform: translateY(-3px) !important;
    }
    
    .mnw-container button.mnw-rest-half .rest-symbol,
    button.mnw-rest-half .rest-symbol {
        transform: translateY(3px) !important;
    }
    
    /* Palette system on mobile */
    .mnw-palette {
        flex-wrap: wrap !important;
    }
    
    .mnw-palette-toggle {
        width: 42px !important;
        height: 42px !important;
        padding: 6px !important;
        font-size: 22px !important;
    }
    
    .mnw-palette-items {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: auto !important;
        border: 2px solid var(--mnw-turkis) !important;
        border-radius: var(--mnw-radius-sm) !important;
        margin-top: 4px !important;
        z-index: 1000 !important;
        flex-wrap: wrap !important;
        max-width: 200px !important;
        padding: 6px !important;
    }
    
    .mnw-palette-toggle.expanded {
        border-radius: var(--mnw-radius-sm) !important;
    }
    
    .mnw-palette-item {
        width: 40px !important;
        height: 40px !important;
        font-size: 18px !important;
    }
    
    /* Actions row - wrap but keep back/skip side by side */
    .mnw-actions {
        flex-wrap: wrap !important;
        gap: 8px !important;
        width: 100% !important;
    }
    
    .mnw-actions #mnw-back-btn,
    .mnw-actions #mnw-skip-btn {
        flex: 1 !important;
        min-width: 0 !important;
    }
    
    /* Play controls - full width and wrap */
    .mnw-play-controls {
        width: 100% !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
    }
    
    /* Play controls - special layout */
    .mnw-play-controls .mnw-btn-play {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 50% !important;
    }
    
    .mnw-play-controls .mnw-btn-loop {
        width: auto !important;
        flex: 0 0 auto !important;
        padding: 12px 16px !important;
    }
    
    /* All other buttons full width on mobile (except back/skip) */
    .mnw-actions > .mnw-btn:not(#mnw-back-btn):not(#mnw-skip-btn),
    .mnw-container .mnw-actions > button.mnw-btn:not(#mnw-back-btn):not(#mnw-skip-btn) {
        width: 100% !important;
        min-width: auto !important;
        padding: 12px 16px !important;
        font-size: 15px !important;
        box-sizing: border-box !important;
    }
    
    /* Tempo control inline with loop */
    .mnw-tempo-control {
        flex: 0 0 auto !important;
    }
    
    /* Button group - full width */
    .mnw-btn-group {
        width: 100% !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }
    
    .mnw-btn-group .mnw-btn {
        flex: 1 1 45% !important;
        min-width: 0 !important;
    }
    
    /* Export dropdown - full width */
    .mnw-export-dropdown {
        width: 100% !important;
    }
    
    .mnw-export-dropdown .mnw-btn {
        width: 100% !important;
    }
    
    /* Metronome toggle */
    .mnw-metronome-toggle {
        flex: 0 0 auto !important;
    }
    
    /* Header */
    .mnw-header {
        flex-direction: column !important;
        gap: 8px !important;
        text-align: center !important;
    }
    
    .mnw-title {
        font-size: 1.2rem !important;
    }
    
    /* Task card */
    .mnw-task-card {
        padding: 12px !important;
    }
    
    .mnw-task-text {
        font-size: 16px !important;
    }
    
    /* Staff inner elements full width */
    .mnw-staff-scroll-container {
        width: 100% !important;
        position: relative !important;
    }
    
    /* Mobile scroll buttons - compact floating style */
    .mnw-scroll-btn {
        display: flex !important;
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 100 !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        background: var(--mnwd-akzent-a9) !important;
        color: white !important;
        border: none !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
        font-size: 20px !important;
        font-weight: bold !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .mnw-scroll-btn.mnw-scroll-left {
        left: 5px !important;
    }
    
    .mnw-scroll-btn.mnw-scroll-right {
        right: 5px !important;
    }
    
    .mnw-scroll-btn:hover {
        transform: translateY(-50%) !important;
        background: var(--mnwd-akzent) !important;
    }
    
    .mnw-scroll-btn:active {
        transform: translateY(-50%) !important;
        background: var(--mnwd-akzent) !important;
    }
    
    .mnw-scroll-btn:disabled {
        opacity: 0.3 !important;
        transform: translateY(-50%) !important;
    }
    
    .mnw-scroll-btn:disabled:hover {
        transform: translateY(-50%) !important;
    }
    
    .mnw-staff-wrapper {
        width: 100% !important;
        min-width: 0 !important;
        border-radius: var(--mnw-radius-sm) !important;
        /* Smooth touch scrolling */
        -webkit-overflow-scrolling: touch !important;
        scroll-behavior: smooth !important;
    }
    
    /* Fade indicator on right edge showing more content */
    .mnw-staff-scroll-container::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 20px;
        background: linear-gradient(90deg, transparent, var(--mnwd-akzent-a15));
        pointer-events: none;
        border-radius: 0 var(--mnw-radius-sm) var(--mnw-radius-sm) 0;
    }
    
    .mnw-staff-controls {
        width: 100% !important;
        flex-wrap: nowrap !important;
    }
    
    .mnw-staff-controls .mnw-zoom-control {
        flex: 1 !important;
        min-width: 0 !important;
    }
    
    .mnw-staff-controls .mnw-zoom-control input[type="range"] {
        width: 50px !important;
    }
    
    .mnw-staff-controls .mnw-btn-add {
        flex-shrink: 0 !important;
        width: auto !important;
        flex: 0 0 auto !important;
    }
    
    .mnw-staff-controls .mnw-measure-buttons {
        flex: 0 0 auto !important;
        gap: 6px !important;
    }
    
    .mnw-actions {
        width: 100% !important;
    }
}

/* Small phones (max-width: 480px) */
@media (max-width: 480px) {
    .mnw-container {
        padding: 4px !important;
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
    }
    
    .mnw-game-area {
        width: 100% !important;
    }
    
    .mnw-toolbar {
        width: 100% !important;
    }
    
    .mnw-staff-area {
        width: 100% !important;
        padding: 8px !important;
        overflow: hidden !important;
    }
    
    /* v3.99.178: nowrap statt wrap — vorher brach jeder Takt-Button auf eine
       eigene Zeile um. Zoomregler + beide Takt-Buttons teilen sich jetzt eine Zeile. */
    .mnw-staff-controls {
        flex-wrap: nowrap !important;
        gap: 6px !important;
    }
    
    .mnw-zoom-control {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        padding: 3px 6px !important;
        gap: 4px !important;
    }
    
    .mnw-zoom-control input[type="range"] {
        width: 100% !important;
        min-width: 30px !important;
    }
    
    .mnw-zoom-icon {
        display: none !important;
    }
    
    .mnw-staff-controls .mnw-measure-buttons {
        flex: 0 0 auto !important;
        gap: 4px !important;
    }
    
    .mnw-staff-controls .mnw-btn-add {
        flex: 0 0 auto !important;
        flex-shrink: 0 !important;
        width: auto !important;
        padding: 6px 9px !important;
        font-size: 12px !important;
        gap: 3px !important;
    }
    
    .mnw-task-card {
        width: 100% !important;
    }
    
    /* Even more compact toolbar */
    .mnw-toolbar-compact .mnw-tool-row {
        gap: 4px !important;
    }
    
    .mnw-tool-section {
        padding: 4px 6px !important;
        border-radius: 6px !important;
    }
    
    .mnw-tool-label {
        font-size: 8px !important;
        letter-spacing: 0.3px !important;
    }
    
    /* Tool buttons on small phones - larger icons */
    .mnw-container button.mnw-tool,
    button.mnw-tool {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        padding: 4px !important;
        font-size: 22px !important;
    }
    
    .mnw-palette-toggle {
        width: 38px !important;
        height: 38px !important;
        font-size: 25px !important;
    }
    
    .mnw-palette-item {
        width: 36px !important;
        height: 36px !important;
        font-size: 16px !important;
    }
    
    .mnw-palette-items {
        max-width: 180px !important;
    }
    
    /* Actions - keep back/skip horizontal */
    .mnw-actions {
        flex-wrap: wrap !important;
        width: 100% !important;
    }
    
    #mnw-back-btn,
    #mnw-skip-btn {
        flex: 1 !important;
        min-width: 0 !important;
    }
    
    /* Play controls row - inline but wrapped */
    .mnw-play-controls {
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    
    .mnw-play-controls .mnw-btn-play {
        flex: 1 1 auto !important;
        min-width: 60% !important;
    }
    
    .mnw-play-controls .mnw-btn-loop,
    .mnw-play-controls .mnw-tempo-control {
        flex: 0 0 auto !important;
    }
    
    .mnw-container button.mnw-btn:not(#mnw-back-btn):not(#mnw-skip-btn):not(.mnw-quiz-back-btn):not(.mnw-quiz-skip-btn),
    button.mnw-btn:not(#mnw-back-btn):not(#mnw-skip-btn):not(.mnw-quiz-back-btn):not(.mnw-quiz-skip-btn) {
        width: 100% !important;
        min-width: auto !important;
    }
    
    #mnw-back-btn,
    #mnw-skip-btn,
    .mnw-quiz-back-btn,
    .mnw-quiz-skip-btn {
        width: auto !important;
        flex: 1 1 0% !important;
        min-width: 0 !important;
        padding: 10px 14px !important;
    }
    
    /* Title */
    .mnw-title {
        font-size: 1.1rem !important;
    }
    
    .mnw-task-text {
        font-size: 14px !important;
    }
    
    /* Stats */
    .mnw-stats {
        font-size: 14px !important;
    }
    
    /* Prelistening */
    .mnw-prelistening-controls {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
    }
}

/* Touch-optimized styles (any touch device) */
@media (pointer: coarse) {
    /* Larger touch targets with big icons */
    .mnw-container button.mnw-tool,
    button.mnw-tool {
        min-width: 44px !important;
        min-height: 44px !important;
        font-size: 26px !important;
    }
    
    .mnw-palette-toggle {
        min-width: 44px !important;
        min-height: 44px !important;
        font-size: 24px !important;
    }
    
    .mnw-palette-item {
        min-width: 42px !important;
        min-height: 42px !important;
        font-size: 25px !important;
    }
    
    /* Larger action buttons */
    .mnw-container button.mnw-btn,
    button.mnw-btn {
        min-height: 48px !important;
        padding: 12px 20px !important;
    }
    
    /* Prevent text selection on touch */
    .mnw-toolbar,
    .mnw-drum-grid,
    .mnw-staff-area,
    .mnw-palette {
        -webkit-user-select: none !important;
        user-select: none !important;
        -webkit-touch-callout: none !important;
    }
    
    /* Touch-active feedback */
    .mnw-container button.mnw-tool:active,
    button.mnw-tool:active,
    .mnw-palette-item:active {
        transform: scale(0.95) !important;
        transition: transform 0.1s !important;
    }
    
    /* Drum grid cells - larger for touch */
    .mnw-drum-cell,
    .mnw-drum-beat-cell {
        min-width: 32px !important;
        min-height: 32px !important;
    }
}

/* Landscape mode on mobile */
@media (max-height: 500px) and (orientation: landscape) {
    .mnw-game-area {
        flex-direction: row !important;
    }
    
    .mnw-toolbar {
        width: auto !important;
        max-width: 200px !important;
        order: 1 !important;
    }
    
    .mnw-staff-area {
        order: 2 !important;
        flex: 1 !important;
    }
    
    .mnw-toolbar-compact .mnw-tool-row {
        flex-direction: column !important;
    }
    
    .mnw-tool-section {
        width: 100% !important;
    }
}

/* Very small height (keyboard open on mobile) */
@media (max-height: 400px) {
    .mnw-header {
        display: none !important;
    }
    
    .mnw-task-card {
        padding: 8px !important;
        margin-bottom: 8px !important;
    }
    
    .mnw-task-text {
        font-size: 12px !important;
    }
}

/* ============================================
   INTERACTIVE PIANO KEYBOARD STYLES
   ============================================ */

.mnw-piano-quiz-wrapper {
    font-family: var(--mnwd-schrift-text), var(--mnwd-schrift-titel), -apple-system, sans-serif !important;
    margin: 20px 0 !important;
    padding: 20px !important;
    background: linear-gradient(180deg, #FAFBFC 0%, #F5F6F8 100%) !important;
    border-radius: 16px !important;
    border: 1px solid #E8E8E8 !important;
    text-align: center !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.mnw-piano-question {
    font-size: 16px !important;
    color: var(--mnwd-gedaempft) !important;
    margin-bottom: 16px !important;
}
.mnw-piano-question strong {
    color: var(--mnwd-akzent) !important;
    font-size: 1.1em !important;
}

.mnw-piano-keyboard-container {
    position: relative !important;
    background: linear-gradient(180deg, #111416 0%, #1a1a1a 100%) !important;
    padding: 12px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
    margin: 10px auto 20px !important;
    
    /* CRITICAL: Force scrolling */
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    
    /* NO scroll-behavior - we need instant scrollLeft */
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
}

/* Hide native scrollbar - custom JS scrollbar replaces it */
.mnw-piano-keyboard-container::-webkit-scrollbar {
    height: 0px !important;
    display: none !important;
}
.mnw-piano-keyboard-container {
    scrollbar-width: none !important;
}

/* LearnDash specific overrides */
.wpProQuiz_content .mnw-piano-keyboard-container,
.ld-quiz .mnw-piano-keyboard-container,
.learndash-wrapper .mnw-piano-keyboard-container {
    display: block !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    width: 100% !important;
}

/* Ensure keyboard is wider than container */
.mnw-piano-keys {
    display: flex !important;
    position: relative !important;
    height: 120px !important;
    min-width: 800px !important;
    width: max-content !important;
}


.mnw-piano-key {
    position: relative !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    user-select: none !important;
}

.mnw-piano-key-white {
    position: relative !important;
    width: 36px !important;
    height: 120px !important;
    background: linear-gradient(180deg, #fff 0%, #f8f8f8 90%, #e8e8e8 100%) !important;
    border: 1px solid var(--mnwd-linie-stark) !important;
    border-radius: 0 0 5px 5px !important;
    margin-right: 2px !important;
    z-index: 1 !important;
    box-shadow: 0 2px 3px rgba(0,0,0,0.1) !important;
}
.mnw-piano-key-white:hover {
    background: linear-gradient(180deg, #f5f5f5 0%, #eee 100%) !important;
}
.mnw-piano-key-white.pressed {
    background: linear-gradient(180deg, var(--mnwd-akzent2) 0%, var(--mnwd-akzent2-l37-3s73-7) 100%) !important;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.2) !important;
}
.mnw-piano-key-white.correct {
    background: linear-gradient(180deg, #27AE60 0%, #1e8449 100%) !important;
}
.mnw-piano-key-white.incorrect {
    background: linear-gradient(180deg, #E74C3C 0%, #c0392b 100%) !important;
}
.mnw-piano-key-white.hint {
    background: linear-gradient(180deg, #3498DB 0%, #2980b9 100%) !important;
}

.mnw-piano-key-black {
    position: absolute !important;
    width: 24px !important;
    height: 75px !important;
    background: linear-gradient(180deg, #111416 0%, #1a1a1a 100%) !important;
    border-radius: 0 0 4px 4px !important;
    z-index: 2 !important;
    box-shadow: 0 3px 5px rgba(0,0,0,0.4) !important;
}
.mnw-piano-key-black:hover {
    background: linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 100%) !important;
}
.mnw-piano-key-black.pressed {
    background: linear-gradient(180deg, var(--mnwd-akzent) 0%, var(--mnwd-akzent-l21) 100%) !important;
    box-shadow: inset 0 2px 3px rgba(0,0,0,0.3) !important;
}
.mnw-piano-key-black.correct {
    background: linear-gradient(180deg, #27AE60 0%, #1e8449 100%) !important;
}
.mnw-piano-key-black.incorrect {
    background: linear-gradient(180deg, #E74C3C 0%, #c0392b 100%) !important;
}
.mnw-piano-key-black.hint {
    background: linear-gradient(180deg, #3498DB 0%, #2980b9 100%) !important;
}

/* Quiz Options */
.mnw-piano-options {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
    margin: 16px 0 !important;
}

.mnw-piano-option {
    padding: 12px 24px !important;
    background: white !important;
    border: 2px solid #E0E0E0 !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #111416 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}
.mnw-piano-option:hover {
    border-color: var(--mnwd-akzent) !important;
    color: var(--mnwd-akzent) !important;
    transform: translateY(-2px) !important;
}
.mnw-piano-option.selected {
    background: var(--mnwd-akzent) !important;
    border-color: var(--mnwd-akzent) !important;
    color: white !important;
}
.mnw-piano-option.correct {
    background: #27AE60 !important;
    border-color: var(--mnwd-erfolg) !important;
    color: white !important;
}
.mnw-piano-option.incorrect {
    background: #E74C3C !important;
    border-color: var(--mnwd-fehler) !important;
    color: white !important;
}
.mnw-piano-option:disabled {
    cursor: not-allowed !important;
    opacity: 0.7 !important;
}

/* Controls */
.mnw-piano-controls {
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
    margin-top: 16px !important;
}

.mnw-piano-check-btn,
.mnw-piano-reset-btn {
    padding: 10px 24px !important;
    border: none !important;
    border-radius: 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}
.mnw-piano-check-btn {
    background: var(--mnwd-akzent2) !important;
    color: var(--mnwd-auf-akzent2) !important;
}
.mnw-piano-check-btn:hover {
    background: var(--mnwd-akzent2-l37-3s73-7) !important;
}
.mnw-piano-reset-btn {
    background: #E0E0E0 !important;
    color: var(--mnwd-gedaempft) !important;
}
.mnw-piano-reset-btn:hover {
    background: #ccc !important;
}

/* Feedback */
.mnw-piano-feedback {
    margin-top: 16px !important;
    padding: 16px !important;
    border-radius: 12px !important;
    text-align: center !important;
}
.mnw-piano-feedback.correct {
    background: linear-gradient(135deg, #E8F5E9, #C8E6C9) !important;
    border: 2px solid var(--mnwd-erfolg) !important;
}
.mnw-piano-feedback.incorrect {
    background: linear-gradient(135deg, #FFEBEE, #FFCDD2) !important;
    border: 2px solid var(--mnwd-fehler) !important;
}
.mnw-piano-feedback-emoji {
    font-size: 32px !important;
    margin-bottom: 8px !important;
}
.mnw-piano-feedback-text {
    font-size: 15px !important;
    color: #111416 !important;
    margin: 0 !important;
}

/* ============================================
   INTERVAL FINE SELECTION UI
   ============================================ */

.mnw-interval-fine-ui {
    padding: 10px 0 !important;
}

.mnw-interval-step {
    animation: mnw-fade-in 0.3s ease !important;
}

.mnw-interval-step-label {
    font-family: var(--mnwd-schrift-titel) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--mnw-turkis) !important;
    margin-bottom: 15px !important;
    text-align: center !important;
}

.mnw-interval-coarse-buttons,
.mnw-interval-quality-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    justify-content: center !important;
    margin-bottom: 15px !important;
}

.mnw-interval-coarse-btn,
.mnw-interval-quality-btn {
    padding: 12px 20px !important;
    font-family: var(--mnwd-schrift-text) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border: 2px solid var(--mnw-turkis) !important;
    border-radius: var(--mnw-radius-sm) !important;
    background: var(--mnw-white) !important;
    color: var(--mnw-turkis) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    min-width: 100px !important;
}

.mnw-interval-coarse-btn:hover,
.mnw-interval-quality-btn:hover {
    background: var(--mnw-turkis) !important;
    color: var(--mnw-white) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px var(--mnwd-akzent-a3) !important;
}

.mnw-interval-quality-btn {
    min-width: 120px !important;
}

/* v3.85.36: Visual feedback during selection — before grading triggers */
.mnw-interval-quality-btn.selected,
.mnw-interval-coarse-btn.selected {
    background: linear-gradient(135deg, var(--mnwd-akzent) 0%, var(--mnwd-akzent-l35s89) 100%) !important;
    border-color: var(--mnwd-akzent) !important;
    color: #fff !important;
    transform: scale(1.04);
    box-shadow: 0 4px 12px var(--mnwd-akzent-a35) !important;
    transition: transform .15s ease, box-shadow .15s ease !important;
}

.mnw-interval-quality-btn.correct {
    background: var(--mnw-green) !important;
    border-color: var(--mnw-green) !important;
    color: var(--mnw-white) !important;
}

.mnw-interval-quality-btn.wrong {
    background: #e74c3c !important;
    border-color: var(--mnwd-fehler) !important;
    color: var(--mnw-white) !important;
}

.mnw-interval-quality-btn.disabled {
    pointer-events: none !important;
    opacity: 0.7 !important;
}

.mnw-interval-selected-coarse {
    text-align: center !important;
    margin-bottom: 15px !important;
}

.mnw-selected-interval-name {
    display: inline-block !important;
    padding: 8px 20px !important;
    background: linear-gradient(135deg, var(--mnwd-akzent-l96s43) 0%, #e8f5e9 100%) !important;
    border: 2px solid var(--mnw-turkis) !important;
    border-radius: var(--mnw-radius-sm) !important;
    font-family: var(--mnwd-schrift-titel) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--mnw-turkis) !important;
}

.mnw-interval-back-btn {
    display: block !important;
    margin: 15px auto 0 !important;
    padding: 8px 20px !important;
    font-family: var(--mnwd-schrift-text) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border: 1px solid var(--mnwd-linie-stark) !important;
    border-radius: var(--mnw-radius-sm) !important;
    background: var(--mnw-white) !important;
    color: var(--mnwd-gedaempft) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.mnw-interval-back-btn:hover {
    background: #f5f5f5 !important;
    border-color: var(--mnwd-linie-stark) !important;
    color: #333 !important;
}

@keyframes mnw-fade-in {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================
   QUIZ NAVIGATION (Skip/Back Buttons)
   ============================================ */

.mnw-quiz-navigation {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 20px !important;
    padding-top: 15px !important;
    border-top: 1px solid #e0e0e0 !important;
}

.mnw-quiz-back-btn,
.mnw-quiz-skip-btn {
    padding: 8px 16px !important;
    font-family: var(--mnwd-schrift-text) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border: 1px solid var(--mnwd-linie-stark) !important;
    border-radius: var(--mnw-radius-sm) !important;
    background: var(--mnw-white) !important;
    color: var(--mnwd-gedaempft) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}

.mnw-quiz-back-btn:hover,
.mnw-quiz-skip-btn:hover {
    background: #f5f5f5 !important;
    border-color: var(--mnw-turkis) !important;
    color: var(--mnw-turkis) !important;
}

.mnw-quiz-back-btn .btn-icon,
.mnw-quiz-skip-btn .btn-icon {
    font-size: 16px !important;
}

/* Responsive */
@media (max-width: 500px) {
    .mnw-piano-key-white {
        width: 28px !important;
        height: 100px !important;
    }
    .mnw-piano-key-black {
        width: 18px !important;
        height: 60px !important;
    }
    .mnw-piano-keys {
        height: 100px !important;
    }
    
    .mnw-interval-coarse-btn,
    .mnw-interval-quality-btn {
        min-width: 80px !important;
        padding: 10px 15px !important;
        font-size: 14px !important;
    }
    
    .mnw-quiz-navigation {
        gap: 10px !important;
    }
    
    .mnw-quiz-back-btn,
    .mnw-quiz-skip-btn {
        flex: 1 !important;
        justify-content: center !important;
        min-width: 0 !important;
    }
}

/* ============================================
   TASK DETAIL REVIEW STYLES
   ============================================ */

.mnw-review-section {
    margin-bottom: 20px !important;
}

.mnw-review-label {
    font-family: var(--mnwd-schrift-titel) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--mnwd-gedaempft) !important;
    margin-bottom: 10px !important;
}

.mnw-review-choices {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.mnw-review-choice {
    padding: 12px 15px !important;
    background: #f5f5f5 !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: var(--mnw-radius-sm) !important;
    font-family: var(--mnwd-schrift-text) !important;
    font-size: 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    pointer-events: none !important;
}

.mnw-review-choice.correct {
    background: var(--mnwd-erfolg-l) !important;
    border-color: var(--mnw-green) !important;
    color: var(--mnwd-erfolg) !important;
}

.mnw-review-choice.wrong {
    background: var(--mnwd-fehler-l) !important;
    border-color: var(--mnwd-fehler) !important;
    color: #c62828 !important;
}

.mnw-review-choice.selected {
    border-width: 3px !important;
}

.mnw-choice-indicator {
    font-size: 16px !important;
    font-weight: bold !important;
}

.mnw-review-answer-summary {
    background: #FAF8F3 !important;
    border-radius: var(--mnw-radius-sm) !important;
    padding: 15px !important;
    margin-top: 15px !important;
}

.mnw-review-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid #e0e0e0 !important;
}

.mnw-review-row:last-child {
    border-bottom: none !important;
}

.mnw-review-key {
    font-family: var(--mnwd-schrift-text) !important;
    font-size: 14px !important;
    color: var(--mnwd-gedaempft) !important;
}

.mnw-review-value {
    font-family: var(--mnwd-schrift-titel) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}

.mnw-review-value.correct {
    color: var(--mnw-green) !important;
}

.mnw-review-value.wrong {
    color: var(--mnwd-fehler) !important;
}

.mnw-review-skipped {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 30px !important;
    background: #f5f5f5 !important;
    border-radius: var(--mnw-radius-sm) !important;
    color: var(--mnwd-schwach) !important;
}

.mnw-skipped-icon {
    font-size: 40px !important;
    margin-bottom: 10px !important;
}

.mnw-skipped-text {
    font-family: var(--mnwd-schrift-text) !important;
    font-size: 14px !important;
}

/* Solution Preview in Task Detail */
.mnw-solution-preview {
    margin-top: 20px !important;
    padding-top: 15px !important;
    border-top: 1px dashed #e0e0e0 !important;
}

.mnw-solution-preview-label {
    font-family: var(--mnwd-schrift-titel) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #e91e63 !important;
    margin-bottom: 10px !important;
}

.mnw-solution-preview-staff {
    background: linear-gradient(135deg, #fff5f8 0%, #ffe8f0 100%) !important;
    border: 2px solid #e91e63 !important;
    border-radius: var(--mnw-radius-sm) !important;
    padding: 10px !important;
}

/* Review Staff Preview */
.mnw-review-staff-preview {
    background: #FAF8F3 !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: var(--mnw-radius-sm) !important;
    padding: 10px !important;
    margin-bottom: 15px !important;
}

/* Review Audio Only */
.mnw-review-audio-only {
    padding: 15px !important;
    text-align: center !important;
    background: #f0f8ff !important;
    border-radius: var(--mnw-radius-sm) !important;
    margin-bottom: 15px !important;
}

/* Review Piano Container */
.mnw-review-piano-container {
    padding: 15px !important;
    background: #FAF8F3 !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: var(--mnw-radius-sm) !important;
    margin-bottom: 15px !important;
    overflow-x: auto !important;
}

.mnw-review-piano-keys {
    position: relative !important;
    display: inline-flex !important;
    height: 120px !important;
    margin: 0 auto !important;
}

.mnw-review-piano-keys .mnw-piano-key-white {
    width: 38px !important;
    height: 120px !important;
    background: white !important;
    border: 1px solid var(--mnwd-linie-stark) !important;
    border-radius: 0 0 4px 4px !important;
    margin-right: -1px !important;
    z-index: 1 !important;
}

.mnw-review-piano-keys .mnw-piano-key-black {
    width: 24px !important;
    height: 75px !important;
    background: #333 !important;
    border-radius: 0 0 3px 3px !important;
    position: absolute !important;
    top: 0 !important;
    z-index: 2 !important;
}

/* Piano key states */
.mnw-review-piano-keys .mnw-piano-key.pressed {
    background: var(--mnw-teal) !important;
}

.mnw-review-piano-keys .mnw-piano-key-black.pressed {
    background: var(--mnwd-akzent-l20) !important;
}

.mnw-review-piano-keys .mnw-piano-key.correct {
    background: #4caf50 !important;
}

.mnw-review-piano-keys .mnw-piano-key-black.correct {
    background: #2e7d32 !important;
}

.mnw-review-piano-keys .mnw-piano-key.incorrect {
    background: #f44336 !important;
}

.mnw-review-piano-keys .mnw-piano-key-black.incorrect {
    background: #c62828 !important;
}

.mnw-review-piano-keys .mnw-piano-key.hint {
    background: #2196f3 !important;
}

.mnw-review-piano-keys .mnw-piano-key-black.hint {
    background: #1565c0 !important;
}

/* Piano Legend */
.mnw-piano-legend {
    display: flex !important;
    justify-content: center !important;
    gap: 20px !important;
    margin-top: 15px !important;
    font-size: 12px !important;
    color: var(--mnwd-gedaempft) !important;
}

.mnw-piano-legend .mnw-legend-item {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
}

.mnw-legend-key {
    width: 16px !important;
    height: 16px !important;
    border-radius: 3px !important;
    border: 1px solid var(--mnwd-linie-stark) !important;
}

.mnw-legend-key.correct {
    background: #4caf50 !important;
}

.mnw-legend-key.hint {
    background: #2196f3 !important;
}

.mnw-legend-key.incorrect {
    background: #f44336 !important;
}


/* Formatierung in LearnDash beibehalten */
.wpProQuiz_content .wpProQuiz_question_text strong,
.wpProQuiz_content .wpProQuiz_question_text b {
    font-weight: 700 !important;
}
.wpProQuiz_content .wpProQuiz_question_text em,
.wpProQuiz_content .wpProQuiz_question_text i {
    font-style: italic !important;
}
.wpProQuiz_content .wpProQuiz_question_text u {
    text-decoration: underline !important;
}

/* C4 Label auf Klaviatur */
.mnw-piano-key-label {
    position: absolute !important;
    bottom: 5px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    font-family: var(--mnwd-schrift-titel) !important;
    color: var(--mnwd-akzent) !important;
    background: transparent !important;
    padding: 0 !important;
    z-index: 5 !important;
    pointer-events: none !important;
    white-space: nowrap !important;
}

/* Keyboard Container Scroll-Verhalten - FORCE SCROLLING */
.mnw-piano-keyboard-container {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    display: block !important;
    max-width: 100% !important;
    width: 100% !important;
    position: relative !important;
    /* scroll-behavior removed - we set scrollLeft directly via JS */
}

/* LearnDash specific fixes for piano keyboard */
.wpProQuiz_content .mnw-piano-keyboard-container,
.ld-quiz .mnw-piano-keyboard-container,
.learndash-wrapper .mnw-piano-keyboard-container {
    max-width: 100% !important;
    margin: 0 auto !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

/* Ensure keyboard wrapper (inside container) is scrollable */
.mnw-free-choice-editor .mnw-piano-keyboard-container,
.mnw-piano-quiz-wrapper .mnw-piano-keyboard-container {
    max-width: 100% !important;
    margin: 0 auto !important;
}

/* Piano keys must be wider than container to enable scrolling */
.mnw-piano-keyboard-container .mnw-piano-keys {
    display: flex !important;
    position: relative !important;
    min-width: 800px !important;
    width: max-content !important;
}

/* =================================================================
   THEORY MODULE NOTATION - SCROLL, ZOOM & CURSOR (v3.3.0)
   ================================================================= */

/* Scroll Container */
.mnw-staff-scroll-container {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    scroll-behavior: smooth;
}

/* Hide scrollbar but keep functionality */
.mnw-staff-scroll-container::-webkit-scrollbar {
    height: 8px;
}

.mnw-staff-scroll-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
}

.mnw-staff-scroll-container::-webkit-scrollbar-thumb {
    background: var(--mnwd-akzent-a3);
    border-radius: 4px;
}

.mnw-staff-scroll-container::-webkit-scrollbar-thumb:hover {
    background: var(--mnwd-akzent-a5);
}

/* Notation Container - Responsive */
.mnw-theory-notation {
    display: inline-block;
    min-width: 100%;
    transform-origin: top left;
    transition: transform 0.2s ease;
}

/* v3.85.15: Wrapper must scroll horizontally when measure widens for dense rhythms */
.mnw-theory-notation-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

/* Zoom Controls */
.mnw-zoom-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.mnw-zoom-btn {
    width: 32px;
    height: 32px;
    border: 1px solid var(--mnwd-linie-stark);
    border-radius: 50%;
    background: white;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mnw-zoom-btn:hover:not(:disabled) {
    border-color: var(--mnwd-akzent);
    color: var(--mnwd-akzent);
    transform: scale(1.1);
}

.mnw-zoom-btn:active:not(:disabled) {
    transform: scale(0.95);
}

.mnw-zoom-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.mnw-zoom-level {
    min-width: 50px;
    text-align: center;
    font-size: 12px;
    line-height: 32px;
    color: var(--mnwd-gedaempft);
    font-family: var(--mnwd-schrift-text);
    font-weight: 600;
}

/* Playback Cursor */
.mnw-playback-cursor {
    position: absolute;
    width: 2px;
    background: var(--mnwd-akzent);
    opacity: 0;
    transition: left 0.1s linear, opacity 0.2s;
    pointer-events: none;
    z-index: 100;
    box-shadow: 0 0 4px var(--mnwd-akzent-a5);
}

/* Responsive Breakpoints */
@media (max-width: 900px) {
    .mnw-theory-notation-wrapper {
        margin: 15px 0;
    }
    
    .mnw-zoom-controls {
        padding: 3px;
    }
    
    .mnw-zoom-btn {
        width: 28px;
        height: 28px;
        font-size: 16px;
    }
    
    .mnw-zoom-level {
        font-size: 11px;
        min-width: 45px;
        line-height: 28px;
    }
}

@media (max-width: 600px) {
    .mnw-theory-notation-wrapper {
        margin: 10px 0;
    }
    
    .mnw-staff-scroll-container {
        border-radius: 8px;
        padding: 10px;
    }
    
    .mnw-zoom-controls {
        top: 5px;
        right: 5px;
        padding: 2px;
    }
    
    .mnw-zoom-btn {
        width: 26px;
        height: 26px;
        font-size: 14px;
    }
    
    .mnw-zoom-level {
        font-size: 10px;
        min-width: 40px;
        line-height: 26px;
    }
    
    /* Smaller controls on mobile */
    .mnw-theory-notation-controls {
        gap: 6px;
        font-size: 12px;
    }
    
    .mnw-theory-play-btn,
    .mnw-theory-metronome-btn {
        padding: 6px 12px;
        font-size: 12px;
    }
    
    .mnw-theory-tempo-control {
        padding: 3px 8px;
    }
    
    .mnw-theory-tempo-slider {
        width: 60px !important;
    }
}

/* Touch-friendly tap areas on mobile */
@media (hover: none) and (pointer: coarse) {
    .mnw-zoom-btn {
        min-width: 40px;
        min-height: 40px;
    }
    
    .mnw-theory-play-btn,
    .mnw-theory-metronome-btn {
        min-height: 40px;
        padding: 8px 16px;
    }
}

/* Standalone Note Editor (meldo_note_editor shortcode) */
.mnw-standalone-editor {
    min-height: 180px !important;
    cursor: crosshair !important;
    display: inline-block !important;
    min-width: 100% !important;
}

.mnw-standalone-editor svg {
    display: block !important;
}

/* Notation Editor Container (Gutenberg Block) */
.mnw-notation-editor-container {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    position: relative !important;
}

.mnw-notation-editor-container svg {
    display: block !important;
}

/* ============================================
   LEARNDASH QUIZ × MELDO DESIGN UPGRADE
   ============================================ */

/* 1. Hide duplicate LD points + header when MNW editor is present.
   Question text hiding is handled by JS (more precise — won't hide editor inside question_text) */
.wpProQuiz_listItem:has(.mnw-free-choice-editor) .wpProQuiz_points,
.wpProQuiz_listItem.mnw-has-editor .wpProQuiz_points,
li:has(.mnw-free-choice-editor) .wpProQuiz_points,
li.mnw-has-editor .wpProQuiz_points {
    display: none !important;
}
.wpProQuiz_listItem:has(.mnw-free-choice-editor) .wpProQuiz_header,
.wpProQuiz_listItem.mnw-has-editor .wpProQuiz_header,
li:has(.mnw-free-choice-editor) .wpProQuiz_header,
li.mnw-has-editor .wpProQuiz_header {
    display: none !important;
}

/* 2. Styled input fields for quiz_text */
.mnw-free-choice-editor .mnw-quiz-answer {
    width: 100% !important;
    max-width: 420px !important;
    margin: 0 auto !important;
    display: block !important;
    padding: 14px 20px !important;
    font-family: var(--mnwd-schrift-text), var(--mnwd-schrift-titel) !important;
    font-size: 17px !important;
    border: 2px solid #E0E0E0 !important;
    border-left: 4px solid var(--mnw-turkis, var(--mnwd-akzent)) !important;
    border-radius: 12px !important;
    background: #fff !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
    outline: none !important;
    color: #111416 !important;
}
.mnw-free-choice-editor .mnw-quiz-answer:focus {
    border-color: var(--mnw-turkis, var(--mnwd-akzent)) !important;
    box-shadow: 0 0 0 3px var(--mnwd-akzent-a15) !important;
}
.mnw-free-choice-editor .mnw-quiz-answer::placeholder {
    color: #B0B0B0 !important;
    font-style: italic !important;
}

/* Also style LearnDash free-text input that wraps our shortcode */
.wpProQuiz_questionListItem:has(.mnw-free-choice-editor) input.wpProQuiz_questionInput[type="text"] {
    display: none !important;
}

/* 3. Notenbild: elegant shadow instead of double border */
.mnw-free-choice-editor .mnw-prelistening-section {
    background: linear-gradient(135deg, var(--mnwd-akzent-l96s43) 0%, #e8f8f0 100%) !important;
    border: 1.5px solid var(--mnwd-akzent-a25) !important;
    border-radius: 14px !important;
    padding: 18px !important;
    box-shadow: 0 2px 12px var(--mnwd-akzent-a08) !important;
}
.mnw-free-choice-editor .mnw-prelistening-staff-container {
    border: none !important;
    background: #fafafa !important;
    border-radius: 10px !important;
    box-shadow: inset 0 1px 4px rgba(0,0,0,0.05) !important;
}

/* 4. Compact layout */
.mnw-free-choice-editor .mnw-fc-instruction {
    padding: 14px 18px !important;
    font-size: 17px !important;
    border-radius: 10px !important;
    margin-bottom: 12px !important;
}
.mnw-free-choice-editor .mnw-fc-hint {
    margin-bottom: 10px !important;
}
.mnw-free-choice-editor .mnw-fc-info {
    margin-bottom: 12px !important;
    gap: 8px !important;
}
.mnw-free-choice-editor .mnw-fc-badge {
    padding: 5px 12px !important;
    font-size: 13px !important;
    border-radius: 16px !important;
}

/* 5. Slide-in animation from right */
@keyframes mnw-slideInRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
.mnw-free-choice-editor.mnw-animate-in {
    animation: mnw-slideInRight 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both !important;
}

/* 6. Piano wrapper: cleaner look */
.mnw-free-choice-editor .mnw-piano-quiz-wrapper {
    border-radius: 14px !important;
    border: 1.5px solid var(--mnwd-akzent-a25) !important;
    box-shadow: 0 2px 12px var(--mnwd-akzent-a08) !important;
    padding: 18px !important;
}

/* 7. Quiz choice buttons: Meldo style */
.mnw-free-choice-editor .mnw-quiz-choice {
    border-radius: 10px !important;
    border: 2px solid #E8E8E8 !important;
    transition: all 0.2s ease !important;
    font-family: var(--mnwd-schrift-text) !important;
}
.mnw-free-choice-editor .mnw-quiz-choice:hover {
    border-color: var(--mnw-turkis, var(--mnwd-akzent)) !important;
    background: var(--mnwd-akzent-a04) !important;
}

/* 8. Prelistening header: refined */
.mnw-free-choice-editor .mnw-prelistening-header {
    margin-bottom: 12px !important;
}
.mnw-free-choice-editor .mnw-prelistening-title {
    font-size: 16px !important;
}

/* ============================================
   AUFGABENSET COMPACT LAYOUT
   ============================================ */

/* Tighter card spacing */
.mnw-container .mnw-task-card {
    padding: 20px !important;
    margin-bottom: 16px !important;
}

.mnw-container .mnw-task-badge {
    margin-bottom: 8px !important;
}

.mnw-container .mnw-task-text {
    font-size: 1.15rem !important;
    line-height: 1.5 !important;
}

/* Tighter prelistening section */
.mnw-container .mnw-prelistening-section {
    padding: 16px !important;
    margin-bottom: 16px !important;
    border: 1.5px solid var(--mnwd-akzent-a25) !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 12px var(--mnwd-akzent-a08) !important;
}

.mnw-container .mnw-prelistening-header {
    margin-bottom: 10px !important;
}

.mnw-container .mnw-prelistening-title {
    font-size: 16px !important;
}

/* Quiz area compact */
.mnw-container #mnw-quiz-area {
    margin-top: 12px !important;
    padding: 10px !important;
}

/* Piano helper compact */
.mnw-container .mnw-piano-helper-section {
    padding: 16px !important;
    margin-bottom: 16px !important;
}

.mnw-container .mnw-piano-helper-header {
    margin-bottom: 10px !important;
}

/* ============================================
   TASK TRANSITION ANIMATIONS
   ============================================ */

@keyframes mnw-slideOutLeft {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(-60px); }
}
@keyframes mnw-slideInRight {
    from { opacity: 0; transform: translateX(60px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes mnw-slideOutRight {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(60px); }
}
@keyframes mnw-slideInLeft {
    from { opacity: 0; transform: translateX(-60px); }
    to { opacity: 1; transform: translateX(0); }
}

.mnw-slide-out-left {
    animation: mnw-slideOutLeft 0.25s cubic-bezier(0.4, 0, 0.6, 1) forwards !important;
}
.mnw-slide-in-right {
    animation: mnw-slideInRight 0.3s cubic-bezier(0, 0, 0.2, 1) forwards !important;
}
.mnw-slide-out-right {
    animation: mnw-slideOutRight 0.25s cubic-bezier(0.4, 0, 0.6, 1) forwards !important;
}
.mnw-slide-in-left {
    animation: mnw-slideInLeft 0.3s cubic-bezier(0, 0, 0.2, 1) forwards !important;
}

/* ============================================
   LEARNDASH MARK COMPLETE - LOCKED STATE
   ============================================ */

.mnw-mark-complete-wrapper {
    text-align: center !important;
    margin-top: 20px !important;
    transition: all 0.4s ease !important;
}

.mnw-mark-complete-hint {
    font-family: var(--mnwd-schrift-text) !important;
    font-size: 14px !important;
    color: var(--mnwd-schwach) !important;
    margin-bottom: 8px !important;
    transition: all 0.4s ease !important;
}

/* Disabled button styling */
.mnw-ld-locked {
    opacity: 0.4 !important;
    pointer-events: none !important;
    filter: grayscale(100%) !important;
    cursor: not-allowed !important;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* Unlocked state (added by JS) */
.mnw-mark-complete-wrapper.mnw-unlocked .mnw-mark-complete-hint {
    color: var(--mnw-turkis, var(--mnwd-akzent)) !important;
}

.mnw-mark-complete-wrapper.mnw-unlocked .mnw-ld-locked {
    opacity: 1 !important;
    pointer-events: auto !important;
    filter: none !important;
    cursor: pointer !important;
    animation: mnw-pulseUnlock 0.6s ease !important;
}

@keyframes mnw-pulseUnlock {
    0% { transform: scale(1); }
    40% { transform: scale(1.06); }
    100% { transform: scale(1); }
}

/* ================================================================
   v3.84.41 — Klaviatur-Hilfsmittel (Modal)
   v3.84.42 — Button inline statt absolute (keine Kollision mit Admin-Edit-Icons)
   ================================================================ */
.mnw-task-card.mnw-task-header { position: relative; }

/* Header-Top-Zeile: Badge links, Piano-Button rechts daneben */
.mnw-task-header-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}
.mnw-task-header-top .mnw-task-badge {
    margin-bottom: 0 !important; /* gap übernimmt den Abstand */
}

/* Button im Task-Header (inline) */
.mnw-piano-modal-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: #fff;
    color: var(--mnwd-akzent);
    border: 1.5px solid var(--mnwd-akzent);
    border-radius: 999px;
    cursor: pointer;
    font-family: var(--mnwd-schrift-text);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    box-shadow: 0 2px 6px var(--mnwd-akzent-a08);
    transition: all 0.18s ease;
    /* Nicht absolute, daher kein Konflikt mit Admin-Tools rechts */
}
.mnw-piano-modal-btn:hover {
    background: var(--mnwd-akzent);
    color: #fff;
    border-color: var(--mnwd-akzent);
    box-shadow: 0 4px 14px var(--mnwd-akzent-a25);
    transform: translateY(-1px);
}
.mnw-piano-modal-btn:active { transform: translateY(0); }
.mnw-piano-modal-btn-icon { font-size: 15px; line-height: 1; }

@media (max-width: 520px) {
    .mnw-piano-modal-btn { padding: 6px 10px; font-size: 12px; }
    .mnw-piano-modal-btn-label { display: none; }
}

/* Modal Overlay */
.mnw-piano-modal-overlay {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(30, 30, 46, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2147483646;
    padding: 20px;
    box-sizing: border-box;
    animation: mnw-piano-modal-fade 0.22s ease-out;
}
.mnw-piano-modal-overlay.mnw-closing { animation: mnw-piano-modal-fade-out 0.16s ease-in forwards; }

@keyframes mnw-piano-modal-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes mnw-piano-modal-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Card */
.mnw-piano-modal-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.35), 0 8px 20px var(--mnwd-akzent-a12);
    width: 100%;
    max-width: min(960px, 95vw);
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: mnw-piano-modal-pop 0.26s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes mnw-piano-modal-pop {
    from { transform: scale(0.94) translateY(10px); opacity: 0; }
    to   { transform: scale(1) translateY(0); opacity: 1; }
}

/* Header */
.mnw-piano-modal-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 2px solid #FAF8F3;
    position: relative;
}
.mnw-piano-modal-header::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 20px;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, var(--mnwd-akzent), var(--mnwd-akzent2));
    border-radius: 2px;
}
.mnw-piano-modal-header-icon { font-size: 22px; line-height: 1; }
.mnw-piano-modal-header-title {
    font-family: var(--mnwd-schrift-titel), var(--mnwd-schrift-text);
    font-size: 18px;
    font-weight: 700;
    color: #111416;
    letter-spacing: 0.2px;
}
.mnw-piano-modal-mute-badge {
    font-size: 11px;
    font-weight: 600;
    color: var(--mnwd-gedaempft);
    background: #f3f4f6;
    padding: 3px 10px;
    border-radius: 999px;
    margin-left: 4px;
}
.mnw-piano-modal-close {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1.5px solid #e5e7eb;
    background: #fff;
    color: var(--mnwd-gedaempft);
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}
.mnw-piano-modal-close:hover {
    border-color: var(--mnwd-akzent2);
    color: #111416;
    background: #FAF8F3;
    transform: rotate(90deg);
}

/* Body + Keyboard */
.mnw-piano-modal-body {
    padding: 22px 20px 20px;
    overflow-y: auto;
    background: #FAF8F3;
}
.mnw-piano-modal-keyboard {
    width: 100%;
    background: #fff;
    border-radius: 12px;
    padding: 14px;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.05);
    overflow-x: auto;
    scrollbar-width: thin;
}
.mnw-piano-modal-keyboard .mnw-piano-keys {
    margin: 0 auto;
}

/* Notennamen-Overlay auf weissen Tasten (wenn note_names aktiv) */
.mnw-piano-modal-keyboard.mnw-with-note-names .mnw-piano-key-white {
    position: relative;
}
.mnw-piano-modal-keyboard .mnw-piano-key-note-name {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--mnwd-schrift-titel), var(--mnwd-schrift-text);
    font-size: 11px;
    font-weight: 700;
    color: var(--mnwd-akzent);
    pointer-events: none;
    user-select: none;
}
.mnw-piano-modal-keyboard .mnw-piano-key-note-name.mnw-octave-4 {
    color: var(--mnwd-akzent2);
}

.mnw-piano-modal-hint {
    text-align: center;
    font-family: var(--mnwd-schrift-text);
    font-size: 12px;
    color: var(--mnwd-gedaempft);
    margin: 14px 0 0;
    padding: 0 10px;
}

@media (max-width: 520px) {
    .mnw-piano-modal-card { border-radius: 16px; max-height: calc(100vh - 20px); }
    .mnw-piano-modal-header { padding: 12px 14px; }
    .mnw-piano-modal-header-title { font-size: 15px; }
    .mnw-piano-modal-body { padding: 14px 10px; }
    .mnw-piano-modal-keyboard { padding: 8px; }
}

/* ================================================================
   v3.84.43 — Quintenzirkel-Hilfsmittel (Modal)
   Lime-Akzent (var(--mnwd-akzent2)) zur Unterscheidung vom Piano-Modal (teal)
   ================================================================ */

/* Button im Task-Header (inline, lime pill) */
.mnw-circle-modal-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: #fff;
    color: var(--mnwd-akzent2-l31s75);
    border: 1.5px solid var(--mnwd-akzent2);
    border-radius: 999px;
    cursor: pointer;
    font-family: var(--mnwd-schrift-text);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    box-shadow: 0 2px 6px var(--mnwd-akzent2-a12);
    transition: all 0.18s ease;
}
.mnw-circle-modal-btn:hover {
    background: var(--mnwd-akzent2);
    color: var(--mnwd-auf-akzent2);
    border-color: var(--mnwd-akzent2);
    box-shadow: 0 4px 14px var(--mnwd-akzent2-a3);
    transform: translateY(-1px);
}
.mnw-circle-modal-btn:active { transform: translateY(0); }
.mnw-circle-modal-btn-icon { font-size: 15px; line-height: 1; }

@media (max-width: 520px) {
    .mnw-circle-modal-btn { padding: 6px 10px; font-size: 12px; }
    .mnw-circle-modal-btn-label { display: none; }
}

/* Modal Overlay — identisches Pattern wie Piano-Modal */
.mnw-circle-modal-overlay {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(30, 30, 46, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2147483646;
    padding: 20px;
    box-sizing: border-box;
    animation: mnw-circle-modal-fade 0.22s ease-out;
}
.mnw-circle-modal-overlay.mnw-closing { animation: mnw-circle-modal-fade-out 0.16s ease-in forwards; }
@keyframes mnw-circle-modal-fade     { from { opacity: 0; } to { opacity: 1; } }
@keyframes mnw-circle-modal-fade-out { from { opacity: 1; } to { opacity: 0; } }

/* Card */
.mnw-circle-modal-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.35), 0 8px 20px var(--mnwd-akzent2-a14);
    width: 100%;
    max-width: min(1100px, 95vw);
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: mnw-circle-modal-pop 0.26s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes mnw-circle-modal-pop {
    from { transform: scale(0.94) translateY(10px); opacity: 0; }
    to   { transform: scale(1) translateY(0); opacity: 1; }
}

/* Header — lime accent */
.mnw-circle-modal-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 2px solid #FAF8F3;
    position: relative;
    flex-shrink: 0;
}
.mnw-circle-modal-header::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 20px;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, var(--mnwd-akzent2), var(--mnwd-akzent));
    border-radius: 2px;
}
.mnw-circle-modal-header-icon { font-size: 22px; line-height: 1; }
.mnw-circle-modal-header-title {
    font-family: var(--mnwd-schrift-titel), var(--mnwd-schrift-text);
    font-size: 18px;
    font-weight: 700;
    color: #111416;
    letter-spacing: 0.2px;
}
.mnw-circle-modal-close {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1.5px solid #e5e7eb;
    background: #fff;
    color: var(--mnwd-gedaempft);
    font-size: 22px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s ease;
}
.mnw-circle-modal-close:hover {
    border-color: var(--mnwd-akzent);
    color: #111416;
    background: #FAF8F3;
    transform: rotate(90deg);
}

/* Body + Grid */
.mnw-circle-modal-body {
    padding: 20px;
    overflow-y: auto;
    background: #FAF8F3;
}
.mnw-circle-modal-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}
@media (min-width: 900px) {
    .mnw-circle-modal-grid { grid-template-columns: 1fr 340px; }
}

.mnw-circle-modal-circle-col {
    background: #fff;
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 4px 12px var(--mnwd-akzent-a06);
}
.mnw-circle-modal-svg-wrap {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    aspect-ratio: 1;
}
.mnw-circle-modal-svg-wrap svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 10px 24px var(--mnwd-akzent-a18));
}
.mnw-circle-segment { transition: opacity 0.2s ease; }
.mnw-circle-segment:hover { opacity: 0.92; }

/* Action buttons row */
.mnw-circle-modal-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
    flex-wrap: wrap;
}
.mnw-circle-modal-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 10px;
    font-family: var(--mnwd-schrift-text);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
    border: 2px solid transparent;
}
.mnw-circle-modal-action-btn.mnw-action-primary {
    background: #fff;
    color: var(--mnwd-akzent);
    border-color: var(--mnwd-akzent);
}
.mnw-circle-modal-action-btn.mnw-action-primary:hover {
    background: var(--mnwd-akzent);
    color: #fff;
    box-shadow: 0 4px 12px var(--mnwd-akzent-a25);
    transform: translateY(-1px);
}
.mnw-circle-modal-action-btn.mnw-action-secondary {
    background: #fff;
    color: var(--mnwd-akzent2-l31s75);
    border-color: var(--mnwd-akzent2);
}
.mnw-circle-modal-action-btn.mnw-action-secondary:hover {
    background: var(--mnwd-akzent2);
    color: var(--mnwd-auf-akzent2);
    box-shadow: 0 4px 12px var(--mnwd-akzent2-a25);
    transform: translateY(-1px);
}

/* Info panel */
.mnw-circle-modal-info-col {
    background: #fff;
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 4px 12px var(--mnwd-akzent-a06);
    min-height: 320px;
}
.mnw-circle-modal-info-title {
    font-family: var(--mnwd-schrift-titel);
    font-size: 20px;
    font-weight: 700;
    color: var(--mnwd-akzent);
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid #FAF8F3;
}
.mnw-circle-info-section { margin-bottom: 14px; }
.mnw-circle-info-section:last-child { margin-bottom: 0; }
.mnw-circle-info-subtitle {
    font-family: var(--mnwd-schrift-titel);
    font-size: 14px;
    font-weight: 700;
    color: #111416;
    margin: 0 0 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.mnw-circle-info-row {
    margin: 4px 0;
    font-size: 13px;
    color: #111416;
    font-family: var(--mnwd-schrift-text);
}
.mnw-circle-info-row strong { color: var(--mnwd-akzent); }
.mnw-circle-info-label { color: var(--mnwd-gedaempft); }

.mnw-circle-info-placeholder {
    color: var(--mnwd-schwach);
    font-size: 13px;
    font-style: italic;
    text-align: center;
    padding: 30px 10px;
    margin: 0;
}

.mnw-circle-chord-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 6px;
}
.mnw-circle-chord-item {
    background: #FAF8F3;
    border: 1.5px solid transparent;
    border-radius: 10px;
    padding: 8px 6px;
    text-align: center;
    cursor: pointer;
    transition: all 0.18s ease;
}
.mnw-circle-chord-item:hover {
    background: #fff;
    border-color: var(--mnwd-akzent2);
    box-shadow: 0 3px 10px var(--mnwd-akzent2-a2);
    transform: translateY(-1px);
}
.mnw-circle-chord-degree {
    font-family: var(--mnwd-schrift-titel);
    font-size: 11px;
    font-weight: 700;
    color: var(--mnwd-akzent2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.mnw-circle-chord-name {
    font-family: var(--mnwd-schrift-text);
    font-size: 14px;
    font-weight: 600;
    color: #111416;
    margin-top: 2px;
}

/* Scale visualization (Tonleiter zeigen) */
.mnw-circle-scale-visualization {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.mnw-circle-scale-note {
    background: linear-gradient(135deg, var(--mnwd-akzent), var(--mnwd-akzent2));
    color: #fff;
    padding: 6px 10px;
    border-radius: 8px;
    font-family: var(--mnwd-schrift-titel);
    font-weight: 700;
    font-size: 13px;
    min-width: 32px;
    text-align: center;
    box-shadow: 0 2px 6px var(--mnwd-akzent-a2);
}

/* Transient hint */
.mnw-circle-modal-flash {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: var(--mnwd-warnung);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 10px;
    animation: mnw-circle-flash-in 0.2s ease-out;
}
@keyframes mnw-circle-flash-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Bottom hint */
.mnw-circle-modal-hint {
    text-align: center;
    font-family: var(--mnwd-schrift-text);
    font-size: 12px;
    color: var(--mnwd-gedaempft);
    margin: 16px 0 0;
    padding: 0 10px;
}

@media (max-width: 520px) {
    .mnw-circle-modal-card { border-radius: 16px; max-height: calc(100vh - 20px); }
    .mnw-circle-modal-header { padding: 12px 14px; }
    .mnw-circle-modal-header-title { font-size: 15px; }
    .mnw-circle-modal-body { padding: 12px 10px; }
    .mnw-circle-modal-circle-col,
    .mnw-circle-modal-info-col { padding: 12px; }
    .mnw-circle-modal-action-btn { padding: 8px 12px; font-size: 13px; }
}

/* ================================================================
   v3.84.44 — Medien-Anhänge (Bild/Audio vor der Aufgabe)
   + Custom Meldo-Audio-Player
   + Image Lightbox
   ================================================================ */

.mnw-task-media {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0 0 24px;
    padding: 18px;
    background: #fff;
    border-radius: 16px;
    border-left: 4px solid var(--mnwd-akzent2);
    box-shadow: 0 4px 14px rgba(0,0,0,0.04);
    animation: mnw-media-fadein 0.32s ease-out;
}
@keyframes mnw-media-fadein {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.mnw-media-item { margin: 0; }

/* ---- Image item ---- */
.mnw-media-image {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.mnw-media-image-btn {
    position: relative;
    display: block;
    padding: 0;
    background: none;
    border: 2px solid transparent;
    border-radius: 12px;
    cursor: zoom-in;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    max-width: 100%;
}
.mnw-media-image-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px var(--mnwd-akzent-a18);
    border-color: var(--mnwd-akzent-a3);
}
.mnw-media-image-btn:focus { outline: 3px solid var(--mnwd-akzent2); outline-offset: 3px; }
.mnw-media-image-btn img {
    display: block;
    max-width: 100%;
    max-height: 360px;
    height: auto;
    border-radius: 10px;
}
.mnw-media-image-zoom {
    position: absolute;
    top: 10px; right: 10px;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.9);
    color: var(--mnwd-akzent);
    border-radius: 50%;
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.18s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    pointer-events: none;
}
.mnw-media-image-btn:hover .mnw-media-image-zoom { opacity: 1; }

.mnw-media-caption {
    margin: 8px 0 0;
    padding: 0 4px;
    font-family: var(--mnwd-schrift-text);
    font-size: 13px;
    color: var(--mnwd-gedaempft);
    text-align: center;
    line-height: 1.5;
    font-style: italic;
}

/* ---- Audio item (Custom Meldo Player) ---- */
.mnw-media-audio {
    background: linear-gradient(135deg, #FAF8F3 0%, #ffffff 100%);
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    padding: 12px 16px;
}
.mnw-media-audio .mnw-media-caption {
    text-align: left;
    margin: 8px 2px 0;
    color: var(--mnwd-gedaempft);
}
.mnw-media-audio audio { display: none; }

.mnw-audio-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Play/Pause button — round teal pill */
.mnw-audio-btn-play {
    flex-shrink: 0;
    width: 44px; height: 44px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--mnwd-akzent) 0%, var(--mnwd-akzent-l35s89) 100%);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 4px 12px var(--mnwd-akzent-a32);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    padding: 0;
}
.mnw-audio-btn-play:hover {
    transform: scale(1.06);
    box-shadow: 0 6px 16px var(--mnwd-akzent-a42);
}
.mnw-audio-btn-play:active { transform: scale(0.97); }
.mnw-audio-btn-play:focus-visible { outline: 3px solid var(--mnwd-akzent2); outline-offset: 2px; }
.mnw-audio-btn-play .mnw-audio-icon-play,
.mnw-audio-btn-play svg { margin-left: 2px; /* visual centring of play triangle */ }
.is-playing .mnw-audio-btn-play {
    background: linear-gradient(135deg, var(--mnwd-akzent2) 0%, var(--mnwd-akzent2-l50s67) 100%);
    box-shadow: 0 4px 12px var(--mnwd-akzent2-a4);
}

/* Middle: progress + time */
.mnw-audio-middle {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.mnw-audio-progress {
    position: relative;
    height: 8px;
    cursor: pointer;
    padding: 8px 0; /* extends touch target */
    margin: -8px 0;
}
.mnw-audio-progress-track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 6px;
    transform: translateY(-50%);
    background: #E5E7EB;
    border-radius: 999px;
}
.mnw-audio-progress-fill {
    position: absolute;
    top: 50%;
    left: 0;
    height: 6px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, var(--mnwd-akzent), var(--mnwd-akzent2));
    border-radius: 999px;
    width: 0%;
    pointer-events: none;
    transition: width 0.08s linear;
}
.mnw-audio-progress-thumb {
    position: absolute;
    top: 50%;
    left: 0%;
    width: 14px; height: 14px;
    background: #fff;
    border: 2.5px solid var(--mnwd-akzent);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    pointer-events: none;
    transition: transform 0.12s ease;
}
.mnw-audio-progress:hover .mnw-audio-progress-thumb { transform: translate(-50%, -50%) scale(1.2); }
.mnw-audio-progress:focus-visible { outline: 3px solid var(--mnwd-akzent2); outline-offset: 4px; border-radius: 4px; }

.mnw-audio-time {
    font-family: var(--mnwd-schrift-text);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--mnwd-gedaempft);
    letter-spacing: 0.3px;
}

/* Volume */
.mnw-audio-volume-wrap {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.mnw-audio-btn-mute {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--mnwd-gedaempft);
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
    padding: 0;
}
.mnw-audio-btn-mute:hover { background: var(--mnwd-akzent-a1); color: var(--mnwd-akzent); }
.mnw-audio-volume {
    width: 70px;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: #E5E7EB;
    border-radius: 999px;
    outline: none;
    cursor: pointer;
}
.mnw-audio-volume::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px; height: 12px;
    background: var(--mnwd-akzent);
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.mnw-audio-volume::-moz-range-thumb {
    width: 12px; height: 12px;
    background: var(--mnwd-akzent);
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Status line (loading / error) */
.mnw-audio-status {
    margin-top: 8px;
    padding: 6px 10px;
    font-size: 12px;
    color: var(--mnwd-gedaempft);
    background: #FAF8F3;
    border-radius: 6px;
}

/* Mobile layout */
@media (max-width: 520px) {
    .mnw-task-media { padding: 14px; }
    .mnw-media-audio { padding: 10px 12px; }
    .mnw-audio-volume { width: 50px; }
    .mnw-audio-btn-play { width: 38px; height: 38px; font-size: 14px; }
    .mnw-media-image-btn img { max-height: 260px; }
}
@media (max-width: 380px) {
    .mnw-audio-volume-wrap { display: none; } /* Mute still accessible via keyboard, but saves space */
}

/* ---- Lightbox ---- */
.mnw-media-lightbox {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(20, 20, 30, 0.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2147483646;
    padding: 40px 20px;
    box-sizing: border-box;
    animation: mnw-lightbox-fade 0.2s ease-out;
    cursor: zoom-out;
}
@keyframes mnw-lightbox-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.mnw-media-lightbox-figure {
    margin: 0;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    animation: mnw-lightbox-pop 0.24s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}
@keyframes mnw-lightbox-pop {
    from { transform: scale(0.92); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}
.mnw-media-lightbox-figure img {
    max-width: 90vw;
    max-height: calc(90vh - 60px);
    width: auto;
    height: auto;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    display: block;
    object-fit: contain;
}
.mnw-media-lightbox-caption {
    max-width: 80vw;
    color: #fff;
    font-family: var(--mnwd-schrift-text);
    font-size: 14px;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    line-height: 1.5;
}
.mnw-media-lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.1);
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    z-index: 1;
}
.mnw-media-lightbox-close:hover {
    background: rgba(255,255,255,0.2);
    border-color: var(--mnwd-akzent2);
    transform: rotate(90deg);
}
.mnw-media-lightbox-close:focus-visible { outline: 3px solid var(--mnwd-akzent2); outline-offset: 2px; }

/* ================================================================
   v3.84.46 — Multiple Choice: typed choices (text/image/audio) + multi-correct
   ================================================================ */

/* Grid layout activates when at least one choice is media-typed */
.mnw-quiz-choices-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 12px !important;
    max-width: 100%;
}

/* Each choice is a card; text-only keeps its pill look below (fallback) */
.mnw-quiz-choices-grid .mnw-quiz-choice {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    padding: 12px !important;
    background: #fff;
    border: 2px solid #E5E7EB !important;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.18s ease;
    text-align: left;
    position: relative;
    min-height: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.mnw-quiz-choices-grid .mnw-quiz-choice:hover:not(.disabled) {
    border-color: var(--mnwd-akzent) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px var(--mnwd-akzent-a12);
}
.mnw-quiz-choices-grid .mnw-quiz-choice.selected {
    border-color: var(--mnwd-akzent) !important;
    background: linear-gradient(135deg, var(--mnwd-akzent-a06), var(--mnwd-akzent2-a06)) !important;
    box-shadow: 0 4px 14px var(--mnwd-akzent-a18);
}
.mnw-quiz-choices-grid .mnw-quiz-choice.correct,
.mnw-quiz-choice.correct,
.mnw-quiz-choice.correct-answer {
    border-color: var(--mnwd-akzent2) !important;
    background: var(--mnwd-akzent2-a1) !important;
}
.mnw-quiz-choices-grid .mnw-quiz-choice.wrong,
.mnw-quiz-choice.wrong {
    border-color: var(--mnwd-fehler) !important;
    background: rgba(239,68,68,0.08) !important;
}
.mnw-quiz-choices-grid .mnw-quiz-choice.disabled {
    pointer-events: none;
    opacity: 0.95;
}

/* Card head: letter + indicator */
.mnw-choice-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
.mnw-quiz-choices-grid .mnw-choice-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mnwd-akzent), var(--mnwd-akzent2));
    color: #fff;
    font-family: var(--mnwd-schrift-titel);
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

/* Indicator icons — single (circle), multi (square) */
.mnw-choice-indicator {
    width: 20px; height: 20px;
    border-radius: 6px;
    border: 2px solid var(--mnwd-linie-stark);
    background: #fff;
    flex-shrink: 0;
    position: relative;
    transition: all 0.18s ease;
}
.mnw-choice-indicator-single { border-radius: 50%; }
.mnw-quiz-choice.selected .mnw-choice-indicator {
    background: var(--mnwd-akzent);
    border-color: var(--mnwd-akzent);
}
.mnw-quiz-choice.selected .mnw-choice-indicator::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 6px; height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -60%) rotate(45deg);
}
.mnw-quiz-choice.correct .mnw-choice-indicator,
.mnw-quiz-choice.correct-answer .mnw-choice-indicator {
    background: var(--mnwd-akzent2);
    border-color: var(--mnwd-akzent2);
}
.mnw-quiz-choice.correct .mnw-choice-indicator::after,
.mnw-quiz-choice.correct-answer .mnw-choice-indicator::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 6px; height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -60%) rotate(45deg);
}
.mnw-quiz-choice.wrong .mnw-choice-indicator {
    background: #ef4444;
    border-color: var(--mnwd-fehler);
}
.mnw-quiz-choice.wrong .mnw-choice-indicator::after {
    content: '×';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -55%);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

/* Body */
.mnw-choice-body { flex: 1; min-width: 0; }

/* v3.194.18 — Die Karte richtet ihre Kinder mittig aus (Basisregel
   .mnw-quiz-choice: align-items:center !important). In der Spalte heisst das:
   der Körper ist nur so breit wie sein Inhalt. Bisher gab das Bild diese
   Breite vor; seit das Bild absolut liegt (3.194.17, siehe unten), trägt es
   nichts mehr bei und die Bildfläche fiel auf 0 × 0 zusammen. Darum füllt der
   Körper einer Bildkarte jetzt ausdrücklich die Kartenbreite — bei breiten
   Bildern (Notenbilder) exakt wie vorher, bei schmalen Bildern nun einheitlich
   statt je nach Bildbreite verschieden. */
/* v3.194.19 — dasselbe gilt für Audio- und Videokarten: Ihre Hüllen haben
   keinen Inhalt, der eine Breite vorgibt (Videofläche: nur absolute Kinder;
   Audio: Fortschrittsbalken mit flex:1). Gemessen mit der echten style.css:
   Audio-Player 72 px breit (Balken 0 px), Videofläche 249 px in einer 212 px
   breiten Karte (Breite aus min-height × 16/9 statt aus der Karte). */
.mnw-quiz-choice.mnw-choice-image .mnw-choice-body,
.mnw-quiz-choice.mnw-choice-audio .mnw-choice-body,
.mnw-quiz-choice.mnw-choice-video .mnw-choice-body {
    align-self: stretch;
    width: 100%;
}

/* Image choice */
.mnw-choice-image-wrap {
    position: relative;
    width: 100%;
    background: #FAF8F3;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 4/3;
}
.mnw-choice-image-wrap img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* v3.194.17 — iPadOS/WebKit: «height:100%» in einem Kasten, dessen Höhe
       nur aus aspect-ratio folgt, wird dort wie «auto» behandelt. Das Bild
       war dann so hoch wie es von Natur aus ist (gemessen: 316 px in einer
       131 px hohen Fläche), «object-fit: contain» stellte es in die Mitte
       dieser zu hohen Box — und der sichtbare Ausschnitt oben zeigte nur
       leere Fläche. Absolut in die (relative) Fläche gelegt, ist die Grösse
       eindeutig; optisch identisch zum gewollten Ergebnis. */
    position: absolute;
    top: 0; left: 0;
}
.mnw-choice-zoom-pill {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    background: rgba(255,255,255,0.95);
    color: var(--mnwd-akzent);
    border: 1px solid var(--mnwd-akzent-a25);
    border-radius: 999px;
    cursor: pointer;
    font-family: var(--mnwd-schrift-text);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    transition: all 0.15s ease;
}
.mnw-choice-zoom-pill:hover {
    background: var(--mnwd-akzent);
    color: #fff;
    transform: scale(1.04);
}

/* Audio choice */
.mnw-choice-audio-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: linear-gradient(135deg, #FAF8F3 0%, #ffffff 100%);
    border: 1px solid #E5E7EB;
    border-radius: 10px;
}
.mnw-choice-audio-wrap audio { display: none; }
.mnw-choice-audio-play {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mnwd-akzent), var(--mnwd-akzent-l35s89));
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    box-shadow: 0 3px 8px var(--mnwd-akzent-a28);
    transition: transform 0.15s ease;
    padding: 0;
}
.mnw-choice-audio-play:hover { transform: scale(1.07); }
.mnw-choice-audio-wrap.is-playing .mnw-choice-audio-play {
    background: linear-gradient(135deg, var(--mnwd-akzent2), var(--mnwd-akzent2-l50s67));
}
.mnw-choice-audio-progress {
    flex: 1;
    height: 6px;
    background: #E5E7EB;
    border-radius: 999px;
    cursor: pointer;
    overflow: hidden;
    position: relative;
}
.mnw-choice-audio-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--mnwd-akzent), var(--mnwd-akzent2));
    border-radius: 999px;
    transition: width 0.08s linear;
}

/* Caption below body */
.mnw-choice-caption {
    font-family: var(--mnwd-schrift-text);
    font-size: 12px;
    color: var(--mnwd-gedaempft);
    line-height: 1.4;
    padding: 0 2px;
}

/* Multi-correct action row */
.mnw-quiz-multi-actions {
    margin-top: 18px;
    text-align: center;
}
.mnw-quiz-multi-actions .mnw-quiz-check-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 11px 28px;
    background: linear-gradient(135deg, var(--mnwd-akzent), var(--mnwd-akzent2));
    color: #fff;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    font-family: var(--mnwd-schrift-titel);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 14px var(--mnwd-akzent-a25);
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.mnw-quiz-multi-actions .mnw-quiz-check-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px var(--mnwd-akzent-a32);
}
.mnw-quiz-multi-actions .mnw-quiz-check-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}
.mnw-quiz-multi-hint {
    margin: 10px 0 0;
    font-family: var(--mnwd-schrift-text);
    font-size: 12px;
    color: var(--mnwd-gedaempft);
}

@media (max-width: 520px) {
    .mnw-quiz-choices-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important; gap: 10px !important; }
    .mnw-quiz-choices-grid .mnw-quiz-choice { padding: 10px !important; }
    .mnw-choice-audio-play { width: 32px; height: 32px; font-size: 12px; }
    .mnw-quiz-multi-actions .mnw-quiz-check-btn { padding: 10px 20px; font-size: 14px; }
}

/* ==========================================================
   v3.84.46 — Backend admin choice-editor styling (per-choice type)
   ========================================================== */
#mnw-quiz-choices-list .mnw-qc-item {
    display: grid;
    grid-template-columns: auto auto auto 1fr auto auto;
    gap: 8px;
    align-items: center;
    padding: 10px;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-left: 4px solid var(--mnwd-akzent);
    border-radius: 10px;
    margin-bottom: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
#mnw-quiz-choices-list .mnw-qc-item[data-type="audio"] { border-left-color: var(--mnwd-akzent2); }
#mnw-quiz-choices-list .mnw-qc-item[data-type="image"] { border-left-color: var(--mnwd-akzent-l35s89); }
#mnw-quiz-choices-list .mnw-qc-handle {
    cursor: grab; font-size: 16px; color: var(--mnwd-schwach); user-select: none;
}
#mnw-quiz-choices-list .mnw-qc-letter {
    width: 26px; height: 26px;
    background: linear-gradient(135deg, var(--mnwd-akzent), var(--mnwd-akzent2));
    color: #fff; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 12px; font-family: var(--mnwd-schrift-titel);
}
#mnw-quiz-choices-list .mnw-qc-type {
    padding: 5px 8px; border-radius: 6px; border: 1px solid var(--mnwd-linie-stark); font-size: 13px;
}
#mnw-quiz-choices-list .mnw-qc-body { min-width: 0; }
#mnw-quiz-choices-list .mnw-qc-text {
    width: 100%; padding: 6px 10px; border: 1px solid var(--mnwd-linie-stark); border-radius: 6px; font-size: 13px;
}
#mnw-quiz-choices-list .mnw-qc-media-row {
    display: flex; align-items: center; gap: 10px;
}
#mnw-quiz-choices-list .mnw-qc-media-thumb {
    width: 64px; height: 48px; border-radius: 6px; background: #FAF8F3;
    overflow: hidden; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
#mnw-quiz-choices-list .mnw-qc-media-thumb img { width: 100%; height: 100%; object-fit: cover; }
#mnw-quiz-choices-list .mnw-qc-audio-thumb { font-size: 24px; color: var(--mnwd-akzent2); }
#mnw-quiz-choices-list .mnw-qc-media-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
#mnw-quiz-choices-list .mnw-qc-media-filename { font-size: 11px; color: var(--mnwd-gedaempft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#mnw-quiz-choices-list .mnw-qc-caption {
    width: 100%; padding: 4px 8px; border: 1px solid var(--mnwd-linie-stark); border-radius: 5px; font-size: 12px;
}
#mnw-quiz-choices-list .mnw-qc-audio-preview { width: 100%; height: 30px; }
#mnw-quiz-choices-list .mnw-qc-correct input { width: 18px; height: 18px; }
#mnw-quiz-choices-list .mnw-qc-remove {
    background: none; border: none; cursor: pointer; font-size: 16px; padding: 4px;
}
#mnw-quiz-choices-list .mnw-qc-placeholder {
    height: 60px; background: var(--mnwd-akzent-a08); border: 2px dashed var(--mnwd-akzent); border-radius: 10px; margin-bottom: 8px;
}

/* ================================================================
   v3.84.47 — Review of media choices in Ergebnis-Detail
   ================================================================ */
.mnw-review-choices .mnw-review-choice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #fff;
    border: 1.5px solid #E5E7EB;
    border-radius: 10px;
    margin-bottom: 8px;
}
.mnw-review-choices .mnw-review-choice.correct {
    border-color: var(--mnwd-akzent2);
    background: var(--mnwd-akzent2-a08);
}
.mnw-review-choices .mnw-review-choice.wrong {
    border-color: var(--mnwd-fehler);
    background: rgba(239,68,68,0.06);
}
.mnw-review-choices .mnw-review-choice.selected {
    box-shadow: 0 0 0 2px var(--mnwd-akzent-a15);
}
.mnw-review-choice-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mnwd-akzent), var(--mnwd-akzent2));
    color: #fff;
    font-family: var(--mnwd-schrift-titel);
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}
.mnw-review-choice .mnw-choice-indicator {
    font-size: 16px;
    font-weight: 700;
    flex-shrink: 0;
}
.mnw-review-choice.correct .mnw-choice-indicator { color: var(--mnwd-akzent2); }
.mnw-review-choice.wrong   .mnw-choice-indicator { color: var(--mnwd-fehler); }
.mnw-review-choice-text { flex: 1; min-width: 0; }
.mnw-review-choice-media {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.mnw-review-choice-media img {
    max-width: 120px;
    max-height: 80px;
    border-radius: 6px;
    object-fit: cover;
    background: #FAF8F3;
}
.mnw-review-choice-audio audio {
    height: 32px;
    flex: 1;
    min-width: 100px;
    max-width: 260px;
}
.mnw-review-audio-icon { font-size: 20px; color: var(--mnwd-akzent2); flex-shrink: 0; }
.mnw-review-choice-caption {
    font-family: var(--mnwd-schrift-text);
    font-size: 12px;
    color: var(--mnwd-gedaempft);
    font-style: italic;
}

/* ================================================================
   v3.84.52 — Partial-correct state styling
   v3.84.53 — Orange tone for partial (traffic-light semantics)
   ================================================================ */
/* Answer boxes: distinct orange "partial" state */
.mnw-quiz-answer-box.partial {
    background: linear-gradient(135deg, rgba(245,166,35,0.14), rgba(245,166,35,0.08));
    border-color: #F5A623;
    color: #9a5a00;
}
.mnw-quiz-feedback.partial {
    background: linear-gradient(135deg, rgba(245,166,35,0.12), rgba(245,166,35,0.06));
    border-color: #F5A623;
}
/* Score circle: partial state in orange gradient */
.mnw-score-circle.mnw-score-partial {
    background: linear-gradient(135deg, #F5A623 0%, #F8B94D 100%);
    color: #fff;
}
/* Half-moon icon optical tweak: the ◐ glyph sits slightly off-centre in some
   fonts; nudge it visually so it balances like ✓ / ✗ do. */
.mnw-quiz-answer-box.partial .mnw-quiz-answer-icon,
.mnw-quiz-feedback.partial .mnw-quiz-feedback-icon {
    display: inline-block;
    transform: translateY(-1px);
}

/* ================================================================
   v3.84.54 — Video Player (unified Meldo style)
   + Video choice cards in Multiple Choice
   + Video in Lightbox
   ================================================================ */

/* ---- Base player container (Block A standalone) ---- */
.mnw-video-player {
    display: flex;
    flex-direction: column;
    background: #000;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0,0,0,0.15);
    position: relative;
    font-family: var(--mnwd-schrift-text);
}

/* Video stage (the actual video/iframe area) */
.mnw-video-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background: #000;
    overflow: hidden;
}
.mnw-video-stage .mnw-video-el {
    width: 100%;
    height: 100%;
    display: block;
    background: #000;
    object-fit: contain;
}
.mnw-video-stage .mnw-video-yt-mount,
.mnw-video-stage iframe {
    width: 100% !important;
    height: 100% !important;
    border: 0;
    display: block;
}

/* Spinner while YouTube API loads */
.mnw-video-spinner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.85);
    font-size: 14px;
    background: #111;
    pointer-events: none;
}

/* Centred play-overlay (visible when paused) */
.mnw-video-play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.35) 100%);
    border: 0;
    cursor: pointer;
    transition: background 0.22s ease;
    z-index: 2;
}
.mnw-video-play-overlay:hover {
    background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.45) 100%);
}
.mnw-video-play-overlay-icon {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mnwd-akzent) 0%, var(--mnwd-akzent-l35s89) 55%, var(--mnwd-akzent2) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 16px 40px var(--mnwd-akzent-a35),
        0 4px 12px var(--mnwd-akzent-a25),
        inset 0 -3px 8px rgba(0, 0, 0, 0.15),
        inset 0 2px 4px rgba(255, 255, 255, 0.25);
    padding: 0;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.22s ease;
    position: relative;
}
.mnw-video-play-overlay-icon::before {
    /* Subtle outer glow ring */
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--mnwd-akzent-a25) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.25s ease;
    z-index: -1;
}
.mnw-video-play-overlay:hover .mnw-video-play-overlay-icon {
    transform: scale(1.08);
    box-shadow:
        0 20px 50px var(--mnwd-akzent-a45),
        0 6px 16px var(--mnwd-akzent-a3),
        inset 0 -3px 8px rgba(0, 0, 0, 0.15),
        inset 0 2px 4px rgba(255, 255, 255, 0.3);
}
.mnw-video-play-overlay:hover .mnw-video-play-overlay-icon::before {
    opacity: 1;
}
.mnw-video-play-overlay:active .mnw-video-play-overlay-icon {
    transform: scale(0.96);
}
.mnw-video-player.is-playing .mnw-video-play-overlay { display: none; }

/* Status line (errors) */
.mnw-video-status {
    position: absolute;
    left: 12px;
    bottom: 12px;
    padding: 6px 10px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    font-size: 12px;
    border-radius: 6px;
    z-index: 3;
}

/* ---- Controls bar ---- */
.mnw-video-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: linear-gradient(180deg, #1a1a1e 0%, #0e0e12 100%);
}

.mnw-video-btn-play,
.mnw-video-btn-skipback,
.mnw-video-btn-skipfwd,
.mnw-video-btn-fullscreen {
    flex-shrink: 0;
    width: 38px; height: 38px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: transform 0.15s ease, background 0.15s ease;
    padding: 0;
    font-family: inherit;
}

.mnw-video-btn-play {
    width: 42px; height: 42px;
    background: linear-gradient(135deg, var(--mnwd-akzent) 0%, var(--mnwd-akzent-l35s89) 100%);
    color: #fff;
    box-shadow: 0 3px 10px var(--mnwd-akzent-a32);
    font-size: 15px;
}
.mnw-video-btn-play:hover {
    transform: scale(1.06);
    box-shadow: 0 5px 14px var(--mnwd-akzent-a42);
}
.mnw-video-btn-play:active { transform: scale(0.96); }
.mnw-video-btn-play .mnw-video-icon-play,
.mnw-video-btn-play svg { margin-left: 2px; }
.mnw-video-player.is-playing .mnw-video-btn-play {
    background: linear-gradient(135deg, var(--mnwd-akzent2) 0%, var(--mnwd-akzent2-l50s67) 100%);
    box-shadow: 0 3px 10px var(--mnwd-akzent2-a4);
}

.mnw-video-btn-skipback,
.mnw-video-btn-skipfwd,
.mnw-video-btn-fullscreen {
    background: rgba(255,255,255,0.08);
    color: #fff;
    font-size: 13px;
}
.mnw-video-btn-skipback:hover,
.mnw-video-btn-skipfwd:hover,
.mnw-video-btn-fullscreen:hover {
    background: rgba(255,255,255,0.18);
    transform: scale(1.06);
}
.mnw-video-btn-fullscreen { margin-left: auto; }

.mnw-video-btn-play:focus-visible,
.mnw-video-btn-skipback:focus-visible,
.mnw-video-btn-skipfwd:focus-visible,
.mnw-video-btn-fullscreen:focus-visible {
    outline: 3px solid var(--mnwd-akzent2);
    outline-offset: 2px;
}

/* Progress bar */
.mnw-video-progress-wrap {
    flex: 1;
    min-width: 0;
    padding: 0 4px;
}
.mnw-video-progress {
    position: relative;
    height: 8px;
    padding: 8px 0;
    margin: -8px 0;
    cursor: pointer;
}
.mnw-video-progress-track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 5px;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.18);
    border-radius: 999px;
}
.mnw-video-progress-fill {
    position: absolute;
    top: 50%;
    left: 0;
    height: 5px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, var(--mnwd-akzent), var(--mnwd-akzent2));
    border-radius: 999px;
    width: 0%;
    pointer-events: none;
    transition: width 0.08s linear;
}
.mnw-video-progress-thumb {
    position: absolute;
    top: 50%;
    left: 0%;
    width: 14px; height: 14px;
    background: #fff;
    border: 2.5px solid var(--mnwd-akzent);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    pointer-events: none;
    transition: transform 0.12s ease;
}
.mnw-video-progress:hover .mnw-video-progress-thumb {
    transform: translate(-50%, -50%) scale(1.2);
}
.mnw-video-progress:focus-visible {
    outline: 3px solid var(--mnwd-akzent2);
    outline-offset: 4px;
    border-radius: 4px;
}

/* Time display */
.mnw-video-time {
    font-family: var(--mnwd-schrift-text);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: rgba(255,255,255,0.85);
    letter-spacing: 0.3px;
    flex-shrink: 0;
    white-space: nowrap;
}

/* Caption below player */
.mnw-video-caption {
    padding: 10px 14px 12px;
    background: #fff;
    color: var(--mnwd-gedaempft);
    font-size: 13px;
    font-style: italic;
    line-height: 1.5;
    text-align: left;
    border-top: 1px solid #e5e7eb;
}
/* When player is inside .mnw-task-media item, the caption sits below */
.mnw-media-video .mnw-video-player { margin: 0; }

/* Mobile tweaks */
@media (max-width: 520px) {
    .mnw-video-controls { gap: 6px; padding: 8px 10px; }
    .mnw-video-btn-play { width: 36px; height: 36px; font-size: 13px; }
    .mnw-video-btn-skipback,
    .mnw-video-btn-skipfwd,
    .mnw-video-btn-fullscreen { width: 32px; height: 32px; font-size: 11px; }
    .mnw-video-time { font-size: 11px; }
}
@media (max-width: 380px) {
    /* Hide skip buttons on very narrow screens to preserve progress space */
    .mnw-video-btn-skipback,
    .mnw-video-btn-skipfwd { display: none; }
}

/* ---- Video choice card (Block B) ---- */
.mnw-choice-video-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 140px;
    aspect-ratio: 16/9;
    background: #000;
    border-radius: 10px;
    overflow: hidden;
}
.mnw-choice-video-poster {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-color: #0e0e12;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mnw-choice-video-poster::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0.35) 100%);
    pointer-events: none;
}
.mnw-choice-video-placeholder {
    font-size: 36px;
    color: #7e3ff2;
    opacity: 0.8;
}
.mnw-choice-video-play {
    position: relative;
    z-index: 1;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,255,255,0.85));
    color: var(--mnwd-akzent);
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 3px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}

/* Video zoom pill (sits in the corner) */
.mnw-choice-video-zoom {
    position: absolute;
    bottom: 8px;
    right: 8px;
    z-index: 2;
}

/* ---- Lightbox with video ---- */
.mnw-media-lightbox-video-holder {
    width: min(90vw, 1200px);
    max-height: calc(90vh - 60px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.mnw-media-lightbox-video-holder .mnw-video-player {
    width: 100%;
    max-width: 100%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.mnw-media-lightbox-video-holder .mnw-video-stage {
    max-height: calc(90vh - 140px);
}

/* ================================================================
   v3.84.55 — SVG icon fixes (replaces emoji that rendered in color)
   ================================================================ */
/* All SVG icons inside Meldo player controls inherit button text color */
.mnw-video-btn-play svg,
.mnw-video-btn-skipback svg,
.mnw-video-btn-skipfwd svg,
.mnw-video-btn-fullscreen svg,
.mnw-video-play-overlay-icon svg,
.mnw-audio-btn-play svg,
.mnw-audio-btn-mute svg,
.mnw-choice-audio-play svg,
.mnw-choice-video-play svg {
    display: block;
}
/* Choice card play-button background circle needs its own sizing with SVG inside */
.mnw-choice-video-play svg {
    /* margin-left already handled by button's padding-left: 3px */
}
/* Overlay icon: SVG inside the circle */
.mnw-video-play-overlay-icon svg {
    width: 32px;
    height: 32px;
    margin-left: 4px; /* optical centring of the play triangle */
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}

/* ================================================================
   v3.84.57 — Dedicated Video Modal (compact, own shell)
   ================================================================ */

.mnw-video-modal {
    position: fixed;
    inset: 0;
    z-index: 2147483646;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.18s ease;
    pointer-events: auto;
}
.mnw-video-modal.is-open {
    opacity: 1;
}

.mnw-video-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 18, 26, 0.55);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    cursor: pointer;
}

.mnw-video-modal-box {
    position: relative;
    z-index: 1;
    width: calc(100vw - 48px);
    max-width: 960px;
    max-height: 85vh;
    background: #fff;
    border-radius: 18px;
    box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.35),
        0 8px 20px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    transform: scale(0.95);
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
}
.mnw-video-modal.is-open .mnw-video-modal-box {
    transform: scale(1);
}

.mnw-video-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #111416;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    transition: background 0.15s ease, transform 0.15s ease, color 0.15s ease;
    padding: 0;
}
.mnw-video-modal-close:hover {
    background: #fff;
    color: var(--mnwd-akzent);
    transform: scale(1.08);
}
.mnw-video-modal-close:active {
    transform: scale(0.94);
}
.mnw-video-modal-close:focus-visible {
    outline: 3px solid var(--mnwd-akzent2);
    outline-offset: 2px;
}

.mnw-video-modal-player-holder {
    width: 100%;
    background: #000;
}
.mnw-video-modal-player-holder .mnw-video-player {
    border-radius: 0;
    box-shadow: none;
    width: 100%;
}
/* Inside the modal we DO want the stage to size naturally (16/9 from .mnw-video-stage) */
.mnw-video-modal-player-holder .mnw-video-stage {
    max-height: calc(85vh - 80px); /* leave room for controls + caption */
}

.mnw-video-modal-caption {
    padding: 14px 20px 16px;
    background: #fff;
    color: var(--mnwd-gedaempft);
    font-size: 14px;
    font-style: italic;
    line-height: 1.5;
    border-top: 1px solid #e5e7eb;
}

/* Mobile tweaks */
@media (max-width: 600px) {
    .mnw-video-modal-box {
        width: calc(100vw - 24px);
        max-height: 90vh;
        border-radius: 14px;
    }
    .mnw-video-modal-close {
        width: 32px;
        height: 32px;
        top: 8px;
        right: 8px;
    }
    .mnw-video-modal-caption {
        padding: 10px 14px 12px;
        font-size: 13px;
    }
}

/* ===== Schlagzeug: Partitur-Eingabe sperren, nur Kacheleditor (v3.98.11) ===== */
.mnw-staff-wrap { position: relative; }
.mnw-drum-lock-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 6px;
    padding: 7px 12px;
    background: var(--mnwd-akzent-l94s17);
    border: 1px solid var(--mnwd-akzent-l88s20);
    border-radius: 9px;
    color: var(--mnwd-gedaempft);
    font-family: var(--mnwd-schrift-text), system-ui, -apple-system, sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.3;
}
.mnw-drum-lock-bar svg { flex: 0 0 auto; color: var(--mnwd-akzent); }
.mnw-drum-lock {
    position: absolute;
    inset: 0;
    cursor: not-allowed;
    border-radius: 8px;
    background: repeating-linear-gradient(135deg, var(--mnwd-akzent-a04) 0 9px, var(--mnwd-akzent-a0) 9px 18px);
    z-index: 6;
}

/* v3.99.28 — Gehörbildung Reihenfolge (Schüler-Ansicht) */
.mnw-ear-order { max-width: 560px; margin: 0 auto; }
.mnw-ear-list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mnw-ear-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: #fff !important; border: 1.5px solid #e6ebea; border-radius: 12px; cursor: grab; box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important; transition: border-color .12s ease, box-shadow .12s ease; }
.mnw-ear-row:hover { border-color: var(--mnwd-akzent-a45); }
.mnw-ear-row.dragging { opacity: .6; cursor: grabbing; border-color: var(--mnwd-akzent); box-shadow: 0 4px 14px var(--mnwd-akzent-a18) !important; }
.mnw-ear-handle { color: #b6c2bf !important; font-size: 18px; line-height: 1; cursor: grab; }
.mnw-ear-pos { width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--mnwd-akzent) !important; color: #fff !important; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.mnw-ear-play { margin-left: auto; border: 1.5px solid var(--mnwd-akzent); background: #fff !important; color: var(--mnwd-akzent) !important; border-radius: 999px; padding: 8px 16px; font-weight: 600; cursor: pointer; font-size: 14px; }
.mnw-ear-play:hover:not(:disabled) { background: var(--mnwd-akzent-a08) !important; }
.mnw-ear-play:disabled { opacity: .5; cursor: default; border-color: #cfd8d6; color: var(--mnwd-schwach) !important; }
.mnw-ear-play .btn-icon { margin-right: 4px; }
.mnw-ear-hint { text-align: center; color: var(--mnwd-schwach) !important; font-size: 13.5px; margin: 0 0 16px; }
.mnw-ear-check { display: block; margin: 0 auto; }
.mnw-ear-empty { text-align: center; color: var(--mnwd-schwach) !important; padding: 30px; }

/* v3.99.38 — Akkord-Icon (gestapelte Notenköpfe) grosszügig rendern (Frontend) */
.mnw-container button.mnw-tool.mnw-chord-toggle svg,
button.mnw-tool.mnw-chord-toggle svg { width: 22px !important; height: 22px !important; }

/* v3.99.42 — ear_order (LearnDash): Sofort-Rückmeldung pro Zeile nach „Prüfen" */
.mnw-ear-row.correct { background: rgba(76,175,80,0.18); }
.mnw-ear-row.wrong   { background: rgba(244,67,54,0.14); }

/* ============================================================
   v3.99.179 — Staff-Controls-Zeile (Zoom + Takt-Buttons)
   ------------------------------------------------------------
   Problem: Zwei generische Touch-Regeln weiter oben blähten diese
   Zeile auf Mobilgeräten auf, bis der zweite Takt-Button aus dem
   Sichtfeld geschoben wurde (.mnw-staff-area hat overflow:hidden):
     1) @media (hover:none) and (pointer:coarse) → .mnw-zoom-btn
        min-width/min-height:40px. min-* schlägt die width:24px der
        Basisregel, weil es eine andere Eigenschaft ist — daher der
        überdimensionierte "+"-Kreis und das hohe graue Pill.
     2) @media (pointer:coarse) → button.mnw-btn min-height:48px +
        padding:12px 20px. Das traf auch .mnw-btn-add (Takt-Buttons).
   Beide Blöcke stehen im Quelltext NACH den max-width-Queries und
   gewinnen dort. Dieser Block steht am Dateiende und korrigiert die
   Werte gezielt nur innerhalb von .mnw-staff-controls — die grossen
   Touch-Flächen bleiben überall sonst erhalten.
   ============================================================ */

/* Zeile darf nie umbrechen und nie über den Rand hinauslaufen */
.mnw-staff-controls {
    flex-wrap: nowrap !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

/* Zoom-Pill: darf schrumpfen, wächst aber NICHT — sonst frisst sie den Platz
   der Takt-Buttons auf und schiebt den Minus-Button aus dem Sichtfeld */
.mnw-staff-controls .mnw-zoom-control {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

/* Slider füllt den Rest der Pill, statt eine feste Breite zu erzwingen */
.mnw-staff-controls .mnw-zoom-control input[type="range"] {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 32px !important;
}

/* Takt-Buttons: kompakt, aber weiterhin gut treffbar */
.mnw-staff-controls .mnw-measure-buttons .mnw-btn-add,
.mnw-staff-controls button.mnw-btn.mnw-btn-add {
    flex: 0 0 auto !important;
    width: auto !important;
    min-height: 38px !important;
    height: auto !important;
    padding: 7px 12px !important;
    font-size: 0.8rem !important;
    gap: 4px !important;
    white-space: nowrap !important;
}

@media (max-width: 768px) {
    /* Zoom-Pill visuell zurücknehmen und in der Breite deckeln */
    .mnw-staff-controls .mnw-zoom-control {
        flex: 0 1 auto !important;
        max-width: 150px !important;
        padding: 3px 7px !important;
        gap: 3px !important;
        background: #f4f5f7 !important;
        box-shadow: none !important;
        border: 1px solid #e6e8eb !important;
    }

    /* Zoom-Buttons: 32px statt der aufgeblähten 40px, bleibt touch-tauglich */
    .mnw-staff-controls .mnw-zoom-control .mnw-zoom-btn {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        flex: 0 0 auto !important;
        font-size: 17px !important;
    }

    .mnw-staff-controls .mnw-measure-buttons {
        flex: 0 0 auto !important;
        gap: 6px !important;
    }

    .mnw-staff-controls .mnw-measure-buttons .mnw-btn-add,
    .mnw-staff-controls button.mnw-btn.mnw-btn-add {
        min-height: 36px !important;
        padding: 6px 11px !important;
        font-size: 0.78rem !important;
        border-width: 1.5px !important;
    }
}

@media (max-width: 480px) {
    .mnw-staff-controls {
        gap: 6px !important;
    }

    .mnw-staff-controls .mnw-zoom-control {
        max-width: 118px !important;
        padding: 2px 5px !important;
        gap: 2px !important;
    }

    .mnw-staff-controls .mnw-zoom-control input[type="range"] {
        min-width: 24px !important;
    }

    .mnw-staff-controls .mnw-zoom-control .mnw-zoom-btn {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        font-size: 15px !important;
    }

    .mnw-staff-controls .mnw-measure-buttons {
        gap: 4px !important;
    }

    .mnw-staff-controls .mnw-measure-buttons .mnw-btn-add,
    .mnw-staff-controls button.mnw-btn.mnw-btn-add {
        min-height: 32px !important;
        padding: 5px 8px !important;
        font-size: 0.72rem !important;
    }
}

/* Auf Mobile grundsätzlich nur noch +/− statt "+ Takt" — das senkt die
   Inhaltsbreite so weit, dass beide Buttons selbst dann passen, wenn ein
   später geladenes Stylesheet (z.B. der Inline-Block der Theorie-Artikel,
   der unter 768px .mnw-btn{width:100%} setzt) die Grössen wieder aufbläht.
   Die title-Attribute bleiben erhalten. */
@media (max-width: 600px) {
    /* Zeile linksbündig packen. space-between/margin-left:auto schoben die
       Buttons an die rechte Container-Kante — die liegt aber ausserhalb des
       Sichtfelds, sobald ein Elternelement breiter als der Viewport ist.
       Linksbündig sind beide Buttons unabhängig davon immer sichtbar. */
    .mnw-container .mnw-staff-controls,
    .mnw-staff-controls {
        justify-content: flex-start !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Grid statt Flex: "minmax(0, 1fr) auto" garantiert, dass die Button-Spalte
       IMMER ihre natürliche Breite bekommt und die Zoom-Spalte nur den Rest.
       minmax(0, …) hebt zusätzlich das implizite min-width:auto auf, an dem die
       bisherigen Flex-Varianten gescheitert sind. Ein Überlauf ist damit
       strukturell ausgeschlossen, nicht nur rechnerisch unwahrscheinlich. */
    .mnw-container .mnw-staff-controls,
    .mnw-staff-controls {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-auto-flow: column !important;
        grid-auto-columns: auto !important;
        align-items: center !important;
        justify-content: stretch !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .mnw-container .mnw-staff-controls .mnw-measure-buttons,
    .mnw-staff-controls .mnw-measure-buttons {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        margin: 0 !important;
        min-width: 0 !important;
    }

    .mnw-container .mnw-staff-controls .mnw-zoom-control,
    .mnw-staff-controls .mnw-zoom-control {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .mnw-staff-controls .mnw-zoom-control input[type="range"] {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 30px !important;
    }

    .mnw-container .mnw-staff-controls .mnw-btn-label,
    .mnw-staff-controls .mnw-measure-buttons .mnw-btn-label,
    .mnw-staff-controls .mnw-btn-add .mnw-btn-label {
        display: none !important;
    }

    .mnw-container .mnw-staff-controls .mnw-measure-buttons,
    .mnw-staff-controls .mnw-measure-buttons {
        flex: 0 0 auto !important;
        min-width: 0 !important;
        gap: 4px !important;
    }

    .mnw-container .mnw-staff-controls .mnw-btn-add,
    .mnw-staff-controls .mnw-measure-buttons .mnw-btn-add,
    .mnw-staff-controls button.mnw-btn.mnw-btn-add,
    .mnw-staff-controls .mnw-fc-add-measure,
    .mnw-staff-controls .mnw-fc-remove-measure {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 42px !important;
        max-width: 48px !important;
        min-height: 34px !important;
        height: 34px !important;
        padding: 0 !important;
        margin: 0 !important;
        font-size: 1rem !important;
        line-height: 1 !important;
        gap: 0 !important;
        justify-content: center !important;
        align-items: center !important;
        border-width: 1.5px !important;
    }

    .mnw-staff-controls .mnw-btn-add .btn-icon {
        font-size: 1.05rem !important;
        line-height: 1 !important;
    }
}


/* ============================================================
   Startbildschirm der Aufgabensets (v3.100.0)
   Vor der ersten Aufgabe: Ueberblick und Wahl der Anzahl.
   ============================================================ */
.mnw-set-start{display:flex;justify-content:center;padding:24px 12px}
.mnw-set-start-box{background:#fff;border:1px solid #e4e6e6;border-radius:18px;
  padding:32px 30px;max-width:520px;width:100%;text-align:center;
  box-shadow:0 4px 24px rgba(0,0,0,.06)}
.mnw-set-start-titel{font-family:var(--mnwd-schrift-titel);font-weight:700;
  font-size:1.5rem;margin:0 0 10px;color:#111416;line-height:1.3}
.mnw-set-start-info{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;
  font-size:.88rem;color:#8a8a8a;margin:0 0 22px}
.mnw-set-start-info strong{color:var(--mnwd-akzent)}
.mnw-set-start-frage{font-family:var(--mnwd-schrift-titel);font-weight:700;
  font-size:1rem;margin:0 0 14px;color:#111416}
.mnw-set-start-wahl{display:flex;justify-content:center;gap:9px;flex-wrap:wrap}
.mnw-set-stufe{font-family:var(--mnwd-schrift-titel);font-weight:700;font-size:1.05rem;
  min-width:62px;padding:.7rem 1.1rem;border-radius:12px;border:2px solid #e4e6e6;
  background:#fff;color:#111416;cursor:pointer;transition:.14s}
.mnw-set-stufe:hover{border-color:var(--mnwd-akzent);color:var(--mnwd-akzent);transform:translateY(-1px)}
.mnw-set-stufe-alle{background:var(--mnwd-akzent);border-color:var(--mnwd-akzent);color:#fff}
.mnw-set-stufe-alle:hover{background:var(--mnwd-akzent-l22-4);border-color:var(--mnwd-akzent-l22-4);color:#fff}
.mnw-set-start-hinweis{font-size:.78rem;color:#8a8a8a;margin:18px 0 0;line-height:1.5}
.mnw-set-start-weiter{margin:20px 0 0;padding-top:18px;border-top:1px solid #eef0f0;
  display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
@media (max-width:520px){
  .mnw-set-start-box{padding:24px 18px}
  .mnw-set-stufe{min-width:54px;font-size:.95rem;padding:.6rem .85rem}
}


/* ================================================================
   v3.101.0 — Taktleiste: Fortschritt + Sprung-Navigation
   ================================================================ */
.mnw-tl {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex: 1 1 200px !important;
    min-width: 160px !important;
}
.mnw-tl-spur {
    position: relative !important;
    flex: 1 1 auto !important;
    height: 26px !important;
}
.mnw-tl-linie {
    position: absolute !important;
    left: 0; right: 0; top: 12.25px;
    height: 1.5px !important;
    background: #e4e9e8 !important;
    border-radius: 2px !important;
}
.mnw-tl-punkte {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 2px !important;
}
.mnw-tl-punkte.mnw-tl-scroll {
    justify-content: flex-start !important;
    gap: 5px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
}
.mnw-tl-punkte.mnw-tl-scroll::-webkit-scrollbar { display: none !important; }

.mnw-tl-punkt {
    flex: 0 0 auto !important;
    width: var(--tl-d, 9px) !important;
    height: var(--tl-d, 9px) !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    border: 1.5px solid var(--mnwd-linie-stark) !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    transition: transform .18s ease, background .18s ease !important;
}
.mnw-tl-punkt:hover { transform: scale(1.45) !important; }
.mnw-tl-punkt.mnw-tl-ok        { background: var(--mnwd-akzent2) !important; border-color: var(--mnwd-akzent2) !important; }
.mnw-tl-punkt.mnw-tl-teil      { background: #EF9F27 !important; border-color: #EF9F27 !important; }
.mnw-tl-punkt.mnw-tl-falsch    { background: #E24B4A !important; border-color: #E24B4A !important; }
.mnw-tl-punkt.mnw-tl-skip      { background: #c9d2d1 !important; border-color: var(--mnwd-linie-stark) !important; }
.mnw-tl-punkt.mnw-tl-bearbeitet{ background: var(--mnwd-akzent) !important; border-color: var(--mnwd-akzent) !important; }
.mnw-tl-punkt.mnw-tl-aktuell {
    width: calc(var(--tl-d, 9px) + 5px) !important;
    height: calc(var(--tl-d, 9px) + 5px) !important;
    background: var(--mnwd-akzent) !important;
    border: 2px solid var(--mnwd-akzent) !important;
    box-shadow: 0 0 0 3px var(--mnwd-akzent-a18) !important;
    animation: mnwTlPuls 2.2s ease-in-out infinite !important;
}
@keyframes mnwTlPuls {
    0%, 100% { box-shadow: 0 0 0 3px var(--mnwd-akzent-a18); }
    50%      { box-shadow: 0 0 0 6px var(--mnwd-akzent-a08); }
}
@media (prefers-reduced-motion: reduce) {
    .mnw-tl-punkt.mnw-tl-aktuell { animation: none !important; }
}

.mnw-tl-toggle {
    flex: 0 0 auto !important;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #dce3e2 !important;
    border-radius: 9px !important;
    background: #fff !important;
    color: var(--mnwd-gedaempft) !important;
    cursor: pointer !important;
    transition: all .18s ease !important;
}
.mnw-tl-toggle:hover { border-color: var(--mnwd-akzent) !important; color: var(--mnwd-akzent) !important; }
.mnw-tl-toggle.mnw-tl-toggle-auf {
    background: var(--mnwd-akzent) !important;
    border-color: var(--mnwd-akzent) !important;
    color: #fff !important;
}

.mnw-tl-panel {
    margin: 4px 0 14px !important;
    padding: 12px 14px !important;
    background: #FAF8F3 !important;
    border: 1px solid #eceeed !important;
    border-radius: 14px !important;
    animation: mnwTlAuf .22s ease !important;
}
.mnw-tl-panel[hidden] { display: none !important; }
@keyframes mnwTlAuf {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}
.mnw-tl-panel-kopf {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
    font-family: var(--mnwd-schrift-text) !important;
    font-size: 0.78rem !important;
}
.mnw-tl-panel-hinweis { color: #7a8785 !important; }
.mnw-tl-panel-zahlen  { color: var(--mnwd-akzent) !important; font-weight: 600 !important; }

.mnw-tl-gitter {
    display: grid !important;
    grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
    gap: 6px !important;
}
@media (max-width: 520px) {
    .mnw-tl-gitter { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
}
.mnw-tl-zelle {
    padding: 7px 0 !important;
    border: 1px solid transparent !important;
    border-radius: 9px !important;
    background: #eef0f0 !important;
    color: #8b9695 !important;
    font-family: var(--mnwd-schrift-text) !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: transform .15s ease, box-shadow .15s ease !important;
}
.mnw-tl-zelle:hover { transform: translateY(-1px) !important; box-shadow: 0 2px 6px rgba(0,0,0,.08) !important; }
.mnw-tl-zelle.mnw-tl-ok         { background: var(--mnwd-akzent2-l92s62) !important; border-color: var(--mnwd-akzent2) !important; color: var(--mnwd-akzent2-l23s78) !important; }
.mnw-tl-zelle.mnw-tl-teil       { background: #fdf1de !important; border-color: #EF9F27 !important; color: #854F0B !important; }
.mnw-tl-zelle.mnw-tl-falsch     { background: #fceded !important; border-color: #E24B4A !important; color: #A32D2D !important; }
.mnw-tl-zelle.mnw-tl-skip       { background: #eef0f0 !important; border-color: var(--mnwd-linie-stark) !important; color: var(--mnwd-gedaempft) !important; }
.mnw-tl-zelle.mnw-tl-bearbeitet { background: var(--mnwd-akzent-l92s40) !important; border-color: var(--mnwd-akzent) !important; color: var(--mnwd-akzent-l25s76) !important; }
.mnw-tl-zelle.mnw-tl-aktuell {
    background: var(--mnwd-akzent) !important;
    border-color: var(--mnwd-akzent) !important;
    color: #fff !important;
}

.mnw-tl-schnell {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 12px !important;
}
.mnw-tl-chip {
    padding: 6px 13px !important;
    border: none !important;
    border-radius: 999px !important;
    background: var(--mnwd-akzent-l92s40) !important;
    color: var(--mnwd-akzent-l25s76) !important;
    font-family: var(--mnwd-schrift-text) !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: transform .15s ease !important;
}
.mnw-tl-chip:hover { transform: translateY(-1px) !important; }
.mnw-tl-chip-falsch { background: #fceded !important; color: #A32D2D !important; }
.mnw-tl-chip-skip   { background: #f1efe8 !important; color: var(--mnwd-gedaempft) !important; }


/* ================================================================
   v3.101.1 — Design-Feinschliff Aufgabenset
   1) Taktleiste haengt am Badge statt ueber die volle Breite
   2) Werkzeug + Notensystem als EINE Karte
   3) Notensystem umschliesst den Inhalt (kein leerer grauer Block)
   4) Scroll-Pfeile nur bei echtem Ueberlauf
   ================================================================ */

/* 1) Taktleiste */
.mnw-tl {
    flex: 0 1 auto !important;
    margin-right: auto !important;
}
.mnw-tl-spur {
    min-width: 110px !important;
}

/* 2) Werkzeug + Notensystem = eine Karte */
.mnw-game-area {
    background: var(--mnw-white) !important;
    border-radius: var(--mnw-radius) !important;
    box-shadow: var(--mnw-shadow) !important;
    gap: 0 !important;
    overflow: hidden !important;
}
.mnw-game-area .mnw-toolbar {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    border-bottom: 1px solid #eceeed !important;
}
.mnw-game-area .mnw-staff-area {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 18px 24px 22px !important;
}

/* 3) Notensystem umschliesst den Inhalt und steht mittig */
.mnw-staff-scroll-container {
    justify-content: center !important;
}
.mnw-game-area .mnw-staff-wrapper {
    flex: 0 1 auto !important;
    width: max-content !important;
    max-width: 100% !important;
    margin: 0 auto !important;
}

/* 4) Scroll-Pfeile ausblenden, wenn nichts scrollt */
.mnw-scroll-btn.mnw-scroll-aus {
    display: none !important;
}

/* Schmale Bildschirme: volle Breite, echtes Scrollen bleibt erhalten */
@media (max-width: 768px) {
    .mnw-game-area .mnw-staff-area {
        padding: 12px 10px 14px !important;
    }
    .mnw-game-area .mnw-staff-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
    .mnw-staff-scroll-container {
        justify-content: flex-start !important;
    }
    .mnw-tl {
        flex: 1 1 100% !important;
        margin-right: 0 !important;
    }
    .mnw-tl-spur {
        max-width: none !important;
    }
}

/* Querformat auf dem Handy: Werkzeug steht links neben dem Notensystem */
@media (max-height: 500px) and (orientation: landscape) {
    .mnw-game-area .mnw-toolbar {
        border-bottom: none !important;
        border-right: 1px solid #eceeed !important;
    }
}


/* ================================================================
   v3.101.2 — Notensystem nutzt die Kartenbreite, Taktleiste ohne Ueberlappung
   ================================================================ */
.mnw-game-area .mnw-staff-wrapper {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 940px !important;
    margin: 0 auto !important;
}
.mnw-game-area #mnw-staff {
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
}
.mnw-game-area #mnw-staff svg {
    margin: 0 auto !important;
}

/* Taktleiste: Punkte bleiben innerhalb der Spur */
.mnw-tl-spur {
    overflow-x: clip !important;
    overflow-y: visible !important;
}
@media (max-width: 768px) {
    .mnw-tl-spur {
        width: auto !important;
        flex: 1 1 auto !important;
    }
    .mnw-game-area .mnw-staff-wrapper {
        max-width: 100% !important;
    }
}


/* ================================================================
   v3.101.7 — Der Rahmen passt sich dem Notensystem an, nicht umgekehrt.
   Keine Streckung der Takte: Notenbild und Taktbreite bleiben exakt so,
   wie es die Engine-/Backend-Parameter vorgeben.
   ================================================================ */
.mnw-game-area .mnw-staff-wrapper {
    flex: 0 1 auto !important;
    width: max-content !important;
    max-width: 100% !important;
    margin: 0 auto !important;
}
.mnw-game-area #mnw-staff {
    width: auto !important;
    min-width: 0 !important;
}
.mnw-game-area #mnw-staff svg {
    margin: 0 !important;
}
@media (max-width: 768px) {
    .mnw-game-area .mnw-staff-wrapper {
        width: 100% !important;
        margin: 0 !important;
    }
}


/* ================================================================
   v3.101.8 — Der graue Notenbereich fuellt die Kartenbreite,
   das Notensystem selbst behaelt seine Groesse und steht mittig.
   ================================================================ */
.mnw-game-area .mnw-staff-wrapper {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}
.mnw-game-area #mnw-staff {
    width: auto !important;
    min-width: 0 !important;
}
/* v3.101.10 — Notensystem linksbuendig statt zentriert */
.mnw-game-area #mnw-staff > *,
.mnw-game-area #mnw-staff svg {
    margin-left: 0 !important;
    margin-right: auto !important;
}