/* Präsenzkurs-Varianten planner (pc-veranstaltung-planner) — Figma "Veranstaltung" step */

pc-veranstaltung-planner {
    display: block;
    /* .rd-instruction centers text; the planner content is left-aligned like Figma */
    text-align: left;
}

.rd-vp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--rd-spacing-md);
    align-items: start;
}

.rd-vp-list-card,
.rd-vp-detail-card {
    /* Figma Card: 1px #eaecf0 border, radius 4px, bg white */
    border: 1px solid #eaecf0;
    border-radius: 4px;
    background: #fff;
}

.rd-vp-list-card {
    padding: 16px 24px 24px;
}

.rd-vp-detail-card {
    padding: 16px 32px 32px;
}

/* card header: dark left-aligned title + sub + divider (Figma values) */
.rd-vp-card-head {
    padding-top: 16px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid #eaecf0;
}

.rd-vp-card-title {
    font-weight: 700;
    font-size: 16px;
    line-height: 1.12;
    letter-spacing: 0.32px;
    color: var(--rd-font-dark, #0d1130);
}

.rd-vp-card-sub {
    /* Figma: Open Sans Regular 14px, colour #0d1130 (not grey), 8px below title */
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.12;
    letter-spacing: 0.28px;
    color: var(--rd-font-dark, #0d1130);
}

/* variant list items — no border in Figma, only a green fill when active */
.rd-vp-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--rd-borderradius-border-md);
    margin-bottom: 6px;
    cursor: pointer;
    transition: background 0.15s;
}

.rd-vp-item:hover {
    background: var(--cl-pale-grey);
}

.rd-vp-item--active,
.rd-vp-item--active:hover {
    /* Figma: Green 100 highlight */
    background: var(--rd-green-100, #e7f0d9);
}

.rd-vp-item-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.rd-vp-item-title {
    font-weight: 700;
    color: var(--rd-font-dark, #0d1130);
}

.rd-vp-item-sub {
    font-size: 13px;
    color: var(--cl-blue-grey);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* add buttons (textlink style handles icon + colour) */
.rd-vp-add {
    display: inline-flex;
    align-items: center;
    margin-top: 6px;
    background: none;
    border: none;
    cursor: pointer;
}

/* icon buttons (trash) */
.rd-vp-icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--cl-blue-grey);
    padding: 4px;
    line-height: 1;
}

.rd-vp-icon-btn:hover {
    color: var(--rd-primary-active);
}

/* section headers (Ort, Termine) — Figma: Open Sans Bold 14px #0d1130 */
.rd-vp-section-head,
.rd-vp-termine-head {
    font-weight: 700;
    font-size: 14px;
    line-height: 1.12;
    letter-spacing: 0.28px;
    color: var(--rd-font-dark, #0d1130);
    margin: 16px 0 0;
    padding-bottom: 16px;
    border-bottom: 1px solid #eaecf0;
}

/* form-row labels — Figma: Open Sans Bold 11px #0d1130, right-aligned */
.rd-vp-detail-card .rd-input-row .rd-label-content label {
    font-size: 11px;
    font-weight: 700;
    color: var(--rd-font-dark, #0d1130);
}

.rd-vp-termine {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
}

.rd-vp-termine th {
    text-align: left;
    font-size: 12px;
    text-transform: uppercase;
    color: var(--cl-blue-grey);
    padding: 6px 8px;
    font-weight: 600;
}

.rd-vp-termine td {
    padding: 4px 8px;
    vertical-align: middle;
}

.rd-vp-termine input[type="time"] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

/* Fortbildungsdauer */
.rd-vp-single .rd-vp-duration-label {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 185px;
    text-align: right;
}

.rd-vp-dauer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding-top: 16px;
    border-top: var(--rd-borderwidth-border-default) solid var(--cl-light-grey);
}

.rd-vp-dauer-label {
    display: flex;
    flex-direction: column;
    font-weight: 700;
    color: var(--rd-font-dark, #0d1130);
}

.rd-vp-dauer-label .rd-gray-text {
    font-weight: 400;
}

@media (max-width: 900px) {
    .rd-vp-grid {
        grid-template-columns: 1fr;
    }
}