/* <pc-video-editor> — Editor-Shell: Topbar, Werkzeugleiste, Panels, Bühne, Timeline. */

/* Custom Elements sind ohne Regel inline — dann trägt keine Höhe. */
pc-video-editor {
    display: block;
}

/* Volle Breite auf der Adminseite. Bewusst KEINE feste Höhe: `.center` bringt
   80 px Bodenabstand mit, gegen den der Editor sonst unten herausragt — die
   Höhe bestimmt die Mindesthöhe von .rd-ve. */
.rd-ve-page {
    width: 100%;
    max-width: none;
}

.rd-ve {
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Unter dem Seitenkopf wäre 100vh zu hoch; die Mindesthöhe hält den Editor
       bedienbar, auch wenn der Container keine Höhe vorgibt. */
    min-height: 680px;
    color: var(--rd-font-dark);
    background: var(--rd-list-default-dark);
}

.rd-ve.is-file-drag {
    outline: var(--rd-borderwidth-border-focus) dashed var(--rd-primary-active);
    outline-offset: calc(-1 * var(--rd-borderwidth-border-focus));
}

/* ---------- Topbar ---------- */

.rd-ve-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rd-spacing-md);
    padding: var(--rd-spacing-x-sm) var(--rd-spacing-md);
    background: var(--rd-list-default-light);
    border-bottom: var(--rd-borderwidth-border-default) solid var(--rd-gray-200);
}

.rd-ve-top-left,
.rd-ve-top-right {
    display: flex;
    align-items: center;
    gap: var(--rd-spacing-x-sm);
}

/* ---------- Vollbild ---------- */

/* Alles ausblenden, was nicht zum Editor gehört. Die Bereiche liegen außerhalb
   der Komponente, deshalb hängt die Klasse am body. */
body.rd-ve-fullscreen>header,
body.rd-ve-fullscreen>footer,
body.rd-ve-fullscreen>.kursadmin_warinung,
body.rd-ve-fullscreen pc-support-chat-button,
body.rd-ve-fullscreen .mainframe>nav,
body.rd-ve-fullscreen .mainframe>.navigation {
    display: none;
}

body.rd-ve-fullscreen {
    overflow: hidden;
}

body.rd-ve-fullscreen .mainframe,
body.rd-ve-fullscreen .mainframe>section,
body.rd-ve-fullscreen .rd-ve-page {
    height: 100vh;
    margin: 0;
    padding: 0;
}

body.rd-ve-fullscreen .rd-ve {
    height: 100vh;
    min-height: 0;
}

.rd-ve-brand {
    font-weight: var(--rd-fontweights-open-sans-2);
    color: var(--rd-primary-active);
}

.rd-ve-title-input {
    border: var(--rd-borderwidth-border-default) solid transparent;
    border-radius: var(--rd-borderradius-border-sm);
    padding: var(--rd-spacing-xx-sm) var(--rd-spacing-x-sm);
    background: none;
    font: inherit;
    /* Wächst mit dem Titel, statt lange Namen abzuschneiden. */
    field-sizing: content;
    min-width: 10ch;
    max-width: 40ch;
}

.rd-ve-title-input:hover,
.rd-ve-title-input:focus {
    border-color: var(--rd-gray-300);
    background: var(--rd-list-default-light);
}

/* ---------- Grundaufteilung ---------- */

.rd-ve-body {
    display: flex;
    flex: 0 0 auto;
    height: clamp(320px, 50vh, 520px);
    min-height: 0;
    /* Ohne das rägt eine zu hohe Vorschau über die Timeline, statt zu schrumpfen. */
    overflow: hidden;
}

body.rd-ve-fullscreen .rd-ve-body {
    flex: 1;
    height: auto;
}

.rd-ve-rail {
    /* Bewusst kein Flex: vertikales Stapeln ist der Block-Default, und ein
       globales nav-Styling überschreibt display:flex hier ohnehin. */
    flex: 0 0 auto;
    padding: var(--rd-spacing-x-sm);
    background: var(--rd-list-default-light);
    border-right: var(--rd-borderwidth-border-default) solid var(--rd-gray-200);
}

.rd-ve-rail-item {
    display: block;
    width: 64px;
    margin-bottom: var(--rd-spacing-xx-sm);
    padding: var(--rd-spacing-x-sm) var(--rd-spacing-xx-sm);
    border: none;
    border-radius: var(--rd-borderradius-border-md);
    background: none;
    color: var(--rd-gray-500);
    font-size: var(--rd-fontsize-3);
    cursor: pointer;
}

.rd-ve-rail-item:hover:not(:disabled) {
    background: var(--rd-list-hover);
}

.rd-ve-rail-item.is-active {
    background: var(--rd-pink-50);
    color: var(--rd-primary-active);
}

.rd-ve-rail-item:disabled {
    opacity: var(--rd-opacity-inactive);
    cursor: not-allowed;
}

.rd-ve-rail-icon {
    display: block;
    margin: 0 auto var(--rd-spacing-xx-sm);
}

.rd-ve-panel {
    /* Darf schrumpfen: sonst wird der Editor breiter als das Fenster und der
       rechte Teil der Dateiliste verschwindet hinter dem Rand. */
    flex: 0 1 280px;
    min-width: 0;
    padding: var(--rd-spacing-md);
    overflow-y: auto;
    background: var(--rd-list-default-light);
}

.rd-ve-panel--left {
    border-right: var(--rd-borderwidth-border-default) solid var(--rd-gray-200);
}

.rd-ve-panel--right {
    border-left: var(--rd-borderwidth-border-default) solid var(--rd-gray-200);
}

.rd-ve-panel-title {
    margin: 0 0 var(--rd-spacing-x-sm);
    font-size: var(--rd-fontsize-2);
}

.rd-ve-panel-title+.rd-ve-panel-title {
    margin-top: var(--rd-spacing-md);
}

@media (max-width: 900px) {

    .rd-ve,
    body.rd-ve-fullscreen .rd-ve {
        overflow: auto;
    }

    .rd-ve-top,
    .rd-ve-top-left,
    .rd-ve-top-right,
    .rd-ve-timeline-bar,
    .rd-ve-bar-tools {
        flex-wrap: wrap;
        min-width: 0;
    }

    .rd-ve-title-input {
        max-width: 100%;
    }

    .rd-ve .rd-ve-body {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        height: auto;
        flex: none;
        overflow: visible;
    }

    .rd-ve .rd-ve-rail {
        display: flex;
        flex-wrap: wrap;
    }

    .rd-ve .rd-ve-stage {
        grid-row: 2;
    }

    .rd-ve .rd-ve-screen {
        width: 100%;
    }

    .rd-ve .rd-ve-panel {
        max-height: 360px;
    }

    .rd-ve .rd-ve-panel--right {
        grid-row: 3;
    }

    .rd-ve .rd-ve-timeline {
        flex: none;
        max-height: none;
    }
}

/* ---------- Medien ---------- */

.rd-ve-ai-panel {
    font-size: var(--rd-fontsize-3);
    overflow-wrap: anywhere;
}

.rd-ve-ai-panel h3 {
    font-size: var(--rd-fontsize-3);
    margin: var(--rd-spacing-md) 0 var(--rd-spacing-x-sm);
}

.rd-ve-ai-panel button:not(.rd-ve-tool-icon) {
    min-width: 0 !important;
    max-width: 100%;
    white-space: normal;
}

.rd-ve-ai-transcript {
    margin: var(--rd-spacing-md) 0;
}

.rd-ve-ai-progress {
    height: var(--rd-spacing-x-sm);
    margin: var(--rd-spacing-x-sm) 0 var(--rd-spacing-md);
    overflow: hidden;
    background: var(--rd-gray-200);
}

.rd-ve-ai-progress>span {
    display: block;
    height: 100%;
    background: var(--rd-primary-active);
}

.rd-ve-ai-progress.is-indeterminate>span {
    width: 40%;
    animation: rd-ve-ai-progress 1.4s ease-in-out infinite alternate;
}

@keyframes rd-ve-ai-progress {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(150%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .rd-ve-ai-progress.is-indeterminate>span {
        animation: none;
        margin-inline: auto;
    }
}

.rd-ve-ai-transcript summary {
    cursor: pointer;
}

.rd-ve-ai-summary {
    white-space: pre-wrap;
}

.rd-ve-ai-suggestions {
    margin: var(--rd-spacing-md) 0 0;
    padding: 0;
    list-style: none;
}

.rd-ve-ai-suggestion {
    padding: var(--rd-spacing-md) 0;
    border-top: var(--rd-borderwidth-border-default) solid var(--rd-gray-200);
}

.rd-ve-ai-suggestion>strong,
.rd-ve-ai-suggestion>span {
    display: block;
}

.rd-ve-ai-image {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    margin-bottom: var(--rd-spacing-x-sm);
}

.rd-ve-media-panel {
    display: flex;
    flex-direction: column;
    container-type: inline-size;
    height: 100%;
    min-height: 0;
}

.rd-ve-media-panel> :not(.rd-ve-files) {
    flex-shrink: 0;
}

.rd-ve-files-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--rd-spacing-x-sm);
    margin: var(--rd-spacing-x-sm) 0;
}

.rd-ve-files-header .rd-ve-panel-title {
    margin: 0;
}

.rd-ve-import {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--rd-spacing-x-sm);
}

.rd-ve-import-card {
    min-width: 0;
    overflow-wrap: anywhere;
    padding: var(--rd-spacing-xx-sm);
    border: var(--rd-borderwidth-border-default) dashed var(--rd-gray-300);
    border-radius: var(--rd-borderradius-border-md);
    background: var(--rd-list-default-dark);
    /* Buttons erben color nicht — ohne diese Zeile steht die Beschriftung weiß auf weiß. */
    color: var(--rd-font-dark);
    font-size: var(--rd-fontsize-2);
    text-align: center;
    cursor: pointer;
}

.rd-ve-import-card:hover:not(:disabled) {
    border-color: var(--rd-primary-active);
    background: var(--rd-pink-50);
}

.rd-ve-import-card:disabled {
    opacity: var(--rd-opacity-inactive);
    cursor: not-allowed;
}

.rd-ve-import-card strong {
    display: block;
    margin: 2px 0 0;
}

.rd-ve-import-presentation {
    grid-column: 1 / -1;
    overflow-wrap: anywhere;
}

.rd-ve-import-icon {
    display: block;
    margin: 0 auto;
}

/* Kompakte Import-Karten: kleineres Symbol ohne Zeilenversatz, damit „Meine
   Dateien“ mehr Platz bekommt. */
.rd-ve-import-icon::before {
    width: 18px;
    height: 18px;
    margin-right: 0;
}

/* Das Icon-System färbt über background des ::before, und einzelne Icons bringen
   eine eigene Farbe mit (rd-icon-camera ist weiß). In dieser Komponente folgt
   jedes Icon der Textfarbe — sonst steht es unsichtbar auf hellem Grund. */
.rd-ve [class*="rd-icon-"]::before {
    background: currentColor;
}

.rd-ve-files {
    display: grid;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    align-content: start;
    scrollbar-gutter: stable;
    /* Passt sich der Panelbreite an — bei wenig Platz eine Spalte statt Abschnitt. */
    grid-template-columns: repeat(auto-fill, minmax(min(96px, 100%), 1fr));
    gap: var(--rd-spacing-x-sm);
    margin: 0;
    padding: 0;
    list-style: none;
}

.rd-ve-file {
    min-width: 0;
    font-size: var(--rd-fontsize-2);
}

.rd-ve-files--list {
    grid-template-columns: minmax(0, 1fr);
}

.rd-ve-files--list .rd-ve-file {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: var(--rd-spacing-x-sm);
    align-items: center;
}

.rd-ve-files--list .rd-ve-file-thumb {
    grid-row: 1 / 3;
}

.rd-ve-files--list .rd-ve-file-name {
    padding-top: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.rd-ve-files--list .rd-ve-file-add,
.rd-ve-files--list .rd-ve-file-overlay-add {
    width: 20px;
    height: 20px;
    opacity: 1;
}

.rd-ve-files--list .rd-ve-file-overlay-add {
    right: calc(var(--rd-spacing-xx-sm) + 24px);
}

@container (max-width: 180px) {
    .rd-ve-files--list .rd-ve-file {
        grid-template-columns: minmax(0, 1fr);
    }

    .rd-ve-files--list .rd-ve-file-thumb {
        grid-row: auto;
        height: 56px;
        aspect-ratio: auto;
    }

    .rd-ve-files-header .rd-ve-panel-title,
    .rd-ve-file-meta {
        overflow-wrap: anywhere;
    }
}

.rd-ve-file-thumb {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    border-radius: var(--rd-borderradius-border-md);
    background: var(--rd-gray-100);
    overflow: hidden;
}

.rd-ve-file-image,
.rd-ve-file-wave {
    width: 100%;
    height: 100%;
}

/* contain statt cover: in der Medienliste soll das ganze Bild zu sehen sein,
   auch im Hochformat. Der graue Kachelgrund füllt den Rest. */
.rd-ve-file-image {
    object-fit: contain;
}

/* Die Balkenfarbe der Wellenform kommt aus color (siehe paintWaveforms). */
.rd-ve-file-wave {
    color: var(--rd-success-default);
}

.rd-ve-file-placeholder {
    color: var(--rd-gray-300);
    font-size: var(--rd-fontsize-3);
}

.rd-ve-file-badge {
    position: absolute;
    left: var(--rd-spacing-xx-sm);
    bottom: var(--rd-spacing-xx-sm);
    padding: 0 var(--rd-spacing-xx-sm);
    border-radius: var(--rd-borderradius-border-sm);
    background: rgba(0, 0, 0, 0.6);
    color: var(--rd-list-default-light);
    font-size: var(--rd-fontsize-2);
}

.rd-ve-file-add {
    position: absolute;
    top: var(--rd-spacing-xx-sm);
    right: var(--rd-spacing-xx-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--rd-primary-active);
    color: var(--rd-list-default-light);
    font-size: var(--rd-fontsize-3);
    line-height: 1;
    cursor: pointer;
    opacity: 0;
}

.rd-ve-file:hover .rd-ve-file-add,
.rd-ve-file-add:focus {
    opacity: 1;
}

/* Zweiter Weg für ein Bild: über das Video legen statt dahinter einfügen. */
.rd-ve-file-overlay-add {
    position: absolute;
    top: var(--rd-spacing-xx-sm);
    right: calc(var(--rd-spacing-xx-sm) + 28px);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--rd-secondary-pressed);
    color: var(--rd-list-default-light);
    cursor: pointer;
    opacity: 0;
}

.rd-ve-file:hover .rd-ve-file-overlay-add,
.rd-ve-file-overlay-add:focus {
    opacity: 1;
}

.rd-ve-file-overlay-add .rd-ve-btn-icon {
    width: 14px;
    height: 14px;
}

.rd-ve .rd-ve-file-overlay-add .rd-ve-btn-icon::before {
    width: 14px;
    height: 14px;
}

.rd-ve-file-name {
    display: block;
    padding-top: var(--rd-spacing-xx-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rd-ve-file-meta {
    display: block;
}

.rd-ve-file.is-missing .rd-ve-file-thumb {
    opacity: var(--rd-opacity-inactive);
}

.rd-ve-file.is-missing .rd-ve-file-name {
    color: var(--rd-gray-500);
}

.rd-ve-file-missing {
    color: var(--rd-error-pressed);
}

/* Wiederherstellung nach einem Reload — bewusst schlicht: ein Satz, ein Knopf. */
.rd-ve-recover {
    margin-bottom: var(--rd-spacing-md);
    padding: var(--rd-spacing-x-sm);
    border: var(--rd-borderwidth-border-default) solid var(--rd-warning-200);
    border-radius: var(--rd-borderradius-border-md);
    background: var(--rd-warning-50);
    font-size: var(--rd-fontsize-3);
}

.rd-ve-recover p {
    margin: var(--rd-spacing-xx-sm) 0 var(--rd-spacing-x-sm);
}

.rd-ve-empty,
.rd-ve-message {
    font-size: var(--rd-fontsize-3);
}

.rd-ve-message {
    margin-top: var(--rd-spacing-x-sm);
    color: var(--rd-error-pressed);
}

/* ---------- Bühne ---------- */

.rd-ve-stage {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    padding: var(--rd-spacing-md);
}

/* Native Vollbild: die ganze Bühne inklusive Steuerleiste füllt den Schirm,
   damit der Knopf zum Verlassen erreichbar bleibt. */
.rd-ve-stage:fullscreen {
    justify-content: center;
    background: var(--rd-font-dark);
}

.rd-ve-stage:fullscreen .rd-ve-transport {
    color: var(--rd-list-default-light);
}

.rd-ve-screen {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    /* Die Höhe kommt aus dem übrigen Platz, die Breite aus dem Seitenverhältnis.
       Eine feste Rechnung mit 100vh würde die Timeline überdecken, sobald sie
       mehr Spuren bekommt. */
    flex: 0 1 auto;
    width: fit-content;
    max-width: 100%;
    max-height: 100%;
    min-height: 120px;
    margin: 0 auto;
    /* Schwarz wie im Export, damit Balken bei Hochformat schon hier sichtbar sind. */
    background: var(--rd-font-dark);
    border-radius: var(--rd-borderradius-border-lg);
    overflow: hidden;
}

.rd-ve-video {
    width: 100%;
    height: 100%;
    /* Wie im Export: einpassen statt beschneiden, schwarze Balken bleiben sichtbar. */
    object-fit: contain;
}

.rd-ve-video--background {
    visibility: hidden;
}

.rd-ve-background-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: var(--rd-font-dark);
}

.rd-ve-background-controls {
    min-width: 0;
    text-align: left;
    margin-top: var(--rd-spacing-sm);
    overflow-wrap: anywhere;
}

.rd-ve-background-controls button {
    max-width: 100%;
    white-space: normal;
}

.rd-ve-screen-empty {
    padding: var(--rd-spacing-md);
    color: var(--rd-gray-300);
    text-align: center;
}

.rd-ve-transport {
    padding-top: var(--rd-spacing-x-sm);
    font-size: var(--rd-fontsize-3);
    color: var(--rd-gray-500);
}

/* Abspielleiste: ihre Breite IST die Zeitachse. */
.rd-ve-scrub {
    position: relative;
    height: 16px;
    cursor: pointer;
    touch-action: none;
}

.rd-ve-scrub::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 4px;
    transform: translateY(-50%);
    border-radius: var(--rd-borderradius-border-sm);
    background: var(--rd-gray-200);
}

.rd-ve-scrub-done {
    position: absolute;
    left: 0;
    top: 50%;
    height: 4px;
    transform: translateY(-50%);
    border-radius: var(--rd-borderradius-border-sm);
    background: var(--rd-primary-active);
}

.rd-ve-scrub-knob {
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: var(--rd-primary-active);
}

.rd-ve-transport-row {
    display: flex;
    align-items: center;
    gap: var(--rd-spacing-x-sm);
    padding-top: var(--rd-spacing-xx-sm);
}

.rd-ve-timecode {
    font-variant-numeric: tabular-nums;
}

.rd-ve-play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    padding: 0;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: var(--rd-primary-active);
    color: var(--rd-list-default-light);
    cursor: pointer;
}

.rd-ve-play:disabled {
    opacity: var(--rd-opacity-inactive);
    cursor: default;
}

.rd-ve-transport-right {
    display: flex;
    align-items: center;
    gap: var(--rd-spacing-xx-sm);
}

.rd-ve-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: none;
    /* Buttons erben color nicht — ohne diese Zeile sind die Symbole weiß. */
    color: var(--rd-font-dark);
    cursor: pointer;
}

.rd-ve-volume-slider {
    width: 70px;
}

/* ---------- Eigenschaften ---------- */

.rd-ve-panel-content {
    font-size: var(--rd-fontsize-3);
}

/* Ein zu kleines Logo sieht man erst im fertigen Video — deshalb hier warnen. */
.rd-ve-logo-warnung {
    margin-top: var(--rd-spacing-x-sm);
    color: var(--rd-error-pressed);
    font-size: var(--rd-fontsize-3);
}

/* Karierter Grund, damit man bei einem PNG sieht, was durchsichtig ist. */
.rd-ve-logo-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    padding: var(--rd-spacing-x-sm);
    border: var(--rd-borderwidth-border-default) solid var(--rd-gray-200);
    border-radius: var(--rd-borderradius-border-md);
    background-color: var(--rd-gray-100);
    background-image: linear-gradient(45deg, var(--rd-gray-200) 25%, transparent 25%),
        linear-gradient(-45deg, var(--rd-gray-200) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--rd-gray-200) 75%),
        linear-gradient(-45deg, transparent 75%, var(--rd-gray-200) 75%);
    background-size: 12px 12px;
    background-position: 0 0, 0 6px, 6px -6px, -6px 0;
}

.rd-ve-logo-preview img {
    max-width: 100%;
    max-height: 56px;
}

.rd-ve-logo-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rd-spacing-x-sm);
    padding-bottom: var(--rd-spacing-sm);
}

.rd-ve-prop-title {
    margin: 0 0 var(--rd-spacing-x-sm);
    font-size: var(--rd-fontsize-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rd-ve-props {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--rd-spacing-xx-sm) var(--rd-spacing-x-sm);
    margin: 0 0 var(--rd-spacing-md);
}

.rd-ve-props dt {
    color: var(--rd-gray-500);
}

.rd-ve-props dd {
    margin: 0;
}

.rd-ve-volume input {
    width: 100%;
}

.rd-ve-prop-hint {
    padding-top: var(--rd-spacing-x-sm);
}

/* Volle Panelbreite und mittig, statt schmal links neben dem Fließtext.
   Zwei Klassen, damit die geteilte Button-Grundklasse nicht überschreibt. */
.rd-ve .rd-ve-module-split {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: var(--rd-spacing-x-sm);
}

/* ---------- Timeline ---------- */

.rd-ve-timeline {
    /* Mit jeder Overlay-Ebene kommt eine Spur dazu. Ohne Deckel dr\u00e4ngt die
       Timeline die Vorschau aus dem Bild; mit Deckel scrollt sie in sich. */
    flex: 0 1 auto;
    max-height: 55%;
    overflow-y: auto;
    padding: var(--rd-spacing-x-sm) var(--rd-spacing-md) var(--rd-spacing-md);
    background: var(--rd-list-default-light);
    border-top: var(--rd-borderwidth-border-default) solid var(--rd-gray-200);
}

.rd-ve-timeline-bar {
    display: flex;
    align-items: center;
    gap: var(--rd-spacing-md);
    margin-bottom: var(--rd-spacing-x-sm);
    padding: var(--rd-spacing-x-sm) var(--rd-spacing-sm);
    border-radius: var(--rd-borderradius-border-lg);
    background: var(--rd-gray-100);
}

.rd-ve-bar-tools {
    display: flex;
    align-items: center;
    gap: var(--rd-spacing-xx-sm);
}

/* Ruhige Knöpfe statt blauer Textlinks: in einer Werkzeugleiste sollen die
   Beschriftungen lesbar sein, nicht um Aufmerksamkeit konkurrieren. */
.rd-ve-bar-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--rd-spacing-xx-sm);
    padding: var(--rd-spacing-xx-sm) var(--rd-spacing-x-sm);
    border: none;
    border-radius: var(--rd-borderradius-border-md);
    background: none;
    color: var(--rd-font-dark);
    font-size: var(--rd-fontsize-3);
    cursor: pointer;
}

.rd-ve-bar-btn:hover:not(:disabled) {
    background: var(--rd-gray-100);
}

.rd-ve-bar-btn:disabled {
    opacity: var(--rd-opacity-inactive);
    cursor: default;
}

/* --rd-primary-active trägt auf dem grauen Grund nur 3,2:1 — zu wenig für
   Text. Der dunklere Hover-Ton derselben Farbe schafft 4,8:1. */
.rd-ve-bar-btn--add {
    color: var(--rd-primary-hover);
}

.rd-ve-total {
    margin-left: auto;
    text-align: right;
    line-height: 1.2;
}

.rd-ve-total-label {
    display: block;
    /* gray-500 erreicht auf dem grauen Grund nur 4,4:1. */
    color: var(--rd-gray-700);
    font-size: var(--rd-fontsize-2);
    text-transform: uppercase;
}

.rd-ve-total-time {
    display: block;
    font-size: var(--rd-fontsize-6);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ---------- Zeitachse ---------- */

.rd-ve-zoom {
    display: flex;
    align-items: center;
    gap: var(--rd-spacing-x-sm);
    padding: var(--rd-spacing-xx-sm) var(--rd-spacing-x-sm);
    border-radius: 999px;
    background: var(--rd-list-default-light);
}

/* Regler in der Hausfarbe: unformatiert malt der Browser sie knallblau. */
.rd-ve input[type="range"] {
    accent-color: var(--rd-primary-active);
}

.rd-ve-zoom-slider {
    width: 120px;
}

.rd-ve-zoom-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: var(--rd-borderradius-border-md);
    background: none;
    color: var(--rd-font-dark);
    cursor: pointer;
}

.rd-ve-zoom-btn:hover {
    background: var(--rd-gray-100);
}

.rd-ve-fit-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--rd-spacing-xx-sm);
    padding: var(--rd-spacing-xx-sm) var(--rd-spacing-x-sm);
    border: none;
    border-radius: var(--rd-borderradius-border-md);
    background: none;
    color: var(--rd-primary-hover);
    font-size: var(--rd-fontsize-3);
    cursor: pointer;
}

.rd-ve-fit-btn:hover {
    background: var(--rd-primary-inactive);
}

.rd-ve-tl {
    display: flex;
    align-items: stretch;
}

.rd-ve-tl-labels {
    flex: 0 0 72px;
}

/* Hält die Beschriftungen auf Höhe ihrer Spur, weil das Lineal darüber liegt. */
.rd-ve-tl-label-spacer {
    display: block;
    height: 24px;
}

.rd-ve-tl-labels .rd-ve-track-label {
    display: flex;
    align-items: center;
    height: 48px;
    margin-bottom: var(--rd-spacing-xx-sm);
}

.rd-ve-tl-labels .rd-ve-lane-delete {
    flex: 0 0 24px;
    width: 24px;
    height: 32px;
    padding: 0;
}

.rd-ve-tl-scroll {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
}

/* Die Breite kommt aus der Zeitachse; Lineal, Clips und Abspielkopf teilen sie. */
.rd-ve-tl-inner {
    position: relative;
}

.rd-ve-ruler {
    position: relative;
    height: 24px;
    border-bottom: var(--rd-borderwidth-border-default) solid var(--rd-gray-200);
    cursor: pointer;
}

.rd-ve-ruler-tick {
    position: absolute;
    top: 0;
    padding-left: var(--rd-spacing-xx-sm);
    border-left: var(--rd-borderwidth-border-default) solid var(--rd-gray-300);
    font-size: var(--rd-fontsize-2);
    color: var(--rd-gray-500);
    white-space: nowrap;
}

.rd-ve-playhead {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--rd-primary-active);
    cursor: ew-resize;
    touch-action: none;
}

/* Ziehbare Datei und die Spur, die sie annimmt. */
.rd-ve-file[draggable="true"] {
    cursor: grab;
}

/* Blöcke lassen sich auf der Zeitachse verschieben. */
.rd-ve-overlay-block,
.rd-ve-music-block {
    cursor: grab;
    touch-action: none;
}

.rd-ve-overlay-block.is-moving,
.rd-ve-music-block.is-moving {
    cursor: grabbing;
    opacity: 0.75;
    box-shadow: var(--rd-shadow-level-2);
}

/* Das Bild selbst im Block — sonst sieht man nur eine blaue Fläche. */
.rd-ve-overlay-strip {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-position: center;
    background-size: cover;
    opacity: 0.55;
}

.rd-ve-block-label {
    position: relative;
    z-index: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Kanten zum Längerziehen, gleiche Breite wie an den Clips. */
.rd-ve-block-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: 8px;
    background: var(--rd-primary-inactive);
    cursor: ew-resize;
    touch-action: none;
    opacity: 0;
}

.rd-ve-overlay-block:hover .rd-ve-block-handle,
.rd-ve-music-block:hover .rd-ve-block-handle,
.rd-ve-overlay-block.is-selected .rd-ve-block-handle,
.rd-ve-music-block.is-selected .rd-ve-block-handle {
    opacity: 1;
}

.rd-ve-block-handle:hover {
    background: var(--rd-primary-active);
}

.rd-ve-block-handle--start {
    left: 0;
    border-radius: inherit 0 0 inherit;
}

.rd-ve-block-handle--end {
    right: 0;
}

.rd-ve-track-row.is-drop-target,
.rd-ve-clips.is-drop-target {
    border-color: var(--rd-primary-active);
    background: var(--rd-pink-50);
}

/* Ein 2px-Strich ist mit der Maus kaum zu treffen — der Griff verbreitert die
   Trefferfläche, ohne den Strich optisch dicker zu machen. */
.rd-ve-playhead::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -6px;
    right: -6px;
}

.rd-ve-playhead-grip {
    position: absolute;
    top: -4px;
    left: 50%;
    width: 14px;
    height: 14px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: var(--rd-primary-active);
}

.rd-ve-playhead.is-scrubbing .rd-ve-playhead-grip {
    transform: translateX(-50%) scale(1.2);
}

.rd-ve-track-row {
    height: 48px;
    margin-bottom: var(--rd-spacing-xx-sm);
    padding: var(--rd-spacing-x-sm);
    border: var(--rd-borderwidth-border-default) dashed var(--rd-gray-300);
    border-radius: var(--rd-borderradius-border-md);
    font-size: var(--rd-fontsize-2);
    color: var(--rd-gray-500);
    overflow: hidden;
}

.rd-ve-track-row.is-unavailable {
    opacity: var(--rd-opacity-inactive);
}

/* ---------- Overlays ---------- */

.rd-ve-overlay-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.rd-ve-stage-box {
    position: absolute;
    border: var(--rd-borderwidth-border-focus) solid var(--rd-primary-active);
    border-color: transparent;
    box-sizing: border-box;
    border-radius: var(--rd-borderradius-border-sm);
    cursor: grab;
    touch-action: none;
}

.rd-ve-stage-box:hover,
.rd-ve-stage-box:focus-visible,
.rd-ve-stage-box.is-selected {
    border-color: var(--rd-primary-active);
}

.rd-ve-stage-box.is-moving {
    cursor: grabbing;
}

.rd-ve-stage-grip {
    position: absolute;
    right: -7px;
    bottom: -7px;
    width: 14px;
    height: 14px;
    border: var(--rd-borderwidth-border-default) solid var(--rd-list-default-light);
    border-radius: 50%;
    background: var(--rd-primary-active);
    cursor: nwse-resize;
    touch-action: none;
}

.rd-ve-overlay-row {
    position: relative;
    border-style: solid;
    border-color: var(--rd-gray-200);
}

.rd-ve-overlay-block {
    position: absolute;
    top: var(--rd-spacing-xx-sm);
    bottom: var(--rd-spacing-xx-sm);
    padding: 0 var(--rd-spacing-x-sm);
    border: var(--rd-borderwidth-border-focus) solid transparent;
    border-radius: var(--rd-borderradius-border-sm);
    background: var(--rd-secondary-inactive);
    color: var(--rd-list-default-light);
    font-size: var(--rd-fontsize-2);
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
}

.rd-ve-overlay-block.is-selected {
    border-color: var(--rd-secondary-active);
    background: var(--rd-secondary-active);
}

/* Bildstreifen im Clip: ein Frame, gekachelt — wie in Schnittprogrammen üblich. */
.rd-ve-clip-strip {
    position: absolute;
    inset: 0;
    background-repeat: repeat-x;
    background-size: auto 100%;
    opacity: 0.45;
    pointer-events: none;
}

.rd-ve-clip.is-selected .rd-ve-clip-strip {
    opacity: 0.6;
}

.rd-ve-clip-add {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding-left: var(--rd-spacing-x-sm);
}

.rd-ve-clip-add button {
    padding: var(--rd-spacing-xx-sm) var(--rd-spacing-x-sm);
    border: var(--rd-borderwidth-border-default) dashed var(--rd-gray-300);
    border-radius: var(--rd-borderradius-border-md);
    background: none;
    color: var(--rd-gray-500);
    font-size: var(--rd-fontsize-2);
    white-space: nowrap;
    cursor: pointer;
}

.rd-ve-clip-add button:hover {
    border-color: var(--rd-primary-active);
    color: var(--rd-primary-active);
}

.rd-ve-track-icon {
    padding-right: var(--rd-spacing-xx-sm);
}

/* ---------- Tonspuren ---------- */

.rd-ve-audio-row,
.rd-ve-music-row {
    position: relative;
    border-style: solid;
    border-color: var(--rd-gray-200);
}

.rd-ve-audio-block,
.rd-ve-music-block {
    position: absolute;
    top: var(--rd-spacing-xx-sm);
    bottom: var(--rd-spacing-xx-sm);
    padding: 0;
    border: var(--rd-borderwidth-border-focus) solid transparent;
    border-radius: var(--rd-borderradius-border-sm);
    overflow: hidden;
    cursor: pointer;
}

.rd-ve-audio-block {
    background: var(--rd-green-200);
    color: var(--rd-success-hover);
}

.rd-ve-music-block {
    background: var(--rd-green-50);
    color: var(--rd-success-default);
}

.rd-ve-audio-block.is-selected,
.rd-ve-music-block.is-selected {
    border-color: currentColor;
}

/* Stummer Originalton: die Spur bleibt sichtbar, tritt aber zurück. */
.rd-ve-audio-block.is-muted {
    background: var(--rd-gray-100);
    color: var(--rd-gray-300);
}

.rd-ve-wave {
    display: block;
    width: 100%;
    height: 100%;
}

.rd-ve-audio-name {
    position: absolute;
    left: var(--rd-spacing-xx-sm);
    top: 50%;
    transform: translateY(-50%);
    max-width: calc(100% - var(--rd-spacing-x-sm));
    /* Chip hinter der Schrift: sonst verschwindet der Name in der Wellenform. */
    padding: 1px var(--rd-spacing-xx-sm);
    border-radius: var(--rd-borderradius-border-sm);
    background: var(--rd-list-default-light);
    color: var(--rd-font-dark);
    font-size: var(--rd-fontsize-2);
    font-weight: var(--rd-fontweights-open-sans-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

/* ---------- Symbole ---------- */

/* Einheitliche Größe für alle Icons in Knöpfen dieser Komponente. */
.rd-ve-btn-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    vertical-align: middle;
}

/* Das Icon-System färbt über background, nicht über color — ohne diese Zeile
   steht das Icon je nach Kontext weiß auf weiß. display: block nimmt dem
   Pseudoelement die Grundlinien-Abstände, sonst säße das Symbol leicht zu hoch. */
.rd-ve .rd-ve-btn-icon::before,
.rd-ve .rd-ve-play-icon::before {
    display: block;
    width: 18px;
    height: 18px;
    background: currentColor;
}

.rd-ve-tool-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--rd-spacing-xx-sm);
}

/* Quadratische Symbolknöpfe der Kopfzeile: drei Textlinks nebeneinander
   lenkten mehr ab als der eine Knopf, um den es dort geht. */
.rd-ve-tool-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: var(--rd-borderradius-border-md);
    background: none;
    /* Buttons erben color nicht — ohne diese Zeile sind die Symbole weiß. */
    color: var(--rd-font-dark);
    cursor: pointer;
}

.rd-ve-tool-icon:hover:not(:disabled) {
    background: var(--rd-gray-100);
}

.rd-ve-tool-icon:disabled {
    opacity: var(--rd-opacity-inactive);
    cursor: default;
}

.rd-ve-tool-icon[aria-pressed="true"] {
    background: var(--rd-pink-50);
    color: var(--rd-primary-active);
}

/* Gruppen trennen Rückgängig/Wiederholen von Speichern und Ansicht. */
.rd-ve-top-group {
    display: inline-flex;
    align-items: center;
    gap: var(--rd-spacing-xx-sm);
    padding-right: var(--rd-spacing-x-sm);
    border-right: var(--rd-borderwidth-border-default) solid var(--rd-gray-200);
}

.rd-ve-save-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--rd-spacing-xx-sm);
}

.rd-ve-play-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
}

/* Pause und Lautsprecher fehlen im Icon-Satz — hier aus Formen gebaut,
   statt eine externe Grafik einzuführen. */
.rd-ve-pause-icon {
    display: inline-block;
    width: 12px;
    height: 14px;
    border-left: 4px solid currentColor;
    border-right: 4px solid currentColor;
}

.rd-ve-speaker {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: currentColor;
    mask-image: url("/src/img/2024/svg/icons/volume-up.svg");
    -webkit-mask-image: url("/src/img/2024/svg/icons/volume-up.svg");
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
}

.rd-ve-speaker.is-muted {
    mask-image: url("/src/img/2024/svg/icons/volume-off.svg");
    -webkit-mask-image: url("/src/img/2024/svg/icons/volume-off.svg");
}

/* Schere: der gemeinsame Icon-Satz hat keine, deshalb liegt die Datei bei
   dieser Komponente. Gefärbt wird wie dort über die Maske. */
.rd-ve-split-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    background: currentColor;
    mask-image: url("/src/img/2024/svg/icons/rd-icon-scissors.svg");
    -webkit-mask-image: url("/src/img/2024/svg/icons/rd-icon-scissors.svg");
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
}

/* ---------- Lernmodule ---------- */

/* Modulgrenze: senkrecht durch alle Spuren, klar vom Abspielkopf unterscheidbar. */
.rd-ve-module-mark {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: var(--rd-borderwidth-border-focus) dashed var(--rd-secondary-active);
    pointer-events: none;
}

.rd-ve-modules {
    margin: var(--rd-spacing-x-sm) 0 0;
    padding: 0;
    list-style: none;
}

.rd-ve-module {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--rd-spacing-xx-sm);
    align-items: center;
    padding: var(--rd-spacing-x-sm) 0;
    border-bottom: var(--rd-borderwidth-border-default) solid var(--rd-gray-100);
    font-size: var(--rd-fontsize-2);
}

.rd-ve-module-nr {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--rd-secondary-inactive);
    color: var(--rd-secondary-pressed);
}

.rd-ve-module .rd-ve-field,
.rd-ve-module .rd-gray-text,
.rd-ve-module button,
.rd-ve-module-hint {
    grid-column: 2;
    margin: 0;
}

.rd-ve-modules-result {
    margin: 0;
    padding: 0;
    list-style: none;
}

.rd-ve-module-result {
    display: grid;
    grid-template-columns: 160px 1fr auto;
    gap: var(--rd-spacing-x-sm);
    align-items: center;
    padding: var(--rd-spacing-x-sm) 0;
    border-bottom: var(--rd-borderwidth-border-default) solid var(--rd-gray-100);
    text-align: left;
}

.rd-ve-module-video {
    width: 100%;
    border-radius: var(--rd-borderradius-border-md);
    background: var(--rd-font-dark);
}

.rd-ve-module-actions {
    display: flex;
    align-items: center;
    gap: var(--rd-spacing-x-sm);
}

.rd-ve-module-done {
    color: var(--rd-success-default);
}

.rd-ve-templates {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: var(--rd-spacing-x-sm);
    margin: 0 0 var(--rd-spacing-x-sm);
    padding: 0;
    list-style: none;
}

.rd-ve-template {
    display: block;
    width: 100%;
    padding: var(--rd-spacing-xx-sm);
    border: var(--rd-borderwidth-border-focus) solid var(--rd-gray-200);
    border-radius: var(--rd-borderradius-border-md);
    background: var(--rd-list-default-light);
    font-size: var(--rd-fontsize-3);
    text-align: left;
    cursor: grab;
}

.rd-ve-template:active {
    cursor: grabbing;
}

.rd-ve-template:hover {
    border-color: var(--rd-primary-active);
}

.rd-ve-template.is-selected {
    border-color: var(--rd-primary-active);
}

/* Die Miniatur wird mit demselben Painter gezeichnet wie der Export. */
.rd-ve-template-preview {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 6;
    background: var(--rd-gray-100);
    border-radius: var(--rd-borderradius-border-sm);
}

.rd-ve-template-label {
    display: block;
    padding-top: var(--rd-spacing-xx-sm);
    color: var(--rd-gray-500);
    font-size: var(--rd-fontsize-2);
}

.rd-ve-overlay-edit {
    margin-bottom: var(--rd-spacing-md);
    padding-bottom: var(--rd-spacing-x-sm);
    border-bottom: var(--rd-borderwidth-border-default) solid var(--rd-gray-200);
}

.rd-ve-field {
    display: block;
    margin-bottom: var(--rd-spacing-x-sm);
}

.rd-ve-field input {
    width: 100%;
}

.rd-ve-field select {
    width: 100%;
}

.rd-ve-field textarea {
    box-sizing: border-box;
    width: 100%;
    padding: var(--rd-spacing-x-sm);
    font: inherit;
    resize: vertical;
}

.rd-ve-check {
    display: flex;
    align-items: center;
    gap: var(--rd-spacing-xx-sm);
    padding-bottom: var(--rd-spacing-x-sm);
}

.rd-ve-track {
    display: flex;
    align-items: stretch;
    gap: var(--rd-spacing-x-sm);
    margin-bottom: var(--rd-spacing-xx-sm);
}

.rd-ve-track.is-unavailable {
    opacity: var(--rd-opacity-inactive);
}

.rd-ve-track-label {
    flex: 0 0 148px;
    align-self: center;
    font-size: var(--rd-fontsize-3);
    color: var(--rd-gray-500);
}

.rd-ve-track-placeholder {
    flex: 1;
    padding: var(--rd-spacing-x-sm);
    border: var(--rd-borderwidth-border-default) dashed var(--rd-gray-300);
    border-radius: var(--rd-borderradius-border-md);
    font-size: var(--rd-fontsize-2);
    color: var(--rd-gray-500);
}

.rd-ve-clips {
    display: flex;
    /* Kein gap: jeder Abstand zwischen Clips würde die Spur gegenüber Lineal,
       Abspielkopf und Tonspur verschieben — und zwar mehr mit jedem Clip. */
    height: 48px;
    margin: 0 0 var(--rd-spacing-xx-sm);
    padding: 0;
    list-style: none;
}

.rd-ve-clip {
    /* Die Breite kommt aus der Zeitachse — deshalb hier kein flex-grow. */
    position: relative;
    flex: 0 0 auto;
    padding: var(--rd-spacing-x-sm) var(--rd-spacing-md);
    border: var(--rd-borderwidth-border-focus) solid transparent;
    border-radius: var(--rd-borderradius-border-md);
    background: var(--rd-pink-50);
    /* Der Untergrund scheint durch den Rahmen: sieht aus wie eine Lücke,
       kostet aber keine Breite (border-box). */
    background-clip: padding-box;
    font-size: var(--rd-fontsize-2);
    cursor: grab;
    touch-action: none;
    user-select: none;
    overflow: hidden;
}

.rd-ve-clip-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 10px;
    background: var(--rd-primary-inactive);
    cursor: ew-resize;
    touch-action: none;
}

.rd-ve-clip-handle:hover,
.rd-ve-clip.is-selected .rd-ve-clip-handle {
    background: var(--rd-primary-active);
}

.rd-ve-clip-handle--start {
    left: 0;
}

.rd-ve-clip-handle--end {
    right: 0;
}

.rd-ve-clip.is-selected {
    border-color: var(--rd-primary-active);
    background: var(--rd-pink-100);
}

/* Der gezogene Clip bleibt sichtbar, tritt aber zurück — die Einfügemarke führt. */
.rd-ve-clip.is-dragging {
    opacity: var(--rd-opacity-inactive);
    cursor: grabbing;
}

/* Zeigt, wo der Clip landet. Ohne sie ist das Umsortieren blindes Raten. */
.rd-ve-drop-marker {
    flex: 0 0 auto;
    align-self: stretch;
    width: 3px;
    /* Negative Ränder heben die Breite exakt auf, sonst rutscht die Spur
       während des Ziehens gegen die Zeitachse. */
    margin: 0 -1.5px;
    border-radius: var(--rd-borderradius-border-sm);
    background: var(--rd-primary-active);
}

/* Standbilder heben sich ab, weil für sie andere Regeln gelten (kein Ton). */
.rd-ve-clip.is-image {
    background: var(--rd-gray-100);
}

/* Die Überblendzone liegt über dem Vorgängerclip — deshalb kein eigener Platzbedarf. */
.rd-ve-clip-transition {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(to right, transparent, var(--rd-primary-inactive));
    pointer-events: none;
}

.rd-ve-clip.is-image.is-selected {
    background: var(--rd-gray-200);
}

.rd-ve-clip-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rd-ve-clip-time {
    color: var(--rd-gray-500);
}

.rd-ve-clip-add {
    display: flex;
    align-items: center;
}

/* ---------- Fertigstellen ---------- */

.rd-ve-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rd-base-fg-bg-overlay);
}

.rd-ve-dialog {
    width: min(480px, 92vw);
    padding: var(--rd-spacing-big);
    border-radius: var(--rd-borderradius-border-lg);
    background: var(--rd-list-default-light);
    box-shadow: var(--rd-shadow-level-2);
    text-align: center;
}

.rd-ve-dialog--wide {
    width: min(880px, 94vw);
}

/* Der globale Balken setzt position:absolute ohne left — im zentrierten Dialog
   startet die Füllung sonst in der Mitte statt am linken Rand. */
.rd-ve-dialog .rd-progressbar span {
    left: 0;
}

/* Der Export-Dialog ist ein Formular — linksbündig, sonst rutschen die Felder auseinander. */
.rd-ve-dialog--export {
    text-align: left;
}

.rd-ve-dialog--shortcuts {
    text-align: left;
}

.rd-ve-dialog--projects {
    text-align: left;
}

.rd-ve-project-list {
    margin: 0 0 var(--rd-spacing-sm);
    padding: 0;
    /* Bei vielen Projekten wächst der Dialog sonst aus dem Bild. */
    max-height: 45vh;
    overflow-y: auto;
    list-style: none;
}

.rd-ve-project {
    display: flex;
    align-items: center;
    gap: var(--rd-spacing-xx-sm);
    border-bottom: var(--rd-borderwidth-border-default) solid var(--rd-gray-200);
}

.rd-ve-project.is-current {
    background: var(--rd-pink-50);
}

.rd-ve-project-open {
    flex: 1;
    min-width: 0;
    padding: var(--rd-spacing-x-sm);
    border: none;
    background: none;
    color: var(--rd-font-dark);
    font-size: var(--rd-fontsize-3);
    text-align: left;
    cursor: pointer;
}

.rd-ve-project-open:hover {
    background: var(--rd-gray-100);
}

.rd-ve-project-title {
    display: block;
    font-weight: 600;
}

.rd-ve-project-meta {
    display: block;
    font-size: var(--rd-fontsize-2);
}

.rd-ve-project-delete {
    flex: 0 0 auto;
    color: var(--rd-error-pressed);
}

/* Ohne diese Regel ist die Tastaturbedienung unsichtbar: Clips, Spur-Elemente und
   die eigenen Icon-Knöpfe haben keinen Rahmen, an dem der Browser-Fokus sichtbar wäre. */
.rd-ve :focus-visible {
    outline: var(--rd-borderwidth-border-focus) solid var(--rd-primary-active);
    outline-offset: 2px;
}

.rd-ve-shortcut-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--rd-spacing-xx-sm) var(--rd-spacing-md);
    margin: 0 0 var(--rd-spacing-md);
    align-items: center;
}

.rd-ve-shortcut-list dt,
.rd-ve-shortcut-list dd {
    margin: 0;
}

.rd-ve-shortcut-list kbd {
    display: inline-block;
    padding: 2px var(--rd-spacing-xx-sm);
    border: var(--rd-borderwidth-border-default) solid var(--rd-gray-300);
    border-radius: var(--rd-borderradius-border-sm);
    background: var(--rd-gray-100);
    /* kbd erbt hier weiß und wäre sonst unsichtbar auf dem grauen Feld. */
    color: var(--rd-font-dark);
    font-family: inherit;
    font-size: var(--rd-fontsize-2);
    white-space: nowrap;
}

.rd-ve-dialog--export .rd-ve-field,
.rd-ve-dialog--export .rd-ve-check {
    padding-bottom: var(--rd-spacing-sm);
}

.rd-ve-dialog--export h2,
.rd-ve-dialog--export .rd-ve-dialog-actions {
    text-align: center;
    justify-content: flex-end;
}

.rd-ve-export-note,
.rd-ve-export-size {
    margin: 0 0 var(--rd-spacing-sm);
    padding: var(--rd-spacing-x-sm);
    border-radius: var(--rd-borderradius-border-sm);
    background: var(--rd-gray-100);
    font-size: var(--rd-fontsize-2);
    color: var(--rd-gray-500);
}

.rd-ve-dialog h2 {
    margin-top: 0;
}

.rd-ve-review-video {
    width: 100%;
    border-radius: var(--rd-borderradius-border-md);
    background: var(--rd-font-dark);
}

.rd-ve-record-video {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--rd-borderradius-border-md);
    background: var(--rd-font-dark);
    /* Wie ein Spiegel: sonst greift man beim Zurechtrücken in die falsche Richtung. */
    transform: scaleX(-1);
}

.rd-ve-dialog--recording {
    box-sizing: border-box;
    max-height: 94vh;
    overflow-y: auto;
}

.rd-ve-record-video--presentation {
    transform: none;
}

.rd-ve-dialog--recording .rd-ve-record-video {
    max-height: 45vh;
    object-fit: contain;
}

.rd-ve-record-devices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--rd-spacing-md);
    text-align: left;
}

.rd-ve-record-devices .rd-ve-field {
    min-width: 0;
}

.rd-ve-record-devices [inert] {
    opacity: var(--rd-opacity-inactive);
}

.rd-ve-microphone-test {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--rd-spacing-x-sm);
    margin-top: var(--rd-spacing-x-sm);
    font-size: var(--rd-fontsize-3);
    text-align: left;
}

.rd-ve-microphone-meter {
    width: 100%;
    height: var(--rd-spacing-md);
}

.rd-ve-microphone-status {
    min-width: 150px;
}

.rd-ve-record-error {
    color: var(--rd-error-pressed);
}

@media (max-width: 600px) {
    .rd-ve-record-devices {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .rd-ve-microphone-test {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .rd-ve-microphone-status {
        grid-column: 1 / -1;
    }

    .rd-ve-dialog--recording .rd-ve-dialog-actions {
        flex-wrap: wrap;
    }
}

.rd-ve-record-clock {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--rd-spacing-xx-sm);
    padding-top: var(--rd-spacing-x-sm);
    font-variant-numeric: tabular-nums;
}

.rd-ve-record-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--rd-error-default);
}

.rd-ve-dialog-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--rd-spacing-x-sm);
    padding-top: var(--rd-spacing-md);
}

.rd-ve-upload-hint {
    padding-top: var(--rd-spacing-x-sm);
    font-size: var(--rd-fontsize-3);
}

.rd-ve-unsupported {
    max-width: 480px;
    margin: var(--rd-spacing-xx-big) auto;
    text-align: center;
}