#speech-control-area {
    display: none;
    flex-direction: column;
    gap: 0.5em;
    padding: 0.5em;
    border-top: 1px solid #ccc;
    background: #f1e2e2;
    color: #fff;
    transition: max-height 0.3s ease;
    max-height: 200px;
    overflow: hidden;
}

.speech-control-container {
    display: flex;
    column-gap: 3em;
}


#speech-control-area.active {
    display: flex;
}

.speech-buttons {
    display: flex;
    gap: 1em;
    justify-content: flex-end;
}

#transcript-preview {
    font-size: 1.3em;
    color: black;
    font-style: italic;
}

#transcript-final {
    color: darkblue;
    font-size: 1.3em;
    font-family: sans-serif;
    touch-action: pan-y; /* Erlaubt vertikales Scrollen, reduziert Konflikte */
    will-change: transform; /* Performance-Tipp */
    white-space: pre-wrap;
    overflow-y: auto;
    position: relative;
}

#vu-meterKI,
#vu-meter {
    width: 100%;
    height: 3em;
    background: #bdafaf;;
    border: 1px solid #444;
}
#vu-meterKI{
    display: none;
}

#speech-control-area.active.chat-active {
    background: transparent;
    .speech-buttons,
    #transcript-preview,
    #transcript-final {
        display: none;
    }
    #uv-meterKI {
        display: inline-block;
        width: 50%;
    }
    #vu-meter {
        width: 50%;
    }
}

@media screen and (orientation: portrait) {
        #uv-meterKI,
        #vu-meter {
            width: 50%
        }
}