/* Resizer Styles für verschiebbaren Teiler */

.resizable-container {
    display: flex;
    width: 100%;
    position: relative;
    min-height: 600px;
}

.left-panel {
    width: 33%;
    min-width: 250px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 5px;
    flex-shrink: 0;
}

.resizer {
    width: 4px;
    background: #cbd5e0;
    cursor: col-resize;
    position: relative;
    flex-shrink: 0;
    transition: all 0.2s ease;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}

.resizer:hover {
    background: #a0aec0;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.25);
}

/* Roter Strich - IMMER sichtbar, breiter als Resizer */
.resizer::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 44px;
    background: #dc2626;
    border-radius: 3px;
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.3);
}

.resizer:active {
    background: #718096;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.3);
}

.right-panel {
    flex: 1;
    min-width: 300px;
    overflow-y: auto;
    padding-left: 5px;
}

/* Prevent text selection während Resize */
body.resizing {
    cursor: col-resize !important;
    user-select: none;
}

body.resizing * {
    cursor: col-resize !important;
}