/* ========================================================= */
/* ==   TRAINING APP: MODAL & FULLSCREEN LAYOUT           == */
/* ========================================================= */

.praxis-modal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 22px;
    border-radius: 8px;
    background-color: #333333; 
    background-image: linear-gradient(to bottom, #333333, #2a2a2a);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    border: none;
    cursor: pointer;
    font-size: 1.3rem;
    line-height: 1;
    transition: transform 0.15s ease-out, box-shadow 0.15s ease-out, background 0.15s ease-out;
}

.praxis-modal-btn .btn-text {
    display: inline-block;
    font-family: 'Noto Sans', sans-serif;
    font-size: 1rem;
    font-weight: 300;
    transition: color 0.15s ease-out;
}

#openAnleitungBtn .btn-text { color: #999999; }
#openPraxisBtn .btn-text { color: #43bd88; }
#openAnleitungBtn { margin-bottom: 5px; }

#openAnleitungBtn:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 10px rgba(182, 182, 182, 0.7); 
}
#openAnleitungBtn:hover .btn-text { color: #ffffff; }

#openPraxisBtn:hover {
    transform: translateY(-1px);
    background-color: #43bd88;
    background-image: linear-gradient(to bottom, #43bd88, #43bd88); 
    box-shadow: 0 0 15px rgba(67, 189, 136, 0.8);
}
#openPraxisBtn:hover .btn-text { color: #000000; }

.praxis-buttons-tweak {
    margin-top: 0px;    
    margin-bottom: 250px; 
}

.praxis-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #121212; 
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000; 
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-out, visibility 0.2s ease-out;
}

.praxis-modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.praxis-modal-card-fullscreen {
    width: 100vw;
    height: 100vh;
    background-color: #121212;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 90px 1fr 90px;
    box-sizing: border-box;
    transform: scale(0.95);
    transition: transform 0.2s ease-out;
    overflow: hidden; 
}

.praxis-modal-overlay.is-open .praxis-modal-card-fullscreen {
    transform: scale(1);
}

.praxis-fullscreen-controls {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    position: absolute;
    top: 25px;
    right: 30px;
    display: flex;
    align-items: center;
    gap: 20px; 
    z-index: 100;
}

.praxis-modal-reset,
.praxis-modal-close {
    background: none;
    border: none;
    color: #d0d0d0; 
    cursor: pointer;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: color 0.15s ease, transform 0.15s ease;
}

.praxis-modal-close {
    font-size: 2.5rem; 
    font-weight: 300;
    line-height: 0.8;
}

.praxis-modal-reset:hover,
.praxis-modal-close:hover {
    color: #ffffff; 
    transform: scale(1.15);
}

/* ========================================================= */
/* ==   TRAINING APP: SCENARIO SELECTION                  == */
/* ========================================================= */

.praxis-fullscreen-top {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    padding-right: 80px; 
}

.praxis-scenario-bar-single {
    display: flex;
    align-items: center;
    gap: 15px; 
    background-color: transparent;
    border: none;
    padding: 0;
    margin-bottom: 0;
    flex-shrink: 0;
}

.scenario-select-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.scenario-select-group label {
    font-size: 0.95rem;      
    font-weight: 300;        
    color: #888888; 
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.3s ease; 
}

.scenario-select-group label.color-green {
    color: #43bd88; 
}

.scenario-select {
    background-color: #252525;
    border: 1px solid #444444;
    border-radius: 6px;
    color: #e0e0e0;
    padding: 6px 12px;
    font-family: 'Noto Sans', sans-serif;
    font-size: 0.88rem;
    font-weight: 300;
    outline: none;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.scenario-select:hover,
.scenario-select:focus {
    border-color: #e0e0e0; 
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.2); 
}

@keyframes blink-attention {
    0%, 100% { border-color: #444444; box-shadow: none; }
    50% { border-color: #43bd88; box-shadow: 0 0 15px rgba(67, 189, 136, 0.8); }
}

.attention-blink {
    animation: blink-attention 1.3s ease-in-out 1;
}

/* ========================================================= */
/* ==   TRAINING APP: DRAG PALETTE & CARDS                == */
/* ========================================================= */

.praxis-fullscreen-palette {
    grid-column: 1 / 2;
    grid-row: 1 / 3; 
    padding: 30px 20px 5px 20px; 
    overflow-y: auto;
    background-color: transparent; 
    display: flex;
    flex-direction: column;
    min-height: 0; 
}

.panel-title {
    margin: 0 0 5px 0;
    font-size: 0.95rem;
    font-weight: 300;        
    color: #e65bc3;          
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-bottom: 8px;
    white-space: nowrap; 
}

.element-palette {
    display: flex;
    flex-direction: column;
    gap: 0; 
    overflow-y: auto;
    height: 100%;
}

.palette-group {
    position: relative;
    padding-left: 28px; 
    margin-bottom: 4px; 
    display: flex;
    flex-direction: column;
    gap: 0px; 
}

.palette-group-label {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) rotate(180deg); 
    writing-mode: vertical-rl; 
    margin: 0; 
    font-size: 0.7rem;
    letter-spacing: 1.5px; 
    color: #888888;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap; 
}

.draggable-card {
    --base-scale: 1; 
    transform: scale(var(--base-scale)); 
    background-color: #2a2a2a;
    border: 1px solid #444444;
    border-radius: 6px;
    padding: 6px 10px; 
    color: #e0e0e0;
    font-size: 0.85rem; 
    cursor: grab;
    user-select: none;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.draggable-card:hover {
    transform: scale(calc(var(--base-scale) * 1.03)); 
    border-color: #444444;  
    background-color: #2a2a2a; 
    box-shadow: none;       
}

#dropZone .draggable-card.is-selected,
#dropZone .draggable-card.is-selected:hover {
    transform: scale(calc(var(--base-scale) * 1.03)); 
    box-shadow: 0 4px 15px rgba(0,0,0,0.5), 0 0 15px rgba(230, 91, 195, 0.4); 
    z-index: 100;
}

.draggable-card:active {
    cursor: grabbing;
}

/* Naked Emojis */
.draggable-card.emoji-only-card {
    font-size: 2.8rem;
    padding: 5px;
    width: max-content;
    height: max-content;
    line-height: 1.2;
    text-align: center;
    background-color: transparent;
    border: none;
    box-shadow: none;
}

.draggable-card.emoji-only-card:hover {
    transform: scale(1.08); 
    background-color: transparent; 
    box-shadow: none;              
}

#dropZone .draggable-card.emoji-only-card.is-selected,
#dropZone .draggable-card.emoji-only-card.is-selected:hover {
    transform: scale(1.08); 
    background-color: transparent; 
    box-shadow: none;              
    border-radius: 0;
    filter: drop-shadow(0 0 6px rgba(230, 91, 195, 0.6)) 
            drop-shadow(0 0 15px rgba(230, 91, 195, 0.3));
}

.emoji-ok { position: relative; z-index: 1; }
.emoji-q {
    position: relative;
    z-index: 2;
    margin-left: -16px; 
    top: -0px;          
    font-size: 1em;   
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.6));
}

/* ========================================================= */
/* ==   TRAINING APP: WORKSPACE & DROP ZONE               == */
/* ========================================================= */

.praxis-fullscreen-workspace {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    background-color: transparent; 
    box-shadow: none;              
    border-radius: 0;              
    position: relative;
    display: flex; 
    flex-direction: column;
    min-height: 0; 
}

.tabletop-drop-zone {
    width: 100%;
    flex-grow: 1; 
    box-sizing: border-box;
    position: relative; 
    padding: 0;         
    overflow: hidden;   
}

.drop-hint {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 0.95rem;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 2; 
    pointer-events: none;
}
.drop-hint span { font-weight: inherit; }

#dropZone .draggable-card {
    position: absolute;   
    width: max-content;   
    margin: 0;            
    z-index: 10;          
    background-color: #252525; 
    border: none;              
    box-shadow: 0 2px 5px rgba(0,0,0,0.4); 
}

#dropZone .draggable-card.emoji-only-card {
    background-color: transparent;
    box-shadow: none;
}

.selection-box {
    position: absolute;
    background-color: rgba(230, 91, 195, 0.15); 
    border: none; 
    z-index: 9999;
    pointer-events: none; 
    display: none;
}

/* ========================================================= */
/* ==   TRAINING APP: CASCADING MENUS & SCHEMA UNFLD      == */
/* ========================================================= */

.redemittel-dropdown, .pause-dropdown {
    position: absolute;
    top: 0;             
    left: 100%;         
    margin-top: 0;      
    margin-left: 15px;  
    background-color: #252525;
    border: 1px solid #e0e0e0; 
    border-radius: 6px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.6);
    z-index: 1000;
    display: flex;
    flex-direction: column;
}

.redemittel-dropdown {
    width: 250px; 
    overflow-y: auto; 
    max-height: 85vh; 
    scrollbar-width: thin;
    scrollbar-color: #555555 transparent; 
}
.redemittel-dropdown::-webkit-scrollbar { width: 8px; }
.redemittel-dropdown::-webkit-scrollbar-track { background: transparent; }
.redemittel-dropdown::-webkit-scrollbar-thumb { background-color: #555555; border-radius: 4px; }
.redemittel-dropdown::-webkit-scrollbar-thumb:hover { background-color: #777777; }

.pause-dropdown {
    width: 140px;
    overflow: hidden;
    border: none;
}

.redemittel-category-header {
    padding: 8px 12px;
    color: #43bd88; 
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
    background-color: #1e1e1e;
    border-bottom: 1px solid #444;
}

.redemittel-option, .pause-option {
    padding: 8px 12px;
    color: #e0e0e0;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    border-bottom: 1px solid #333;
}
.redemittel-option:last-child, .pause-option:last-child { border-bottom: none; }

.redemittel-option:hover {
    background-color: #303030;
    color: #fff;
}
.pause-option:hover {
    color: #e65bc3;
    font-weight: 500;
}

.redemittel-option * { pointer-events: none; }

.redemittel-option.form-option-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    gap: 12px; 
}
.redemittel-option .option-label { white-space: nowrap; flex-grow: 1; }
.level-tag {
    color: #43bd88;
    background-color: rgba(67, 189, 136, 0.12);
    font-size: 0.72em;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    white-space: nowrap;
    margin-left: auto; 
    user-select: none;
    pointer-events: none; 
}

.scroll-indicator-arrow {
    position: sticky;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    background: linear-gradient(to bottom, rgba(37,37,37,0) 0%, rgba(37,37,37,1) 50%);
    color: #e65bc3;
    padding: 15px 0 5px 0;
    font-size: 14px;
    pointer-events: auto; 
    cursor: pointer;      
    z-index: 10;
    transition: opacity 0.2s ease;
    animation: subtleBounce 1.5s infinite;
}
@keyframes subtleBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(3px); }
}

.schema-unfolded {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 12px;
    font-size: 0.85rem;
    line-height: 1.5;
    height: auto !important; 
    text-align: left;
    background-color: #2a2a2a; 
}
.schema-unfolded > span { display: block; }
.schema-letter { font-weight: bold; }

/* ========================================================= */
/* ==   TRAINING APP: AUDIO, PLAY BUTTONS & ANIMATIONS    == */
/* ========================================================= */

.praxis-fullscreen-bottom {
    grid-column: 2 / 3; 
    grid-row: 3 / 4;
    display: flex;
    align-items: flex-end;     
    padding-bottom: 30px;      
    justify-content: center;   
    gap: 20px;
    background-color: transparent;
}

.workspace-floating-play-btn {
    position: absolute;
    top: 0px; 
    left: 50%;
    transform: translateX(-50%); 
    z-index: 50;
    margin: 0; 
    padding: 0;
}

.icon-btn-static {
    background-color: #252525;
    border: 1px solid #444444;
    border-radius: 8px;
    color: #a0a0a0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    cursor: default;
    user-select: none;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.icon-btn-static:hover { border-color: #666666; color: #ffffff; }

.icon-btn-static.praxis-audio-btn {
    width: 56px;
    height: 56px;
    border: none;
    color: #2e95d3;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    position: relative;
    cursor: pointer;
    transition: all 0.15s ease;
}
.icon-btn-static.praxis-audio-btn .audio-icon { width: 28px; height: 28px; transition: all 0.15s ease; }
.icon-btn-static.praxis-audio-btn:hover { background-color: #252525; }

.praxis-audio-btn .icon-default { display: block; }
.praxis-audio-btn .icon-hover,
.praxis-audio-btn .icon-prompt-playing,
.praxis-audio-btn .icon-active,
.praxis-audio-btn .icon-hover-play,
.praxis-audio-btn .icon-active-playpause { display: none; }

#record-audio-btn:hover { color: #E60000; transform: translateY(-2px); box-shadow: 0 0 12px rgba(230, 0, 0, 0.6); }
#record-audio-btn:hover .icon-default { display: none; }
#record-audio-btn:hover .icon-hover { display: block; }
#record-audio-btn.is-prompt-playing { color: #E60000; animation: pulse-red 2s ease-in-out infinite; }
#record-audio-btn.is-prompt-playing .icon-default, #record-audio-btn.is-prompt-playing .icon-hover, #record-audio-btn.is-prompt-playing .icon-active { display: none; }
#record-audio-btn.is-prompt-playing .icon-prompt-playing { display: block; }
#record-audio-btn.is-recording { color: #E60000; animation: pulse-red 2s ease-in-out infinite; }
#record-audio-btn.is-recording .icon-default, #record-audio-btn.is-recording .icon-hover, #record-audio-btn.is-recording .icon-prompt-playing { display: none; }
#record-audio-btn.is-recording .icon-active { display: block; }

#playback-audio-btn:hover { color: #43bd88; transform: translateY(-2px); box-shadow: 0 0 12px rgba(67, 189, 136, 0.7); }
#playback-audio-btn:hover .icon-default { display: none; }
#playback-audio-btn:hover .icon-hover-play { display: block; }
#playback-audio-btn.is-playing { color: #43bd88; animation: pulse-green 2s ease-in-out infinite; }
#playback-audio-btn.is-playing .icon-default, #playback-audio-btn.is-playing .icon-hover-play { display: none; }
#playback-audio-btn.is-playing .icon-active-playpause { display: block; }

#export-video-btn:hover { color: #2e95d3; transform: translateY(-2px); box-shadow: 0 0 12px rgba(46, 149, 211, 0.7); }
#export-video-btn:hover .icon-default { display: none; }
#export-video-btn:hover .icon-hover { display: block; }
#export-video-btn.is-exporting { color: #2e95d3; animation: pulse-blue 2s ease-in-out infinite; }

@keyframes pulse-red { 0%, 100% { box-shadow: 0 0 10px rgba(230, 0, 0, 0.7); } 50% { box-shadow: 0 0 18px rgba(230, 0, 0, 1); } }
@keyframes pulse-green { 0%, 100% { box-shadow: 0 0 10px rgba(67, 189, 136, 0.7); } 50% { box-shadow: 0 0 18px rgba(67, 189, 136, 1); } }
@keyframes pulse-blue { 0%, 100% { box-shadow: 0 0 10px rgba(46, 149, 211, 0.7); } 50% { box-shadow: 0 0 18px rgba(46, 149, 211, 1); } }
@keyframes pulse-end-grey { 0%, 100% { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); transform: scale(1); } 50% { box-shadow: 0 0 15px rgba(220, 220, 220, 0.6); transform: scale(1.08); } }

.modal-play-button-small.pulse-once { animation: pulse-end-grey 0.3s ease-out; }

/* Tooltips for Audio Buttons */
.icon-btn-static.praxis-audio-btn::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    background-color: #252525;
    color: #ffffff;
    border: 1px solid #333333;
    border-radius: 6px;
    font-family: 'Noto Sans', sans-serif;
    font-size: 0.85rem;
    font-weight: 300;
    line-height: 1.35;
    padding: 8px 14px;
    width: max-content;
    white-space: pre; 
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 1000;
}
.icon-btn-static.praxis-audio-btn:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.modal-play-button-small {
    width: 44px;
    height: 44px;
    background-image: linear-gradient(to bottom, #333333, #2a2a2a);
    border-radius: 50%; 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.modal-play-button-small .modal-play-pause-icon-container {
    display: flex;
    align-items: center;
    gap: 2px;
    transform: scale(0.7); 
}
.modal-play-button-small .modal-play-icon-triangle {
    width: 0; height: 0;
    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
    border-left: 22px solid #8a8a8a; 
    transition: border-left-color 0.15s ease-out;
}
.modal-play-button-small .modal-play-icon-bar {
    width: 5px; height: 26px;
    background-color: #8a8a8a;
    border-radius: 1px;
    transition: background-color 0.15s ease-out;
}

.modal-play-button-small:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 10px rgba(67, 189, 136, 0.7); 
}
.modal-play-button-small:hover .modal-play-icon-triangle { border-left-color: #43bd88; }
.modal-play-button-small:hover .modal-play-icon-bar { background-color: #43bd88; }

.modal-play-button-small.is-ready-green .modal-play-icon-triangle { border-left-color: #43bd88; }
.modal-play-button-small.is-ready-green .modal-play-icon-bar { background-color: #43bd88; }

.modal-play-button-small.playing {
    transform: translateY(-1px);
    animation: pulse-green 2s ease-in-out infinite;
}
.modal-play-button-small.playing .modal-play-icon-triangle { border-left-color: #43bd88; }
.modal-play-button-small.playing .modal-play-icon-bar { background-color: #43bd88; }

/* ========================================================= */
/* ==   TRAINING APP: TRASH BIN                           == */
/* ========================================================= */

.workspace-trash-bin {
    width: 56px;          
    height: 56px;         
    border-radius: 10px;  
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 60;
    pointer-events: auto;
    background-color: #000000; 
    box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.8); 
    color: #a0a0a0; 
    opacity: 0.7; 
    transform: scale(0.95);
    transition: opacity 0.25s ease, transform 0.25s ease, color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.workspace-trash-bin.is-active {
    opacity: 1;
    transform: scale(0.95); 
    color: #E60000;         
    background-color: #000000; 
    box-shadow: inset 0 6px 12px rgba(0, 0, 0, 0.9), 
                inset 0 0 25px rgba(230, 0, 0, 0.6);
    pointer-events: auto; 
}

.workspace-trash-bin.drag-over {
    color: #ffffff; 
    background-color: #E60000; 
    box-shadow: 0 0 15px rgba(230, 0, 0, 0.6); 
    transform: scale(1.15);
}

.workspace-trash-bin::after {
    content: attr(data-tooltip);
    position: absolute;
    right: 115%; 
    top: 50%;
    transform: translateY(-50%) translateX(10px); 
    background-color: #1e1e1e;
    color: #ffffff;
    padding: 8px 12px;
    border-radius: 6px;
    font-family: 'Noto Sans', sans-serif;
    font-size: 1rem; 
    font-weight: 300;
    line-height: 1.4;
    width: max-content;
    max-width: 220px; 
    white-space: pre-wrap;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
    opacity: 0;
    pointer-events: none; 
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
    z-index: 100;
}
.workspace-trash-bin:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* ========================================================= */
/* ==   TRAINING APP: MOBILE WARNING                      == */
/* ========================================================= */

.mobile-exercise-warning {
    display: none;
    background-color: #000000; 
    box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.8); 
    border: none; 
    border-radius: 6px; 
    color: #a0a0a0; 
    width: 220px;           
    aspect-ratio: 1 / 1;    
    padding: 20px;          
    margin: 0px auto 250px auto; 
}

.mobile-exercise-warning .laptop-icon {
    font-size: 1rem; 
    line-height: 1;
    margin-bottom: 8px; 
    opacity: 0.7; 
}

.mobile-exercise-warning p {
    margin: 0;
    font-size: 1rem; 
    font-weight: 300;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .praxis-buttons-tweak { display: none !important; }
    .mobile-exercise-warning {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
}



/* ========================================================= */
/* ==   TRAINING APP: LIGHT MODE HYBRID OVERRIDES         == */
/* ========================================================= */

/* 1. Light Workspace Background */
[data-theme="light"] .praxis-fullscreen-workspace {
    background-color: #f4f5f7; 
}

/* 2. Light Drop-Hint Text */
[data-theme="light"] .drop-hint {
    color: #666666;
    font-weight: 350;
}

/* 3. Light Dropped Cards (Only on the workspace, not in the palette) */
[data-theme="light"] #dropZone .draggable-card {
    background-color: #ffffff;
    color: #1a1a1a;
    border: 1px solid #d1d5db;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
    font-weight: 350;
}

/* 4. Light Dropped Cards Hover & Selection States */
[data-theme="light"] #dropZone .draggable-card:hover {
    background-color: #ffffff;
    border-color: #b0b5bd;
}

[data-theme="light"] #dropZone .draggable-card.is-selected,
[data-theme="light"] #dropZone .draggable-card.is-selected:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12), 0 0 15px rgba(230, 91, 195, 0.5); 
    border-color: #e65bc3;
}

/* 5. Light Mode Unfolded Schemas */
[data-theme="light"] #dropZone .schema-unfolded {
    background-color: #ffffff;
}

/* 6. Light Mode Floating Play Button */
[data-theme="light"] .workspace-floating-play-btn .modal-play-button-small {
    background-image: none;
    background-color: #ffffff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}


/* ========================================================= */
/* ==   TRAINING APP: LIGHT MODE APP FRAME                == */
/* ========================================================= */

/* 1. Turn the entire modal background light (Palette & Top Bar) */
[data-theme="light"] .praxis-modal-card-fullscreen {
    background-color: #f4f5f7; 
}

/* 2. Upgrade the Workspace to pure white to resemble a sheet of paper */
[data-theme="light"] .praxis-fullscreen-workspace {
    background-color: #ffffff; 
    /* Adds a very subtle shadow to separate the white canvas from the light grey palette */
    box-shadow: -4px 0 15px rgba(0, 0, 0, 0.03);
}

/* 3. Invert the Top-Right UI Controls (Close & Reset) so they are visible on light */
[data-theme="light"] .praxis-fullscreen-controls .praxis-modal-reset,
[data-theme="light"] .praxis-fullscreen-controls .praxis-modal-close {
    color: #888888;
}

[data-theme="light"] .praxis-fullscreen-controls .praxis-modal-reset:hover,
[data-theme="light"] .praxis-fullscreen-controls .praxis-modal-close:hover {
    color: #1a1a1a;
}

/* 4. Ensure the black Trash Bin casts a slight external shadow on the white canvas */
[data-theme="light"] .workspace-trash-bin {
    box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0,0,0,0.1); 
}


/* ========================================================= */
/* ==   TRAINING APP: YIN-YANG BUTTON POSITION OVERRIDE   == */
/* ========================================================= */

/* Mathematically centered under the 280px palette and aligned with audio buttons */
body.page-sprechtraining-aag .fixed-bottom-left, /* <-- ADD THIS LINE */
body.page-teamkommunikation .fixed-bottom-left,
body.page-moderation .fixed-bottom-left {
    left: 88px;
    bottom: 42px;
}

/* Mobile fallback */
@media (max-width: 600px) {
    body.page-sprechtraining-aag .fixed-bottom-left, /* <-- ADD THIS LINE */
    body.page-teamkommunikation .fixed-bottom-left,
    body.page-moderation .fixed-bottom-left {
        left: 25px;   
        bottom: 30px; 
    }
}


/* ========================================================== */
/* THEME-SYNC: LIGHT MODE OVERRIDES FÜR SPRECHTRAINING (APG)  */
/* ========================================================== */

/* 1. Modal-Hintergrund dynamisch an das Theme koppeln */
[data-theme="light"] .praxis-modal-card-fullscreen {
    background-color: var(--bg-body); /* Ersetzt das harte #121212 durch den sanften Grauton #f4f5f7 */
}

/* 2. Workspace "grell weiß" entfernen -> Einheitlicher Hintergrund */
[data-theme="light"] .praxis-fullscreen-workspace,
[data-theme="light"] .tabletop-drop-zone {
    background-color: transparent !important; 
    box-shadow: none !important; /* Entfernt den künstlichen Papier-Schatten */
}

/* 3. Invertierung der Steuerungsknöpfe oben rechts */
[data-theme="light"] .praxis-fullscreen-controls .praxis-modal-reset,
[data-theme="light"] .praxis-fullscreen-controls .praxis-modal-close {
    color: var(--text-muted);
}

[data-theme="light"] .praxis-fullscreen-controls .praxis-modal-reset:hover,
[data-theme="light"] .praxis-fullscreen-controls .praxis-modal-close:hover {
    color: var(--text-primary);
}

/* 4. Rechte untere Werkzeuge (Hamburger-Menü, CCOG-Button & Mülleimer) im Light Mode */
[data-theme="light"] #elements-list-btn,
[data-theme="light"] #ccog-image-btn {
    background-color: var(--bg-surface-1);
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

[data-theme="light"] .workspace-trash-bin {
    box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0,0,0,0.1); 
    color: var(--text-primary);
}

[data-theme="light"] .workspace-trash-bin.drag-over {
    color: #ffffff; /* Bleibt beim Hover weiß/rot */
    box-shadow: 0 0 15px rgba(230, 0, 0, 0.4); 
}

/* 5. Audio Player Buttons (Record/Play/Export) im Light Mode anpassen */
[data-theme="light"] .icon-btn-static {
    background-color: var(--bg-surface-1);
    border-color: var(--border-subtle);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .icon-btn-static:hover {
    background-color: #ffffff;
    border-color: var(--text-muted);
    color: var(--text-primary);
}


/* ========================================================== */
/* THEME-SYNC: LIGHT MODE FÜR KASKADEN / DROPDOWNS            */
/* ========================================================== */

/* 1. Haupt-Container der Dropdowns */
[data-theme="light"] .redemittel-dropdown, 
[data-theme="light"] .pause-dropdown {
    background-color: #ffffff !important;
    border-color: #d1d5db !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12) !important;
}

/* 2. Scrollbar für Light Mode anpassen */
[data-theme="light"] .redemittel-dropdown::-webkit-scrollbar-thumb {
    background-color: #d1d5db !important;
}
[data-theme="light"] .redemittel-dropdown::-webkit-scrollbar-thumb:hover {
    background-color: #a0a0a0 !important;
}

/* 3. Kategorie-Header ("Zurück"-Buttons) */
/* !important zwingt die per JS generierten #252525-Styles in die Knie */
[data-theme="light"] .redemittel-category-header {
    background-color: #f8f9fa !important; 
    color: #1a1a1a !important; 
    border-bottom: 1px solid #d1d5db !important;
}

/* 4. Einzelne Listen-Optionen */
[data-theme="light"] .redemittel-option, 
[data-theme="light"] .pause-option {
    color: #1a1a1a !important;
    border-bottom: 1px solid #eef0f4 !important;
}

/* 5. Hover-Zustand für Optionen */
[data-theme="light"] .redemittel-option:hover, 
[data-theme="light"] .pause-option:hover {
    background-color: #f4f5f7 !important;
    /* CAVE: Hier bewusst KEIN !important für 'color' setzen, 
       damit das JS-Hover (Pink/Blau) weiterhin funktioniert! */
}

/* 6. Der hüpfende Scroll-Pfeil am unteren Rand */
[data-theme="light"] .scroll-indicator-arrow {
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%) !important;
}


/* ========================================================== */
/* THEME-SYNC: LIGHT MODE PAPIERKORB                          */
/* ========================================================== */

/* 1. Grundzustand: Hellgraue Vertiefung statt schwarzem Loch */
[data-theme="light"] .workspace-trash-bin {
    background-color: #eef0f4 !important; 
    color: #666666 !important; 
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

/* 2. Aktiviert (beim Greifen einer Karte): Zarter roter Schimmer */
[data-theme="light"] .workspace-trash-bin.is-active {
    background-color: #fef2f2 !important; 
    color: #E60000 !important;
    box-shadow: inset 0 3px 8px rgba(230, 0, 0, 0.15) !important;
}

/* 3. Drag-Over (beim Loslassen): Kräftiges Rot */
[data-theme="light"] .workspace-trash-bin.drag-over {
    background-color: #E60000 !important;
    color: #ffffff !important;
    box-shadow: 0 0 15px rgba(230, 0, 0, 0.4) !important;
}


/* ========================================================= */
/* == SPRECHTRAINING AAG BLUE BUTTON & STACKING FIX       == */
/* ========================================================= */

/* 1. Stack buttons vertically for both APG and AAG pages */
.page-moderation .button-container,
.page-sprechtraining-aag .button-container {
  display: flex;
  flex-direction: column; 
  align-items: center;    
  gap: 16px;              
  margin: 30px auto;
  width: 100%;
}

/* 2. Change default green text to blue for the AAG page */
.page-sprechtraining-aag #openPraxisBtn .btn-text {
    color: var(--accent-blue) !important;
}

/* 3. Change green hover background and glow to blue */
.page-sprechtraining-aag #openPraxisBtn:hover {
    background-color: var(--accent-blue) !important;
    background-image: linear-gradient(to bottom, var(--accent-blue), var(--accent-blue)) !important;
    box-shadow: 0 0 15px var(--accent-blue-glow) !important;
}

/* 4. Force the text to turn black when the AAG button is hovered */
.page-sprechtraining-aag #openPraxisBtn:hover .btn-text {
    color: #000000 !important;
}


/* ========================================================= */
/* == PROTECT NAKED EMOJIS IN LIGHT MODE                  == */
/* ========================================================= */
[data-theme="light"] #dropZone .draggable-card.emoji-only-card {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

[data-theme="light"] #dropZone .draggable-card.emoji-only-card.is-selected,
[data-theme="light"] #dropZone .draggable-card.emoji-only-card.is-selected:hover {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    /* Keeps the glowing selection aura without the box */
    filter: drop-shadow(0 0 6px rgba(230, 91, 195, 0.6)) drop-shadow(0 0 15px rgba(230, 91, 195, 0.3));
}


/* ========================================================= */
/* == RESCUED: ANLEITUNG MODAL (APG)                      == */
/* ========================================================= */
.modal {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    display: flex; justify-content: center; align-items: center;
    background-color: rgba(0, 0, 0, 0.7);
    opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
    z-index: 10000; /* Ensures it floats above the main page */
}

.modal.active {
    opacity: 1; pointer-events: all;
}

.modal-body {
    position: relative; padding: 40px; max-width: 1000px; width: 90%;
    background-color: #1e1e1e; border-radius: 8px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.6);
    transform: translateY(-20px); transition: transform 0.3s ease;
    max-height: min(85vh, calc(100vh - 40px)); overflow-y: auto; 
}

.modal.active .modal-body {
    transform: translateY(0);
}

/* Light Mode Overrides for the Modal */
[data-theme="light"] .modal-body {
    background-color: #ffffff;
    color: #1a1a1a;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}


/* ========================================================= */
/* == ATTENTION BLINK (LIGHT MODE OVERRIDE)               == */
/* ========================================================= */

@keyframes blink-attention-light {
    0%, 100% { 
        border-color: var(--border-subtle); 
        box-shadow: none; 
        background-color: transparent;
    }
    50% { 
        border-color: var(--accent-green); 
        /* Double-layered outer shadow + subtle inner shadow for high contrast on white */
        box-shadow: 0 0 14px rgba(39, 138, 94, 0.4), inset 0 0 8px rgba(39, 138, 94, 0.15); 
        /* Slight green wash inside the box */
        background-color: rgba(39, 138, 94, 0.05); 
    }
}

[data-theme="light"] .attention-blink {
    animation: blink-attention-light 1.3s ease-in-out 1 !important;
}

/* ========================================= */
/* == INFO BUTTON "i" STYLING             == */
/* ========================================= */
.help-icon-i {
    font-family: 'Noto Serif', serif;
    font-weight: 900; /* Black / Extra Extra Bold */
    font-size: 1.8rem;
    font-style: italic; 
    line-height: 1;
    color: currentColor;
    transition: color 0.15s ease;
}

/* ========================================= */
/* == HAMBURGER / INFO COCKPIT BUTTON     == */
/* ========================================= */
.hamburger-fab-btn {
    position: fixed;
    top: calc(50% + 75px); 
    left: 50%;
    transform: translate(-50%, -50%) scale(1); 
    width: 56px; 
    height: 56px; 
    
    /* Base Colorless State (Dark Mode) */
    background-color: #252525; 
    color: #e0e0e0; 
    border: 1px solid #444444; 
    border-radius: 8px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.5); 
    
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer; 
    z-index: 10050; 
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease,
                box-shadow 0.2s ease, background-color 0.15s, border-color 0.15s, color 0.15s;
}

.hamburger-fab-btn.is-shriveling {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
}

.hamburger-fab-btn.is-docked {
    top: calc(100vh - 92px); /* bottom: 36px */
    left: 152px;
    opacity: 1; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.4); 
    animation: mushroom-bounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes mushroom-bounce {
    0% { transform: translate(0, 0) scale(0); }
    100% { transform: translate(0, 0) scale(1); }
}

/* Dark Mode Hover Mechanics (Light Glow, No Stroke) */
.hamburger-fab-btn:hover {
    background-color: #333333;
    color: #ffffff;
    border-color: transparent !important; 
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.25) !important; /* White glow */
}
.hamburger-fab-btn.is-docked:hover {
    transform: translateY(-2px) scale(1); 
}
.hamburger-fab-btn:not(.is-docked):not(.is-shriveling):hover {
    transform: translate(-50%, -50%) scale(1.05); 
}

/* --- Light Mode Overrides (Shadow Only, No Stroke) --- */
[data-theme="light"] .hamburger-fab-btn {
    background-color: #ffffff;
    color: #1a1a1a;
    border-color: var(--border-subtle);
}
[data-theme="light"] .hamburger-fab-btn:not(.is-docked) {
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}
[data-theme="light"] .hamburger-fab-btn.is-docked {
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
[data-theme="light"] .hamburger-fab-btn:hover {
    background-color: #f8f9fa;
    color: #000000;
    border-color: transparent !important; 
    box-shadow: 0 6px 20px rgba(0,0,0,0.15) !important; /* Elegant dark shadow */
}

/* --- Mobile Positioning --- */
@media (max-width: 600px) {
    .hamburger-fab-btn.is-docked {
        left: 89px;
        top: calc(100vh - 80px); /* bottom: 24px */
    }
}

/* Tooltip Settings */
.hamburger-fab-btn::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    background-color: #252525;
    color: #ffffff;
    border: 1px solid #333333;
    border-radius: 6px;
    font-family: 'Noto Sans', sans-serif;
    font-size: 0.85rem;
    font-weight: 300;
    padding: 8px 14px;
    white-space: pre; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 1000;
}

.hamburger-fab-btn:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}



/* ========================================= */
/* == CONTEXT-AWARE MODAL STYLES          == */
/* ========================================= */
.dynamic-popup-container {
    position: fixed;
    top: 0; 
    left: 0; 
    width: 100vw; 
    height: 100vh;
    max-height: none; 
    transform: none; 
    background-color: rgba(18, 18, 18, 0.94); /* Corresponds to --bg-body (#121212) with blur opacity */
    backdrop-filter: blur(8px); 
    border-radius: 0; 
    z-index: 10050; 
    padding: 30px 40px 60px 40px; /* <--- HIER ANGEPASST (vorher 60px 40px) */
    box-sizing: border-box;
    overflow-y: auto;
    color: var(--text-primary);
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.popup-close-btn {
    position: fixed;
top: 30px; /* <--- HIER ANGEPASST (vorher 25px) */    right: 40px; 
    color: var(--text-muted); 
    font-size: 50px; 
    cursor: pointer; 
    line-height: 0.8; 
    transition: color 0.2s, transform 0.2s; 
    z-index: 10060;
}

.popup-close-btn:hover { 
    color: var(--text-primary); 
    transform: scale(1.1); 
}

.popup-content-grid {
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px; 
    width: 100%;
    max-width: 1400px; /* <--- ERHÖHT (vorher 1200px) */
    margin: auto;
}


/* ========================================= */
/* == INFO BUTTON "i" STYLING (YIN-YANG MATCH) == */
/* ========================================= */
.help-icon-i {
    font-family: 'Noto Serif', serif;
    font-weight: 600;
    font-size: 1.3rem; /* Perfekt skaliert für den 28px Kreis */
    font-style: italic; 
    line-height: 1;
    color: currentColor;
    transition: color 0.15s ease;
}


/* Light Mode Override for the "?" Info Modal */
[data-theme="light"] .dynamic-popup-container {
    background-color: rgba(244, 245, 247, 0.94); /* Matches Light Mode --bg-body */
}



/* ========================================= */
/* == INFO COCKPIT BUTTON (28px B/W CIRCLE)  == */
/* ========================================= */
.hamburger-fab-btn {
    position: fixed;
    top: calc(50% + 78px); 
    left: calc(50% + 154px); /* Zentriert unter dem Hinweistext der Arbeitsfläche */
    transform: translate(-50%, -50%) scale(1); 
    width: 29px; 
    height: 29px; 
    
    /* Exakte Yin-Yang Farbstruktur (Dark Mode) */
    background-color: #1e1e1e; 
    color: #e0e0e0; 
    border: none; 
    border-radius: 50%; 
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); 
    
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer; 
    z-index: 10050; 
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease,
                box-shadow 0.2s ease, background-color 0.15s, color 0.15s;
}

.hamburger-fab-btn.is-shriveling {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
}

/* Gedockter Zustand unten links */
.hamburger-fab-btn.is-docked {
    top: calc(100vh - 79px); /* bottom: 36px */
    left: 180px;
    opacity: 1; 
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); 
    animation: mushroom-bounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes mushroom-bounce {
    0% { transform: translate(0, 0) scale(0); }
    100% { transform: translate(0, 0) scale(1); }
}

/* Hover-Mechanik (Schlichter Monochrom-Glow) */
.hamburger-fab-btn:hover {
    background-color: #333333;
    color: #ffffff;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.4) !important;
}

.hamburger-fab-btn.is-docked:hover {
    transform: translateY(-2px) scale(1); 
}

.hamburger-fab-btn:not(.is-docked):not(.is-shriveling):hover {
    transform: translate(-50%, -50%) scale(1.08); 
}

/* Light Mode Overrides (Invertierte B/W Optik) */
[data-theme="light"] .hamburger-fab-btn {
    background-color: #e0e0e0;
    color: #1e1e1e;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .hamburger-fab-btn:hover {
    background-color: #ffffff;
    color: #000000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

/* ========================================================= */
/* == APG (page-moderation) INFO BUTTON GREEN GLOW          == */
/* ========================================================= */
.page-moderation #elements-list-btn,
[data-theme="light"] .page-moderation #elements-list-btn {
    color: var(--accent-green);
}

.page-moderation #elements-list-btn:hover,
[data-theme="light"] .page-moderation #elements-list-btn:hover {
    color: var(--accent-green) !important;
    box-shadow: 0 0 15px var(--accent-green-glow) !important;
}



/* Hover-State für den Beispiele-Button im Pop-up */
.popup-beispiele-btn .btn-text {
    color: #999999;
}

.popup-beispiele-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 10px rgba(182, 182, 182, 0.7); 
}

.popup-beispiele-btn:hover .btn-text {
    color: #ffffff;
}

/* --- Light Mode Version für den Beispiele-Button im Pop-up --- */
[data-theme="light"] .popup-beispiele-btn {
    background-image: none; /* Entfernt den dunklen Farbverlauf */
    background-color: #ffffff;
    
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .popup-beispiele-btn .btn-text {
    color: var(--text-muted); /* Ein sauberes, lesbares Grau */
}

[data-theme="light"] .popup-beispiele-btn:hover {
    background-color: #f8f9fa;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    border-color: #b0b5bd;
}

[data-theme="light"] .popup-beispiele-btn:hover .btn-text {
    color: var(--text-primary); /* Wird beim Hovern dunkel, nicht mehr weiß */
}