/* =====================================================================
   TsRegalPlaner – Regal-Konfigurator Styles
   Stand: 2026-03 – Initiale Version
   Scoped unter #regal-konfigurator
   ===================================================================== */

/* --- Variables (Corporate Design kuehlzelle24) --- */
/* 2026-06 Copilot – Neue Variablen fuer Corporate-Design-Alignment (CQ.3) */
#regal-konfigurator {
    --rk-primary: #3db8f2;
    --rk-primary-hover: #2399d1;
    --rk-primary-dark: #1a4966;
    --rk-primary-rgb: 61, 184, 242;
    --rk-primary-dark-rgb: 26, 73, 102;
    --rk-accent: #ff6a00;
    --rk-bg: #f5f8fa;
    --rk-bg-light: #f7f9fb;
    --rk-bg-hover: #f0f4f8;
    --rk-bg-disabled: #f5f5f5;
    --rk-text: #333333;
    --rk-text-secondary: #666666;
    --rk-text-tertiary: #888888;
    --rk-text-light: #6b7280;
    --rk-border: #d0d7de;
    --rk-border-light: #e5e7eb;
    --rk-radius: 6px;
    --rk-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --rk-font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* --- Container --- */
#regal-konfigurator {
    font-family: var(--rk-font);
    color: var(--rk-text);
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    box-sizing: border-box;
    padding: 20px clamp(12px, 2.2vw, 28px);
}

/* --- Phase AO.2: Header + Steps in einer Bar --- */
/* .rk-header entfernt – Titel + Vollbild leben jetzt in .rk-steps */

.rk-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.rk-fullscreen-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--rk-border);
    border-radius: 6px;
    background: #fff;
    color: var(--rk-primary-dark);
    font-family: var(--rk-font);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.rk-fullscreen-btn:hover {
    border-color: var(--rk-primary);
    color: var(--rk-primary);
    background: #f7fbff;
}

.rk-fullscreen-btn--active {
    border-color: var(--rk-primary);
    color: #fff;
    background: var(--rk-primary);
}

.rk-fullscreen-icon {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.rk-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--rk-primary-dark);
    margin: 0;
    white-space: nowrap;
}

.rk-subtitle {
    display: none;
}

/* --- Wizard Layout: Content + Preview (2 Spalten, gleich breit) --- */
/* Phase AV: min-width: 0 auf Grid-Kindern verhindert Overflow durch breite BOM-Tabelle */
.rk-wizard {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}
.rk-wizard > * {
    min-width: 0;
}

@media (max-width: 1024px) {
    .rk-wizard {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .rk-wizard {
        grid-template-columns: 1fr;
    }
    /* V.2: Kein Sticky auf Mobil (gestapeltes Layout) */
    .rk-preview {
        position: static;
        max-height: none;
        min-height: 0;
    }
}

/* --- Step-Navigation (horizontal oben, Stepper-Bar) --- */
/* Phase AO.2: Titel links, Steps mittig, Vollbild rechts — alles in einer Bar */
.rk-steps {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 20px;
    margin-bottom: 16px;
    background: #fff;
    border: 1px solid var(--rk-border);
    border-radius: var(--rk-radius);
    box-shadow: var(--rk-shadow);
}

.rk-steps .rk-title {
    flex-shrink: 0;
}

.rk-steps__center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex: 1;
    min-width: 0;
}

.rk-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--rk-font);
    font-size: 0.85rem;
    color: #7abde0;
    min-width: 90px;
    opacity: 0.65;
    transition: opacity 0.2s;
}

.rk-step:hover:not(.rk-step--disabled) {
    opacity: 0.75;
}

.rk-step--active {
    opacity: 1;
}

.rk-step--active .rk-step-num {
    border-color: var(--rk-primary);
    background: #e8f4fd;
    color: var(--rk-primary);
    box-shadow: 0 0 0 3px rgba(var(--rk-primary-rgb), 0.15);
}

.rk-step--active .rk-step-label {
    color: var(--rk-primary);
    font-weight: 600;
}

.rk-step--completed {
    opacity: 0.85;
}

.rk-step--completed .rk-step-num {
    border-color: #22c55e;
    background: #e8f5e9;
    color: #22c55e;
}

.rk-step--disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* 2026-06 Copilot – WCAG-Fix: #5a9fc4 hatte nur ~3:1 Kontrast, #1a4966 hat ~8.5:1 */
.rk-step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--rk-primary);
    background: transparent;
    color: var(--rk-primary-dark);
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
    transition: all 0.2s;
}

.rk-step-label {
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    text-align: center;
}

/* Verbindungslinie zwischen Steps */
.rk-step-line {
    flex: 0 0 40px;
    height: 2px;
    background: var(--rk-border);
    margin-bottom: 18px;
}

@media (max-width: 768px) {
    .rk-steps { padding: 10px 12px; gap: 8px; }
    .rk-steps .rk-title { display: none; }
    .rk-steps .rk-fullscreen-label { display: none; }
    .rk-fullscreen-btn { display: none; }
    .rk-step { min-width: 60px; padding: 4px 6px; }
    .rk-step-line { flex: 0 0 20px; }
    .rk-step-num { width: 30px; height: 30px; font-size: 0.8rem; }
    .rk-step-label { font-size: 0.65rem; }
}

@media (max-width: 1024px) {
    .rk-steps .rk-title { font-size: 1rem; }
    .rk-steps .rk-fullscreen-label { display: none; }
}

/* --- Content-Bereich (Step-Formular) --- */
/* AZ.2: Kein eigener Scroll-Container mehr — Seite scrollt natuerlich.
   Sticky Preview folgt dem Viewport. Eigenes overflow-y nur im Fullscreen. */
.rk-content {
    background: #fff;
    border: 1px solid var(--rk-border);
    border-radius: var(--rk-radius);
    padding: 20px;
    box-shadow: var(--rk-shadow);
    min-height: 400px;
    position: relative;
}

.rk-content::-webkit-scrollbar { width: 6px; }
.rk-content::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 3px; }
.rk-content::-webkit-scrollbar-thumb { background: #c0cdd8; border-radius: 3px; }
.rk-content::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* AU.6 / AZ.3: Scroll-Fade-Gradient — zeigt Kunden dass Content weiter unten geht */
.rk-scroll-fade {
    pointer-events: none;
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    height: 48px;
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.97));
    z-index: 2;
    transition: opacity 0.3s ease;
}

.rk-scroll-fade--hidden {
    opacity: 0;
}

.rk-step-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--rk-primary-dark);
    margin: 0 0 6px 0;
}

.rk-step-desc {
    font-size: 0.9rem;
    color: var(--rk-text-secondary);
    margin: 0 0 20px 0;
}

.rk-step-body {
    min-height: 250px;
}

/* Placeholder fuer noch nicht implementierte Steps */
.rk-placeholder {
    padding: 30px 20px;
    background: var(--rk-bg);
    border: 2px dashed var(--rk-border);
    border-radius: var(--rk-radius);
    text-align: center;
    color: #999;
    font-size: 0.9rem;
    margin-bottom: 16px;
}

/* --- Zurueck/Weiter Navigation --- */
.rk-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--rk-border);
}

.rk-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    border: none;
    border-radius: var(--rk-radius);
    font-family: var(--rk-font);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.rk-btn--back {
    background: #fff;
    color: var(--rk-text);
    border: 1px solid var(--rk-border);
}

.rk-btn--back:hover {
    background: var(--rk-bg);
    border-color: var(--rk-primary);
}

.rk-btn--next {
    background: var(--rk-primary);
    color: #fff;
}

.rk-btn--next:hover {
    background: var(--rk-primary-hover);
}

/* --- Status-Nachrichten --- */
.rk-message {
    padding: 10px 14px;
    border-radius: 4px;
    font-size: 0.85rem;
    margin-top: 12px;
}

.rk-message--success {
    background: #f0fdf4;
    border-left: 3px solid #22c55e;
    color: #166534;
}

.rk-message--error {
    background: #fef2f2;
    border-left: 3px solid #ef4444;
    color: #991b1b;
}

.rk-message--info {
    background: #e8f4fd;
    border-left: 3px solid var(--rk-primary);
    color: var(--rk-primary-dark);
}

/* Formular-Gruppen */
.rk-field {
    margin-bottom: 12px;
}

.rk-field label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--rk-text);
    margin-bottom: 4px;
}

.rk-field select,
.rk-field input[type="number"] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--rk-border);
    border-radius: 4px;
    font-size: 0.9rem;
    font-family: var(--rk-font);
    background: #fff;
    color: var(--rk-text);
    transition: border-color 0.2s;
}

.rk-field select:focus,
.rk-field input:focus {
    outline: none;
    border-color: var(--rk-primary);
    box-shadow: 0 0 0 2px rgba(var(--rk-primary-rgb), 0.2);
}

/* Checkbox-Felder */
.rk-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
}

.rk-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--rk-primary);
}

.rk-checkbox label {
    margin: 0;
    font-weight: 400;
}

/* Felder-Separator */
.rk-separator {
    border: none;
    border-top: 1px solid var(--rk-border);
    margin: 16px 0;
}

/* --- Modus-Toggle (Shop/Anfrage) --- PLAYBOOK Phase H --- */
.rk-mode-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding: 10px 14px;
    background: var(--rk-bg-light);
    border-radius: 8px;
    border: 1px solid var(--rk-border);
}
.rk-mode-toggle__label {
    font-size: 0.82rem;
    color: var(--rk-text-tertiary);
    transition: color 0.2s;
}
.rk-mode-toggle__label--active {
    color: var(--rk-primary-dark);
    font-weight: 600;
}
.rk-toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}
.rk-toggle-switch__input {
    opacity: 0;
    width: 0;
    height: 0;
}
.rk-toggle-switch__slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: #bbb;
    border-radius: 24px;
    transition: background 0.2s;
}
.rk-toggle-switch__slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}
.rk-toggle-switch__input:checked + .rk-toggle-switch__slider {
    background: var(--rk-primary);
}
.rk-toggle-switch__input:checked + .rk-toggle-switch__slider::before {
    transform: translateX(20px);
}

/* Sektion-Label */
.rk-section-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--rk-primary-dark);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 8px;
}

/* Margin-Top Hilfsklassen */
.rk-mt-16 { margin-top: 16px; }
.rk-mt-10 { margin-top: 10px; }

/* --- System-Cards (Radio-Card-Auswahl) --- PLAYBOOK Phase B --- */
.rk-system-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

@media (max-width: 768px) {
    .rk-system-cards {
        grid-template-columns: 1fr;
    }
}

.rk-system-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 10px;
    min-height: 0;
    background: #fff;
    border: 2px solid var(--rk-primary-dark);
    border-radius: var(--rk-radius);
    cursor: pointer;
    font-family: var(--rk-font);
    text-align: left;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.rk-system-card:hover {
    border-color: var(--rk-primary);
    box-shadow: 0 0 0 1px var(--rk-primary);
}

.rk-system-card--selected {
    border-color: var(--rk-primary);
    background: #e8f4fd;
    box-shadow: 0 0 0 2px var(--rk-primary);
}

.rk-system-card__icon {
    width: 120px;
    min-width: 120px;
    height: 96px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--rk-border);
    border-radius: 6px;
    background: var(--rk-bg-light);
    color: var(--rk-primary-dark);
    margin-bottom: 0;
}

.rk-system-card__thumb {
    width: 120px;
    min-width: 120px;
    height: 96px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--rk-border);
    border-radius: 6px;
    background: var(--rk-bg-light);
    overflow: hidden;
}

.rk-system-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    display: block;
}

@media (max-width: 1280px) {
    .rk-system-card__icon,
    .rk-system-card__thumb {
        width: 100px;
        min-width: 100px;
        height: 80px;
    }
}

@media (max-width: 768px) {
    .rk-system-card {
        flex-direction: column;
        align-items: flex-start;
        min-height: 0;
    }

    .rk-system-card__icon,
    .rk-system-card__thumb {
        width: 100%;
        min-width: 0;
        height: 100px;
    }
}

.rk-system-card__thumb--loading {
    position: relative;
    background: linear-gradient(90deg, #edf1f4 0%, var(--rk-bg-light) 50%, #edf1f4 100%);
    background-size: 200% 100%;
    animation: rkThumbPulse 1.2s ease-in-out infinite;
}

@keyframes rkThumbPulse {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

.rk-system-card--selected .rk-system-card__icon {
    color: var(--rk-primary);
}

.rk-system-card__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.rk-system-card__label {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--rk-primary-dark);
}

.rk-system-card__material {
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--rk-text-tertiary);
}

.rk-system-card__desc {
    font-size: 0.74rem;
    color: var(--rk-text-secondary);
    line-height: 1.3;
    margin-top: 0;
}

/* Disabled System-Card (nicht bestellbar im Shop-Modus) */
.rk-system-card--disabled {
    opacity: 0.5;
    cursor: not-allowed;
    border-color: #ddd;
    background: var(--rk-bg-disabled);
    position: relative;
}
.rk-system-card--disabled:hover {
    border-color: #ddd;
    box-shadow: none;
}
.rk-system-card__badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--rk-accent);
    background: #fff3e8;
    padding: 2px 8px;
    border-radius: 10px;
    margin-top: 4px;
}

/* --- Auflagentyp Icon-Grid --- PLAYBOOK Phase B --- */
.rk-surface-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 12px;
}

.rk-surface-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: #fff;
    border: 2px solid var(--rk-border);
    border-radius: var(--rk-radius);
    cursor: pointer;
    font-family: var(--rk-font);
    text-align: left;
    min-width: 0;
    padding: 10px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.rk-surface-item:hover {
    border-color: var(--rk-primary);
}

.rk-surface-item--selected {
    border-color: var(--rk-primary);
    background: #e8f4fd;
    box-shadow: 0 0 0 2px var(--rk-primary);
}

.rk-surface-item__icon {
    width: 120px;
    min-width: 120px;
    height: 96px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--rk-text-tertiary);
}

.rk-surface-item__thumb {
    width: 120px;
    min-width: 120px;
    height: 96px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--rk-border);
    border-radius: 4px;
    background: var(--rk-bg-light);
    overflow: hidden;
}

.rk-surface-item__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    display: block;
}

.rk-surface-item--selected .rk-surface-item__icon {
    color: var(--rk-primary);
}

/* AY: Text-Wrapper fuer horizontales Layout (wie System-Cards) */
.rk-surface-item__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.rk-surface-item__label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--rk-text);
    line-height: 1.2;
}

/* Phase AM: Kurzbeschreibung in Auflagen-Cards */
.rk-surface-item__desc {
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--rk-text-light);
    line-height: 1.3;
}

/* AY: Responsive Surface-Cards (analog zu System-Cards) */
@media (max-width: 1280px) {
    .rk-surface-item__icon,
    .rk-surface-item__thumb {
        width: 100px;
        min-width: 100px;
        height: 80px;
    }
}

@media (max-width: 768px) {
    .rk-surface-grid {
        grid-template-columns: 1fr;
    }

    .rk-surface-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .rk-surface-item__icon,
    .rk-surface-item__thumb {
        width: 100%;
        min-width: 0;
        height: 100px;
    }
}

/* Einzelne Auflage (nur 1 Typ im System → keine Auswahl noetig) */
.rk-surface-single {
    padding: 10px 14px;
    background: var(--rk-bg);
    border: 1px solid var(--rk-border);
    border-radius: var(--rk-radius);
    margin-bottom: 12px;
}

.rk-surface-single__label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--rk-text);
}

/* --- Traglast-Info --- PLAYBOOK Phase B --- */
.rk-traglast__grid {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.rk-traglast__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
    background: var(--rk-bg);
    border: 1px solid var(--rk-border);
    border-radius: var(--rk-radius);
    min-width: 128px;
}

.rk-traglast__item--compact .rk-traglast__value {
    font-size: 1rem;
}

.rk-traglast__value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--rk-primary-dark);
}

.rk-traglast__label {
    font-size: 0.78rem;
    color: var(--rk-text-tertiary);
}

.rk-traglast__select-label {
    font-size: 0.78rem;
    color: var(--rk-text-secondary);
}

.rk-traglast__select {
    width: 100%;
    min-height: 36px;
    border: 1px solid var(--rk-border);
    border-radius: 8px;
    padding: 6px 10px;
    font: inherit;
    color: var(--rk-text);
    background: #fff;
}

.rk-traglast__hint {
    margin-top: 8px;
    font-size: 0.78rem;
    color: var(--rk-text-light);
}

.rk-load-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.rk-load-toggle__value {
    font-size: 0.78rem;
    color: var(--rk-text-light);
    font-weight: 600;
}

.rk-load-toggle__value--active {
    color: var(--rk-primary-dark);
}

.rk-load-toggle__switch {
    position: relative;
    display: inline-flex;
    width: 42px;
    height: 24px;
}

.rk-load-toggle__switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.rk-load-toggle__slider {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #d6dee5;
    transition: background-color .2s ease;
}

.rk-load-toggle__slider::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    top: 3px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
    transition: transform .2s ease;
}

.rk-load-toggle__switch input:checked + .rk-load-toggle__slider {
    background: var(--rk-primary);
}

.rk-load-toggle__switch input:checked + .rk-load-toggle__slider::before {
    transform: translateX(18px);
}

/* Segmented Button fuer 2-Wert-Traglast (I.8) */
.rk-load-segment {
    display: inline-flex;
    border: 1px solid var(--rk-border);
    border-radius: var(--rk-radius);
    overflow: hidden;
}

.rk-load-segment__btn {
    padding: 5px 14px;
    font-size: 0.80rem;
    font-weight: 600;
    border: none;
    background: #fff;
    color: var(--rk-text-light);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.rk-load-segment__btn:not(:last-child) {
    border-right: 1px solid var(--rk-border);
}

.rk-load-segment__btn--active {
    background: var(--rk-primary);
    color: #fff;
}

.rk-load-segment__btn:hover:not(.rk-load-segment__btn--active) {
    background: var(--rk-bg-hover);
}

/* Phase AJ: Per-Row Load-Segment (kompakter in Row-Form) */
.rk-load-segment--row {
    display: inline-flex;
    border: 1px solid var(--rk-border);
    border-radius: var(--rk-radius);
    overflow: hidden;
    margin-top: 2px;
}

/* Phase AJ: Step 1 Global Load-Segment */
.rk-load-segment--global {
    display: inline-flex;
    border: 1px solid var(--rk-border);
    border-radius: var(--rk-radius);
    overflow: hidden;
}

/* Phase AJ: Traglast-Feld inline in Row-Form */
.rk-field--traglast {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.rk-field--traglast > label {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--rk-text);
    white-space: nowrap;
}

/* Phase AJ: Inline static Traglast-Wert (wenn nur 1 Stufe) */
.rk-traglast__value--inline {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--rk-primary-dark);
}

/* Phase AJ: Toggles nebeneinander (Eckverbindung + Planung) */
/* Phase AL.1: align-items: stretch → gleiche Hoehe beider Spalten */
/* Phase AO.1: flex-wrap damit Spalten bei schmalem Viewport umbrechen */
.rk-toggles-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
    flex-wrap: wrap;
}

.rk-toggles-row__col {
    flex: 1 1 180px;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Phase AL.1: Toggle-Container fuellt verfuegbare Hoehe */
.rk-toggles-row__col .rk-corner-toggle {
    display: flex;
    flex: 1;
}

/* Phase AL.1: Seg-Buttons gleiche Hoehe + vertikale Zentrierung */
.rk-toggles-row__col .rk-seg-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Phase AJ: Bottom-Row (Wandbefestigung + Zusammenstellung) */
/* Phase AO.3: align-items: center fuer gleiche Hoehe, Pills rechts */
/* Phase AP.3: align-items: center statt stretch, damit Pills nicht unnoetig hoch werden */
/* Phase AS.3: align-items: flex-end fuer Grundlinien-Ausrichtung mit Zusammenstellung */
.rk-bottom-row {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    margin-top: 6px;
    flex-wrap: wrap;
}

/* Phase AO.3: Zusammenstellung soll nicht den gesamten Platz einnehmen */
/* Phase AP.3: max-width begrenzen, damit Pills genug Platz haben */
.rk-bottom-row .rk-alternatives-wrap,
.rk-bottom-row .rk-zusammenstellung {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 50%;
}

/* Phase AP.3: Zusammenstellung-Select nicht volle Breite */
.rk-bottom-row .rk-alternatives-select {
    width: auto;
    min-width: 180px;
    max-width: 100%;
}

/* Phase AL.5: Bottom-Row Pill-Badges (Wandbefestigung, Staenderlast) */
/* Phase AO.4: Gleiche Mindestbreite fuer beide Pills */
/* Phase AS.2: Kompaktere Pills, gleiche Groesse fuer beide */
/* Phase AU.4: Eckig statt rund — passt zum Gesamtdesign */
.rk-bottom-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border: 1px solid var(--rk-border);
    border-radius: 6px;
    background: #fff;
    font-size: 0.78rem;
    white-space: nowrap;
    transition: border-color .15s, background .15s;
    min-width: 0;
    justify-content: center;
    height: 32px;
    box-sizing: border-box;
}

.rk-bottom-pill--active {
    border-color: var(--rk-primary);
    background: #ebf6ff;
}

.rk-pill-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    margin: 0;
}

.rk-pill-label input[type="checkbox"] {
    margin: 0;
    accent-color: var(--rk-primary);
}

.rk-pill-text {
    font-weight: 500;
    color: var(--rk-text);
}

/* Phase AL.4: Traglast-Pill mit Segment-Buttons */
/* Phase AS.2: Kompaktere Segment-Buttons fuer gleiche Hoehe wie Wandbefestigung */
.rk-bottom-pill--traglast {
    gap: 5px;
    padding: 4px 8px;
}

.rk-bottom-pill--traglast .rk-load-segment {
    margin: 0;
}

.rk-bottom-pill--traglast .rk-load-segment--row {
    margin-top: 0;
}

.rk-bottom-pill--traglast .rk-load-segment__btn {
    padding: 3px 10px;
    font-size: 0.76rem;
}

/* Phase AJ: Auto-Traglast Hint in per-row Segment */
.rk-traglast-auto-hint {
    font-size: 0.75rem;
    color: var(--rk-text-light);
    margin-top: 2px;
    font-style: italic;
}
/* CP.5: Traglast-Downgrade Warnung */
.rk-traglast-downgrade-hint {
    font-size: 0.8rem;
    color: #b45309;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 4px;
    padding: 6px 10px;
    margin-top: 6px;
}

@media (max-width: 600px) {
    .rk-toggles-row { flex-direction: column; gap: 6px; }
    .rk-bottom-row { flex-direction: column; align-items: flex-start; }
}

/* Phase AV: Intermediate Breakpoint — Bottom-Row und Pills umbrechen lassen */
@media (max-width: 900px) {
    .rk-bottom-row { flex-wrap: wrap; }
    .rk-bottom-row .rk-alternatives-wrap,
    .rk-bottom-row .rk-zusammenstellung { max-width: 100%; flex-basis: 100%; }
    .rk-bottom-pill { white-space: normal; height: auto; min-height: 32px; }
    .rk-bottom-pill--traglast { flex-wrap: wrap; }
}

/* Phase AV: Persistenter Mobile-Hinweis */
.rk-mobile-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 12px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 6px;
    font-size: 0.8rem;
    color: #9a3412;
    line-height: 1.4;
}
.rk-mobile-banner svg {
    flex-shrink: 0;
    color: #ea580c;
}

/* --- Vorschau-Panel (V.1: groesser, V.2: sticky) --- */
.rk-preview {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--rk-border);
    border-radius: var(--rk-radius);
    box-shadow: var(--rk-shadow);
    overflow: hidden;
    /* V.1: Preview-Container groesser — mind. 700px oder 78vh */
    min-height: min(700px, 78vh);
    /* V.2: Sticky unter Shopware-Sticky-Header (52px) */
    position: sticky;
    top: 52px;
    /* Phase BN: 120px = 52px Shopware-Header + 58px Footer-Bar + 10px Abstand */
    max-height: calc(100vh - 120px);
}

/* Tabs (2D / 3D) — P.38: flex-shrink global */
.rk-preview-tabs {
    display: flex;
    border-bottom: 1px solid var(--rk-border);
    background: var(--rk-bg);
    flex-shrink: 0;
}

.rk-tab {
    flex: 1;
    padding: 10px 16px;
    border: none;
    background: transparent;
    font-family: var(--rk-font);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--rk-text-secondary);
    cursor: pointer;
    transition: color 0.2s, border-bottom 0.2s;
    border-bottom: 2px solid transparent;
}

.rk-tab:hover {
    color: var(--rk-primary);
}

.rk-tab--active {
    color: var(--rk-primary-dark);
    border-bottom-color: var(--rk-primary);
    background: #fff;
}

/* Canvas/SVG Container */
.rk-canvas-wrap {
    position: relative;
    flex: 1;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fafbfc;
    overflow: hidden; /* P.9: Pan/Zoom Clip */
}

/* BY.3: Bedienhinweis-Overlay */
.rk-controls-hint {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 90;
    padding: 4px 10px;
    background: rgba(var(--rk-primary-dark-rgb), 0.74);
    color: #fff;
    font-size: 11px;
    font-family: var(--rk-font);
    border-radius: 4px;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.8s ease;
}

.rk-controls-hint--hidden {
    opacity: 0;
}

/* P.22: 2D Ansicht-Reset-Button */
.rk-svg-reset-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border: 1px solid var(--rk-border);
    border-radius: var(--rk-radius);
    background: rgba(255, 255, 255, 0.92);
    font-family: var(--rk-font);
    font-size: 0.75rem;
    font-weight: 500;
    color: #555;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.rk-svg-reset-btn:hover {
    background: #fff;
    color: var(--rk-primary-dark);
    border-color: var(--rk-primary);
}
.rk-svg-reset-btn svg {
    flex-shrink: 0;
}

/* SVG Container (Phase M / Phase O.5: max-height entfernt, kein Scroll noetig) */
.rk-svg-container {
    position: relative; /* V.5: Anker fuer Minimap-Overlay */
    width: 100%;
    padding: 8px 0;
    will-change: transform; /* P.9: GPU-Layer fuer Pan/Zoom */
    user-select: none; /* P.9: Kein Text-Select beim Drag */
}

.rk-svg-container svg {
    width: 100%;
    height: auto;
    display: block;
}

.rk-svg-section {
    margin-bottom: 12px;
}

/* V.5: Draufsicht als Mini-Map (Individualisierung) */
/* Im Flow unter der Frontalansicht, hover vergroessert per transform (kein Flicker) */
.rk-svg-section--minimap {
    position: relative;
    width: 180px;
    margin: 4px auto 0;
    background: rgba(255,255,255,0.95);
    border: 1px solid var(--rk-border);
    border-radius: var(--rk-radius);
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    padding: 4px;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    transform-origin: center bottom;
    opacity: 0.85;
    z-index: 5;
}
.rk-svg-section--minimap:hover {
    transform: scale(1.6);
    opacity: 1;
    z-index: 10;
    box-shadow: 0 2px 12px rgba(0,0,0,0.18);
}
.rk-svg-section--minimap .rk-svg-section-label {
    font-size: 8px;
    padding: 0 2px 2px;
    opacity: 0.7;
}
.rk-svg-section--minimap:hover .rk-svg-section-label {
    font-size: 9px;
    opacity: 1;
}

.rk-svg-section-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--rk-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0 8px 4px;
}

#rk-canvas-3d {
    min-height: 400px;
    display: flex;
    align-items: stretch;
}

.rk-canvas-wrap canvas {
    display: block;
    max-width: 100%;
}

.rk-hidden {
    display: none !important;
}

/* --- Stueckliste (BOM) --- */
.rk-bom-section {
    margin-top: 20px;
    background: #fff;
    border: 1px solid var(--rk-border);
    border-radius: var(--rk-radius);
    padding: 16px 20px;
    box-shadow: var(--rk-shadow);
}

.rk-bom-section h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--rk-primary-dark);
    margin: 0 0 12px 0;
}

/* Info-Hinweis */
.rk-info {
    padding: 10px 14px;
    background: #e8f4fd;
    border-left: 3px solid var(--rk-primary);
    border-radius: 0 4px 4px 0;
    font-size: 0.85rem;
    margin-top: 12px;
    color: var(--rk-primary-dark);
}

/* Warn-Hinweis (orange) – AZ.4 Kreuzstreben-Warnung */
.rk-info--warn {
    padding: 10px 14px;
    background: #fef3cd;
    border-left: 3px solid #f59e0b;
    border-radius: 0 4px 4px 0;
    font-size: 0.85rem;
    margin-bottom: 12px;
    color: #92400e;
}
/* Info-Hinweis (blau) – BC.2 Kreuzstreben-Auto-Anpassung */
.rk-info--info {
    padding: 10px 14px;
    background: #e8f4fd;
    border-left: 3px solid var(--rk-primary);
    border-radius: 0 4px 4px 0;
    font-size: 0.85rem;
    margin-bottom: 12px;
    color: var(--rk-primary-dark);
}
.rk-info--info small {
    display: block;
    margin-top: 4px;
    opacity: 0.8;
}

/* Fehler-Hinweis */
.rk-error {
    padding: 10px 14px;
    background: #fef2f2;
    border-left: 3px solid #ef4444;
    border-radius: 0 4px 4px 0;
    font-size: 0.85rem;
    color: #991b1b;
}

/* --- Regal-Zeile hinzufuegen --- */
.rk-add-row {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    margin-top: 8px;
    border: 2px dashed var(--rk-border);
    border-radius: var(--rk-radius);
    cursor: pointer;
    color: #999;
    font-size: 0.85rem;
    transition: border-color 0.2s, color 0.2s;
}

.rk-add-row:hover {
    border-color: var(--rk-primary);
    color: var(--rk-primary);
}

/* --- Regal-Item in Sidebar --- */
.rk-shelf-item {
    background: var(--rk-bg);
    border: 1px solid var(--rk-border);
    border-radius: var(--rk-radius);
    padding: 10px 12px;
    margin-bottom: 8px;
    position: relative;
}

.rk-shelf-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.rk-shelf-item-title {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--rk-primary-dark);
}

.rk-shelf-item-remove {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    font-size: 1.1rem;
    padding: 2px 6px;
    border-radius: 4px;
    transition: color 0.2s, background 0.2s;
}

.rk-shelf-item-remove:hover {
    color: #ef4444;
    background: #fef2f2;
}

/* Kompakte Feld-Reihe innerhalb Shelf-Item */
.rk-shelf-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.rk-shelf-fields .rk-field {
    margin-bottom: 0;
}

.rk-shelf-fields select {
    padding: 5px 8px;
    font-size: 0.82rem;
}

/* =====================================================================
   STEP 2 – Form & Masse (PLAYBOOK Phase C)
   ===================================================================== */

/* --- Form-Auswahl (Shape Picker) --- */
.rk-shape-picker {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .rk-shape-picker {
        grid-template-columns: repeat(3, 1fr);
    }
}

.rk-shape-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 6px 8px;
    background: #fff;
    border: 2px solid var(--rk-border);
    border-radius: var(--rk-radius);
    cursor: pointer;
    font-family: var(--rk-font);
    text-align: center;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.rk-shape-item:hover:not(.rk-shape-item--disabled) {
    border-color: var(--rk-primary);
}

.rk-shape-item--selected {
    border-color: var(--rk-primary);
    background: #e8f4fd;
    box-shadow: 0 0 0 2px var(--rk-primary);
}

.rk-shape-item--disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.rk-shape-item__icon {
    width: 48px;
    height: 48px;
    color: var(--rk-text-tertiary);
}

.rk-shape-item--selected .rk-shape-item__icon {
    color: var(--rk-primary);
}

.rk-shape-item__icon svg {
    width: 100%;
    height: 100%;
}

.rk-shape-item__label {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--rk-text);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* --- Eckverbindungs-Toggle (Phase T) --- */
.rk-corner-toggle {
    display: flex;
    gap: 0;
    margin-bottom: 8px;
}

.rk-seg-btn {
    flex: 1;
    padding: 8px 12px;
    font-family: var(--rk-font);
    font-size: 0.82rem;
    font-weight: 500;
    background: #fff;
    color: var(--rk-text);
    border: 2px solid var(--rk-border);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    word-break: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
}

.rk-seg-btn:first-child {
    border-radius: var(--rk-radius) 0 0 var(--rk-radius);
    border-right: 1px solid var(--rk-border);
}

.rk-seg-btn:last-child {
    border-radius: 0 var(--rk-radius) var(--rk-radius) 0;
    border-left: 1px solid var(--rk-border);
}

/* CE: Mittlerer Button bei 3-Segment-Layouts (Eurobox-opt.) */
.rk-seg-btn:not(:first-child):not(:last-child) {
    border-radius: 0;
    border-left: 1px solid var(--rk-border);
    border-right: 1px solid var(--rk-border);
}

.rk-seg-btn:hover:not(.rk-seg-btn--active) {
    border-color: var(--rk-primary);
    color: var(--rk-primary);
}

.rk-seg-btn--active {
    background: var(--rk-primary);
    border-color: var(--rk-primary);
    color: #fff;
}

/* BO.5: Seg-Buttons auf Mobile kompakter */
@media (max-width: 768px) {
    .rk-seg-btn { padding: 5px 8px; font-size: 0.74rem; }
}

/* --- Reihen-Formulare --- */

/* Wandselektor (Scroll-Nav bei ≥3 Wänden) */
.rk-wall-selector {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
    padding: 6px 8px;
    background: transparent;
    border: none;
    border-radius: var(--rk-radius);
}
.rk-wall-selector__hint {
    font-size: 0.75rem;
    color: #6b7685;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 3px;
}
.rk-wall-selector__btns {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.rk-wall-sel-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--rk-primary-dark);
    background: #fff;
    border: 1px solid var(--rk-border);
    border-radius: var(--rk-radius);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.rk-wall-sel-btn:hover {
    border-color: var(--rk-primary);
    background: #eaf5fc;
}
.rk-wall-sel-btn__icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.rk-wall-sel-btn__icon svg {
    width: 100%;
    height: 100%;
}
/* Flash-Animation beim Scroll-Sprung */
.rk-row-form--flash {
    animation: rk-flash 1.2s ease;
}
@keyframes rk-flash {
    0%    { box-shadow: 0 0 0 0 rgba(var(--rk-primary-rgb),0.45); }
    20%   { box-shadow: 0 0 0 5px rgba(var(--rk-primary-rgb),0.35); }
    100%  { box-shadow: none; }
}

.rk-row-form {
    background: #fff;
    border: 1px solid var(--rk-border);
    border-radius: var(--rk-radius);
    padding: 0;
    margin-bottom: 8px;
    overflow: hidden;
}
.rk-row-form--open {
    border-color: var(--rk-primary);
}

.rk-row-form__header {
    display: flex;
    align-items: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--rk-primary-dark);
    margin-bottom: 0;
    padding: 10px 14px;
    border-bottom: 1px solid transparent;
    overflow: visible;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}
.rk-row-form--open > .rk-row-form__header {
    border-bottom-color: var(--rk-border);
    background: var(--rk-bg);
}
.rk-row-form__header:hover {
    background: #f0f6fb;
}

/* Akkordeon Chevron */
.rk-row-form__chevron {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-right: 6px;
    transition: transform 0.2s ease;
    color: var(--rk-primary-dark);
}
.rk-row-form--open > .rk-row-form__header > .rk-row-form__chevron {
    transform: rotate(0deg);
}
.rk-row-form--collapsed > .rk-row-form__header > .rk-row-form__chevron {
    transform: rotate(-90deg);
}

/* Akkordeon Zusammenfassung (collapsed sichtbar) */
.rk-row-form__summary {
    margin-left: auto;
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--rk-text-tertiary);
    white-space: nowrap;
    padding-left: 10px;
}

/* Akkordeon Body */
.rk-row-form__body {
    padding: 10px 14px 14px;
}
.rk-row-form--collapsed > .rk-row-form__body {
    display: none;
}

/* Einzel-Reihe (I-Form): kein Akkordeon, aber Box behalten */
.rk-row-form--single {
    padding: 12px 14px;
}
/* Titel im Akkordeon-Header */
.rk-row-form__title {
    white-space: nowrap;
}

/* AU.7: Shape-Icon neben Row-Header */
.rk-row-form__icon {
    display: inline-flex;
    width: 22px;
    height: 22px;
    margin-right: 6px;
    flex-shrink: 0;
    cursor: help;
}
.rk-row-form__icon svg {
    width: 100%;
    height: 100%;
    transition: transform 0.2s ease;
    transform-origin: left center;
}
.rk-row-form__icon:hover svg {
    transform: scale(3);
    z-index: 100;
    position: relative;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.18));
}

.rk-row-form__fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
/* P.7: Vererbungshinweis bei Anbau-Rows */
.rk-inherit-hint {
    grid-column: 1 / -1;
    font-size: 0.78rem;
    color: var(--rk-text-tertiary);
    font-style: italic;
    margin-top: -4px;
}

/* Phase AH: Wandbefestigung Toggle */
.rk-field--wallbracket {
    grid-column: 1 / -1;
    margin-top: 2px;
}
.rk-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    color: #444;
    user-select: none;
}
.rk-toggle-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--rk-primary);
    cursor: pointer;
}
.rk-auto-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    background: var(--rk-accent);
    color: #fff;
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 2px;
    vertical-align: middle;
}

.rk-row-form__fields select:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Phase AO.5b: Anbau-Eckanbau-Hinweis (gelbe Warnung) */
.rk-anbau-hint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 6px 0 0;
    padding: 8px 12px;
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 6px;
    font-size: 0.82rem;
    color: #5d4037;
    line-height: 1.4;
}
.rk-anbau-hint__icon {
    flex-shrink: 0;
    font-size: 1rem;
    line-height: 1;
}
.rk-anbau-hint__text {
    flex: 1;
}

@media (max-width: 768px) {
    .rk-row-form__fields {
        grid-template-columns: 1fr;
    }
}

.rk-field--inline {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rk-field--inline label {
    display: block;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--rk-text);
    margin-bottom: 0;
}

.rk-field--inline select {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--rk-border);
    border-radius: 4px;
    font-size: 0.88rem;
    font-family: var(--rk-font);
    background: #fff;
    color: var(--rk-text);
    transition: border-color 0.2s;
}

.rk-field--inline select:focus {
    outline: none;
    border-color: var(--rk-primary);
    box-shadow: 0 0 0 2px rgba(var(--rk-primary-rgb), 0.2);
}

/* --- Stepper (Wandlänge) --- */
.rk-stepper {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--rk-border);
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
}

.rk-stepper__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: var(--rk-bg);
    color: var(--rk-text);
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
    font-family: var(--rk-font);
    line-height: 1;
}

.rk-stepper__btn:hover {
    background: var(--rk-primary);
    color: #fff;
}

.rk-stepper__input {
    width: 80px;
    text-align: center;
    border: none;
    border-left: 1px solid var(--rk-border);
    border-right: 1px solid var(--rk-border);
    font-size: 0.88rem;
    font-family: var(--rk-font);
    font-weight: 600;
    color: var(--rk-text);
    padding: 6px 4px;
    height: 36px;
    box-sizing: border-box;
    -moz-appearance: textfield;
}

.rk-stepper__input::-webkit-outer-spin-button,
.rk-stepper__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.rk-stepper__input:focus {
    outline: none;
    background: #f0f9ff;
}

/* --- Breiten-Checkboxen --- */
.rk-width-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    grid-column: 1 / -1;
}

.rk-width-checks__label {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--rk-text);
    width: 100%;
    margin-bottom: 2px;
}

.rk-width-check {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: #fff;
    border: 1px solid var(--rk-border);
    border-radius: 4px;
    font-size: 0.82rem;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.rk-width-check:hover {
    border-color: var(--rk-primary);
}

.rk-width-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--rk-primary);
    cursor: pointer;
}

.rk-width-check--checked {
    border-color: var(--rk-primary);
    background: #e8f4fd;
}

/* --- Zusammenstellung (Ergebnis der Bay-Aufteilung) --- */
.rk-zusammenstellung {
    margin-top: 12px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid var(--rk-border);
    border-radius: var(--rk-radius);
    grid-column: 1 / -1;
}

.rk-zusammenstellung__label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--rk-primary-dark);
    margin-bottom: 4px;
}

.rk-zusammenstellung__bays {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--rk-text);
    font-family: 'Consolas', 'Courier New', monospace;
    padding: 4px 0;
}

.rk-zusammenstellung__info {
    font-size: 0.78rem;
    color: var(--rk-text-tertiary);
    margin-top: 2px;
}

/* --- Berechnen-Button --- */
.rk-calc-wrap {
    text-align: center;
    margin-top: 16px;
}

.rk-btn--calc {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    border: 2px solid var(--rk-primary);
    border-radius: var(--rk-radius);
    background: #fff;
    color: var(--rk-primary);
    font-family: var(--rk-font);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.rk-btn--calc:hover {
    background: var(--rk-primary);
    color: #fff;
}

/* =====================================================================
   STEP 3 – Individualisierung (PLAYBOOK Phase D)
   ===================================================================== */

/* --- Toggle-Schalter --- */
.rk-toggle-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.rk-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.rk-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.rk-toggle__slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--rk-border);
    border-radius: 24px;
    transition: background 0.2s;
}

.rk-toggle__slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}

.rk-toggle input:checked + .rk-toggle__slider {
    background: var(--rk-primary);
}

.rk-toggle input:checked + .rk-toggle__slider::before {
    transform: translateX(20px);
}

.rk-toggle__text {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--rk-text);
}

/* --- Individualisierungs-Layout (Tree + Formular) --- */
.rk-indiv-layout {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 16px;
    margin-top: 12px;
}

@media (max-width: 768px) {
    .rk-indiv-layout {
        grid-template-columns: 1fr;
    }
}

/* --- Baumnavigation --- */
.rk-tree {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rk-tree-row {
    padding: 6px 8px;
    margin-top: 4px;
}

.rk-tree-row__label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--rk-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.rk-tree-field {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid var(--rk-border);
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--rk-font);
    font-size: 0.82rem;
    color: var(--rk-text);
    text-align: left;
    transition: border-color 0.15s, background 0.15s;
    width: 100%;
    box-sizing: border-box;
}

.rk-tree-field:hover {
    border-color: var(--rk-primary);
}

.rk-tree-field--active {
    border-color: var(--rk-primary);
    background: #e8f4fd;
    box-shadow: inset 3px 0 0 var(--rk-primary);
}

.rk-tree-field--custom {
    border-left: 3px solid var(--rk-accent);
}

.rk-tree-field--active.rk-tree-field--custom {
    border-left: 3px solid var(--rk-primary);
}

.rk-tree-field__num {
    font-weight: 700;
    color: var(--rk-primary-dark);
    min-width: 28px;
}

.rk-tree-field__info {
    color: var(--rk-text-tertiary);
    font-size: 0.78rem;
}

.rk-tree-field__badge {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--rk-accent);
}

/* --- Feld-Formular --- */
.rk-field-form {
    background: var(--rk-bg);
    border: 1px solid var(--rk-border);
    border-radius: var(--rk-radius);
    padding: 14px;
}

.rk-field-form__header {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--rk-primary-dark);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--rk-border);
}

.rk-field-form__section {
    margin-bottom: 14px;
}

.rk-field-form__row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.rk-field-form__actions {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--rk-border);
}

/* --- Ebenen-Zeilen --- */
.rk-level-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
}

.rk-level-row__num {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--rk-primary-dark);
    min-width: 60px;
}

.rk-level-row__select {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--rk-border);
    border-radius: 4px;
    font-size: 0.85rem;
    font-family: var(--rk-font);
    background: #fff;
    color: var(--rk-text);
    transition: border-color 0.2s;
    max-width: 280px;
}

.rk-level-row__select:focus {
    outline: none;
    border-color: var(--rk-primary);
    box-shadow: 0 0 0 2px rgba(var(--rk-primary-rgb), 0.2);
}

/* AU.2: Leere Extra-Ebene: normales Design, dezente linke Markierung */
.rk-level-row--empty {
    border-left: 2px solid var(--rk-primary);
    padding-left: 8px;
}
.rk-level-row--empty .rk-level-row__num {
    color: var(--rk-text-light);
}

/* Entfernen-Button fuer Extra-Ebenen */
.rk-level-row__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--rk-border);
    border-radius: 50%;
    background: #fff;
    color: #c33;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.rk-level-row__remove:hover {
    background: #c33;
    color: #fff;
}

/* CR.1: Lichte Hoehe zwischen Ebenen */
.rk-level-gap {
    font-size: 0.7rem;
    color: var(--rk-text-light);
    text-align: center;
    padding: 1px 0;
    border-top: 1px dashed var(--rk-border);
    border-bottom: 1px dashed var(--rk-border);
    margin: 2px 0;
}

/* CG.5: Hoehenposition-Anzeige + Hoch/Runter-Buttons */
.rk-level-row__pos {
    font-size: 0.75rem;
    color: var(--rk-text-light);
    min-width: 52px;
    text-align: right;
    flex-shrink: 0;
}
.rk-level-row__pos--custom {
    color: var(--rk-primary);
    font-weight: 600;
}
.rk-level-row__up,
.rk-level-row__down {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1px solid var(--rk-border);
    border-radius: 3px;
    background: #fff;
    color: var(--rk-text);
    font-size: 0.65rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    flex-shrink: 0;
    padding: 0;
}
.rk-level-row__up:hover,
.rk-level-row__down:hover {
    background: var(--rk-primary);
    color: #fff;
    border-color: var(--rk-primary);
}

/* Hinweis unter Ebenen-Liste */
.rk-level-hint {
    font-size: 0.78rem;
    color: var(--rk-text-tertiary);
    margin-top: 4px;
    padding-left: 2px;
}

/* --- Reset-Button --- */
.rk-btn--reset {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid var(--rk-border);
    border-radius: var(--rk-radius);
    background: #fff;
    color: var(--rk-text-tertiary);
    font-family: var(--rk-font);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}

.rk-btn--reset:hover {
    border-color: var(--rk-accent);
    color: var(--rk-accent);
}

/* =====================================================================
   STEP 4 – Ihr Regal (BOM, Leistungsdaten, Preis, Warenkorb)
   ===================================================================== */

/* --- BOM-Tabelle --- */
.rk-bom-wrap {
    overflow-x: auto;
    margin-bottom: 16px;
}

.rk-bom-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    line-height: 1.4;
}

.rk-bom-table thead {
    background: var(--rk-primary-dark);
    color: #fff;
}

.rk-bom-table th {
    padding: 8px 12px;
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
}

.rk-bom-table td {
    padding: 8px 12px;
    border-bottom: 1px solid #e8e8e8;
    vertical-align: top;
}

.rk-bom-table tbody tr:nth-child(even) {
    background: #f9fafb;
}

.rk-bom-table tbody tr:hover {
    background: #eef5fa;
}

.rk-bom-table__qty {
    text-align: center;
    font-weight: 600;
    min-width: 50px;
}

.rk-bom-table__type {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.8125rem;
    color: var(--rk-text-secondary);
    white-space: nowrap;
}

.rk-bom-table__article-link {
    color: var(--rk-primary-dark);
    text-decoration: none;
    border-bottom: 1px dashed rgba(var(--rk-primary-dark-rgb), 0.35);
}

.rk-bom-table__article-link:hover {
    color: var(--rk-primary);
    border-bottom-color: var(--rk-primary);
}

.rk-bom-table__type-fallback {
    color: #999;
    font-family: var(--rk-font);
}

/* --- System-Info --- */
.rk-system-info {
    background: var(--rk-bg);
    border-left: 3px solid var(--rk-primary);
    padding: 12px 16px;
    margin: 16px 0;
    border-radius: 0 4px 4px 0;
}

.rk-system-info__title {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 4px;
}

.rk-system-info__desc {
    font-size: 0.85rem;
    color: #555;
    line-height: 1.5;
}

/* --- Leistungsdaten --- */
.rk-perf {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.rk-perf__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: #fafbfc;
    border-radius: 4px;
}

.rk-perf__icon {
    flex-shrink: 0;
}

.rk-perf__label {
    flex: 1;
    font-weight: 500;
    font-size: 0.9rem;
}

.rk-perf__value {
    font-weight: 600;
    font-size: 0.9rem;
    text-align: right;
    white-space: nowrap;
}

.rk-perf__sub {
    padding: 2px 12px 6px 40px;
    font-size: 0.82rem;
    color: var(--rk-text-secondary);
}

/* --- Preis-Anzeige --- */
.rk-price-section {
    margin: 20px 0 12px;
    text-align: right;
}

.rk-price-loading {
    font-size: 0.85rem;
    color: var(--rk-primary);
    font-style: italic;
    animation: rk-price-pulse 1.5s ease-in-out infinite;
}

.rk-price-display {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.rk-price-label {
    font-size: 0.8rem;
    color: var(--rk-text-tertiary);
    letter-spacing: 0.3px;
}

.rk-price-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--rk-primary-dark);
}

.rk-price-hint {
    font-size: 0.72rem;
    color: #999;
}

.rk-perf-hint {
    font-size: 0.7rem;
    color: #999;
    font-style: italic;
    margin-top: 6px;
}
.rk-perf-hint--warn {
    color: #b45309;
    font-style: normal;
    font-weight: 500;
    background: #fef3c7;
    border-radius: 4px;
    padding: 6px 8px;
    margin-top: 8px;
}

/* --- Warenkorb-Button --- */
.rk-cart-section {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.rk-btn--cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--rk-primary-dark);
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    min-width: 260px;
}

.rk-btn--cart:hover {
    background: #0f3350;
}

/* CR.4: PDF-Button gleiche Breite wie Warenkorb */
.rk-btn--cart-width {
    min-width: 260px;
    justify-content: center;
}

.rk-btn--cart:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.rk-btn--cart svg {
    flex-shrink: 0;
}

/* --- Verfuegbarkeits-Anzeige (PLAYBOOK Phase H) --- */
.rk-avail-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.rk-avail-banner--ok {
    background: #e6f9ed;
    color: #1a7a3a;
    border: 1px solid #b8e6c8;
}
.rk-avail-banner--warn {
    background: #fff3e8;
    color: #b35400;
    border: 1px solid #ffd9b3;
    flex-wrap: wrap;
}
/* P.6: Kleiner Retry-Button im Banner */
.rk-btn--retry {
    display: inline-block;
    padding: 3px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #fff;
    background: var(--rk-accent);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 6px;
}
.rk-btn--retry:hover {
    background: #e05e00;
}
.rk-avail-ok {
    color: #28a745;
    font-weight: 700;
    font-size: 1.1rem;
}
.rk-avail-miss {
    color: var(--rk-accent);
    font-weight: 700;
    font-size: 1.1rem;
}
.rk-bom-row--unavailable {
    background: #fffaf5;
}
.rk-bom-table__status {
    text-align: center;
    width: 60px;
}

/* --- Anfrage-Formular (PLAYBOOK Phase H) --- */
.rk-inquiry-form {
    margin-top: 12px;
}
.rk-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}
@media (max-width: 600px) {
    .rk-form-grid { grid-template-columns: 1fr; }
}
.rk-form-field--full {
    grid-column: 1 / -1;
}
.rk-form-field--honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}
.rk-form-field label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--rk-primary-dark);
    margin-bottom: 4px;
}
.rk-form-field input,
.rk-form-field textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--rk-border);
    border-radius: 4px;
    font-size: 0.9rem;
    font-family: var(--rk-font);
    box-sizing: border-box;
}
.rk-form-field input:focus,
.rk-form-field textarea:focus {
    outline: none;
    border-color: var(--rk-primary);
    box-shadow: 0 0 0 2px rgba(var(--rk-primary-rgb), 0.15);
}
.rk-inquiry-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.rk-btn--inquiry {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--rk-accent);
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.rk-btn--inquiry:hover {
    background: #e05e00;
}
.rk-btn--inquiry:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.rk-btn--inquiry svg {
    flex-shrink: 0;
}
.rk-inquiry-status {
    font-size: 0.85rem;
    font-weight: 500;
}
.rk-inquiry-status--success {
    color: #28a745;
}
.rk-inquiry-status--error {
    color: #dc3545;
}

/* --- 3D Container --- */
#rk-canvas-3d canvas {
    width: 100% !important;
    height: 100% !important;
}

.rk-export-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.rk-btn--ghost {
    background: #fff;
    color: var(--rk-primary-dark);
    border: 1px solid var(--rk-border);
}

.rk-btn--ghost:hover {
    border-color: var(--rk-primary);
    color: var(--rk-primary);
}

/* --- 3D-Toolbar (PLAYBOOK Phase F.3–F.5, P.38: flex-shrink global) --- */
.rk-3d-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-top: 1px solid var(--rk-border);
    background: var(--rk-bg);
    flex-shrink: 0;
}

.rk-toolbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--rk-border);
    border-radius: 4px;
    background: #fff;
    color: var(--rk-text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    font-family: var(--rk-font);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.rk-toolbar-btn:hover {
    background: #f0f4f7;
    color: var(--rk-primary-dark);
    border-color: var(--rk-primary);
}

.rk-toolbar-btn--active {
    background: var(--rk-primary);
    color: #fff;
    border-color: var(--rk-primary);
}

.rk-toolbar-btn--active:hover {
    background: var(--rk-primary-hover);
}

.rk-toolbar-btn svg {
    width: 18px;
    height: 18px;
}

.rk-toolbar-sep {
    display: inline-block;
    width: 1px;
    height: 20px;
    margin: 0 4px;
    background: var(--rk-border);
}

/* --- Frontalansicht (Phase M: SVG statt Canvas) --- */

/* V.4: Section-Header (Label + Reihen-Buttons nebeneinander) */
.rk-svg-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 0 8px 4px;
}
.rk-svg-section-header .rk-svg-section-label {
    padding: 0;
    margin: 0;
}

/* Reihen-Selector fuer Frontalansicht (Multi-Row) */
.rk-front-row-selector {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.rk-front-row-btn {
    padding: 4px 12px;
    border: 1px solid var(--rk-border);
    border-radius: 4px;
    background: var(--rk-bg);
    color: var(--rk-text);
    font-size: 13px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.rk-front-row-btn:hover {
    border-color: var(--rk-primary);
}

.rk-front-row-btn--active {
    background: var(--rk-primary);
    color: #fff;
    border-color: var(--rk-primary);
}

/* ===== Willkommens-Modal (Vollbild-Empfehlung + Mobile-Hinweis) ===== */
.rk-welcome-overlay {
    position: fixed;
    inset: 0;
    z-index: 10100;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: rk-fadeIn 0.25s ease;
}

@keyframes rk-fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.rk-welcome-modal {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    padding: 32px 36px 28px;
    max-width: 440px;
    width: 90vw;
    text-align: center;
    font-family: var(--rk-font);
    color: var(--rk-primary-dark);
    animation: rk-scaleIn 0.25s ease;
}

@keyframes rk-scaleIn {
    from { transform: scale(0.92); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

.rk-welcome-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--rk-primary-dark);
}

.rk-welcome-header svg {
    color: var(--rk-primary);
}

.rk-welcome-text {
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 18px;
    color: #4a5568;
}

.rk-welcome-fullscreen-hint,
.rk-welcome-mobile-hint {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    text-align: left;
    font-size: 13px;
    line-height: 1.45;
    padding: 12px 14px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.rk-welcome-fullscreen-hint {
    background: #eaf5fc;
    color: #1a5a7e;
}

.rk-welcome-fullscreen-hint svg {
    flex-shrink: 0;
    color: var(--rk-primary);
    margin-top: 1px;
}

.rk-welcome-mobile-hint {
    background: #fff5eb;
    color: #7a4a00;
}

.rk-welcome-mobile-hint svg {
    flex-shrink: 0;
    color: #e67e00;
    margin-top: 1px;
}

.rk-welcome-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.rk-welcome-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background 0.15s, box-shadow 0.15s;
}

.rk-welcome-btn--primary {
    background: var(--rk-primary) !important;
    color: #fff !important;
    border: 2px solid var(--rk-primary) !important;
}

.rk-welcome-btn--primary:hover {
    background: var(--rk-primary-hover) !important;
    border-color: var(--rk-primary-hover) !important;
    box-shadow: 0 2px 8px rgba(35, 153, 209, 0.3);
}

.rk-welcome-btn--secondary {
    background: transparent !important;
    color: var(--rk-primary-dark) !important;
    border: 2px solid var(--rk-border) !important;
}

.rk-welcome-btn--secondary:hover {
    background: #eaf0f5 !important;
    border-color: var(--rk-primary) !important;
    color: var(--rk-primary) !important;
}

/* Vollbildmodus analog TsKuehlzellenPlaner */
#regal-konfigurator.rk-planer-fullscreen {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    background: var(--rk-bg);
    overflow: hidden;
    padding: 14px;
    display: flex;
    flex-direction: column;
}

/* Phase AO.2: Header ist jetzt Teil von .rk-steps — Fullscreen braucht nur .rk-steps */
#regal-konfigurator.rk-planer-fullscreen .rk-steps {
    flex-shrink: 0;
    margin-bottom: 10px;
}

#regal-konfigurator.rk-planer-fullscreen .rk-title {
    font-size: 1.05rem;
}

#regal-konfigurator.rk-planer-fullscreen .rk-wizard {
    flex: 1;
    min-height: 0;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    align-items: stretch;
}

#regal-konfigurator.rk-planer-fullscreen .rk-seo-content {
    display: none;
}

#regal-konfigurator.rk-planer-fullscreen .rk-content,
#regal-konfigurator.rk-planer-fullscreen .rk-preview {
    min-height: 0;
    max-height: none;
    overflow-y: auto;
}

/* Phase BN: Platz fuer fixed Footer-Bar im Fullscreen */
#regal-konfigurator.rk-planer-fullscreen .rk-content,
#regal-konfigurator.rk-planer-fullscreen .rk-preview {
    padding-bottom: 72px;
}

/* P.38: flex/flex-shrink jetzt global auf .rk-preview — nur min-height fuer Fullscreen */
#regal-konfigurator.rk-planer-fullscreen .rk-canvas-wrap {
    min-height: 0;
}

#regal-konfigurator.rk-planer-fullscreen #rk-canvas-3d {
    min-height: 0;
    flex: 1;
    width: 100%;
}

/* --- PDF-Adress-Modal --- */
body.rk-modal-open {
    overflow: hidden;
}

/* Phase AP.9: Flex-Layout fuer vertikale Zentrierung + overflow-Sicherheit */
.rk-pdf-modal {
    position: fixed;
    inset: 0;
    z-index: 11000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
}

.rk-pdf-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
}

.rk-pdf-modal__dialog {
    position: relative;
    width: min(760px, calc(100vw - 32px));
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    margin: 20px auto;
    background: #fff;
    border-radius: 10px;
    border: 1px solid var(--rk-border);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.26);
    padding: 18px 18px 14px;
}

.rk-pdf-modal__dialog h3 {
    margin: 0 0 6px;
    font-size: 1.1rem;
    color: var(--rk-primary-dark);
}

.rk-pdf-modal__dialog p {
    margin: 0 0 14px;
    font-size: 0.9rem;
    color: #576071;
}

.rk-pdf-modal__close {
    position: absolute;
    top: 6px;
    right: 8px;
    border: none;
    background: transparent;
    font-size: 1.7rem;
    line-height: 1;
    color: #67758a;
    cursor: pointer;
}

.rk-pdf-modal__desc {
    margin: 0 0 16px;
    font-size: 0.82rem;
    color: #777;
    line-height: 1.5;
}

.rk-pdf-modal__grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.rk-pdf-modal__grid label {
    display: block;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--rk-primary-dark);
    margin-bottom: 3px;
}

.rk-pdf-modal__grid input {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--rk-border) !important;
    border-radius: 5px;
    font-size: 0.9rem;
    font-family: var(--rk-font);
    box-sizing: border-box;
    margin-bottom: 12px;
    background: #fff !important;
    color: var(--rk-text) !important;
    transition: border-color .2s, box-shadow .2s;
}

.rk-pdf-modal__grid input:focus {
    outline: none;
    border-color: var(--rk-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--rk-primary-rgb), 0.15);
}

/* PLZ + Ort nebeneinander */
.rk-pdf-modal__row {
    display: flex;
    gap: 10px;
}
.rk-pdf-modal__col-plz {
    flex: 0 0 110px;
}
.rk-pdf-modal__col-ort {
    flex: 1;
}
/* E-Mail + Telefon nebeneinander */
.rk-pdf-modal__row-half {
    display: flex;
    gap: 10px;
}
.rk-pdf-modal__row-half > div {
    flex: 1;
}

.rk-pdf-modal__actions {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}
.rk-pdf-modal__actions .rk-btn {
    padding: 12px 22px;
    font-size: 0.88rem;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}
.rk-pdf-modal__actions .rk-btn--ghost {
    background: transparent;
    border: 2px solid var(--rk-primary);
    color: var(--rk-primary);
}
.rk-pdf-modal__actions .rk-btn--ghost:hover {
    background: var(--rk-primary);
    border-color: var(--rk-primary);
    color: #fff;
}
/* Phase CA: Roter Danger-Button fuer "Neue Planung" Confirm-Dialog */
.rk-btn--danger {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 22px; border-radius: 6px; font-weight: 600; font-size: 0.92rem;
    cursor: pointer; border: 2px solid #e74c3c; background: #e74c3c; color: #fff;
    transition: background-color .2s ease, border-color .2s ease;
}
.rk-btn--danger:hover { background: #c0392b; border-color: #c0392b; }
.rk-pdf-modal__actions .rk-btn--next,
.rk-pdf-modal .rk-btn.rk-btn--next {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    background: var(--rk-primary) !important;
    color: #fff !important;
    border: 2px solid var(--rk-primary) !important;
    padding: 12px 28px;
    font-size: 0.92rem;
}
.rk-pdf-modal__actions .rk-btn--next:hover,
.rk-pdf-modal .rk-btn.rk-btn--next:hover {
    background: var(--rk-primary-hover) !important;
    border-color: var(--rk-primary-hover) !important;
}
/* BP.2: Spinner im PDF-Modal waehrend Erzeugung */
.rk-pdf-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: rk-pdf-spin 0.7s linear infinite;
    vertical-align: -2px;
}
@keyframes rk-pdf-spin {
    to { transform: rotate(360deg); }
}
.rk-pdf-modal__actions .rk-btn--next:disabled {
    opacity: 0.8;
    cursor: wait;
}

/* BS.3: Inline-Spinner fuer Save-Button */
.rk-spinner-inline {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: rk-pdf-spin 0.7s linear infinite;
    vertical-align: -1px;
    margin-right: 4px;
}

/* Responsive: PDF-Modal auf Mobile stapeln */
@media (max-width: 600px) {
    .rk-pdf-modal__dialog {
        width: calc(100vw - 16px);
        padding: 14px 12px 10px;
        margin: 8px auto;
    }
    .rk-pdf-modal__row,
    .rk-pdf-modal__row-half {
        flex-direction: column;
        gap: 0;
    }
    .rk-pdf-modal__col-plz {
        flex: 1;
    }
    .rk-pdf-modal__actions {
        flex-direction: column;
    }
    .rk-pdf-modal__actions .rk-btn {
        width: 100%;
        justify-content: center;
    }
}
.rk-pdf-modal__actions .rk-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--rk-primary-rgb), 0.25);
}

/* Phase AP.9: Buttons untereinander bei schmalen Viewports */
@media (max-width: 500px) {
    .rk-pdf-modal__actions {
        flex-direction: column;
    }
    .rk-pdf-modal__actions .rk-btn {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 700px) {
    .rk-pdf-modal__row,
    .rk-pdf-modal__row-half {
        flex-direction: column;
        gap: 0;
    }
}

/* BE.3: Speichern-/Laden-Modal URL-Zeile */
.rk-save-modal__url-row {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.rk-save-modal__url {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid var(--rk-border);
    border-radius: 5px;
    font-size: 0.85rem;
    font-family: var(--rk-font);
    background: var(--rk-bg);
    color: var(--rk-text);
    min-width: 0;
    box-sizing: border-box;
}

.rk-save-modal__url:focus {
    outline: none;
    border-color: var(--rk-primary);
    box-shadow: 0 0 0 2px rgba(var(--rk-primary-rgb), 0.16);
}

/* BE.4: Laden-Modal Hinweis-Text */
.rk-load-modal__hint {
    font-size: 0.82rem;
    color: #576071;
    margin-top: 6px;
}

/* ===== SEO Content Block (Phase L / AZ.3 volle Breite) ===== */
/* 2026-04 Copilot – max-width 1200px fuer Lesbarkeit auf grossen Bildschirmen (v1.0.0) */
.rk-seo-content {
    max-width: 1200px;
    margin: 48px auto 32px;
    padding: 0;
    line-height: 1.7;
    color: var(--rk-text);
    font-family: var(--rk-font);
}

.rk-seo-content h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--rk-primary-dark);
    margin-bottom: 12px;
}

.rk-seo-content h3 {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--rk-primary-dark);
    margin: 28px 0 10px;
}

.rk-seo-content p {
    margin-bottom: 12px;
}

/* --- Regalsystem-Karten --- */
.rk-seo-systems {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin: 16px 0;
}

.rk-seo-system {
    background: var(--rk-bg);
    border: 1px solid var(--rk-border);
    border-radius: var(--rk-radius);
    padding: 16px;
}

.rk-seo-system strong {
    display: block;
    margin-bottom: 6px;
    color: var(--rk-primary-dark);
}

.rk-seo-system p {
    font-size: 0.9rem;
    margin: 0;
}

/* --- USP-Liste --- */
.rk-seo-usps {
    list-style: none;
    padding: 0;
    margin: 12px 0;
}

.rk-seo-usps li {
    padding: 6px 0 6px 28px;
    position: relative;
}

.rk-seo-usps li::before {
    content: "\2713";
    position: absolute;
    left: 4px;
    color: var(--rk-primary);
    font-weight: 700;
}

/* --- FAQ-Link --- */
.rk-seo-faq-link {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--rk-border);
}

.rk-seo-faq-link a {
    color: var(--rk-primary);
    font-weight: 600;
    text-decoration: none;
}

.rk-seo-faq-link a:hover {
    color: var(--rk-primary-hover);
    text-decoration: underline;
}

/* AZ.3: SEO-Karten responsive */
@media (max-width: 1024px) {
    .rk-seo-systems { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .rk-seo-systems { grid-template-columns: 1fr; }
}

/* --- Noscript Fallback --- */
.rk-noscript {
    max-width: 600px;
    margin: 40px auto;
    padding: 24px;
    text-align: center;
    background: var(--rk-bg);
    border: 1px solid var(--rk-border);
    border-radius: var(--rk-radius);
    line-height: 1.6;
}

.rk-noscript h2 {
    font-size: 1.2rem;
    color: var(--rk-primary-dark);
    margin-bottom: 12px;
}

.rk-noscript a {
    color: var(--rk-primary);
    font-weight: 600;
}

/* =====================================================================
   PHASE W – Live-Preis-Badge unter Preview
   Phase BJ: Ausgeblendet — Preis wird nur noch im Footer angezeigt.
   Element bleibt im DOM, da syncFooterBarPrice() daraus liest.
   ===================================================================== */

.rk-preview-price {
    display: none !important;
}

.rk-preview-price__label {
    opacity: 0.85;
    font-weight: 400;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.rk-preview-price__value {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.rk-preview-price__suffix {
    opacity: 0.75;
    font-size: 13px;
    font-weight: 400;
}

.rk-preview-price--loading .rk-preview-price__value {
    opacity: 0.5;
    animation: rk-price-pulse 1.5s ease-in-out infinite;
}

@keyframes rk-price-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.rk-preview-price--error {
    background: linear-gradient(135deg, #666 0%, #999 100%);
}

.rk-preview-price--inquiry {
    background: linear-gradient(135deg, #8a5a00 0%, #c48200 100%);
}

.rk-preview-price--inquiry .rk-preview-price__value {
    font-size: 16px;
    font-weight: 600;
}

.rk-preview-price__hint {
    width: 100%;
    display: block;
    font-size: 11px;
    font-weight: 400;
    opacity: 0.85;
    margin-top: -2px;
}

/* Fullscreen: Preis-Badge bleibt sichtbar */
#regal-konfigurator.rk-planer-fullscreen .rk-preview-price {
    position: relative;
    z-index: 10001;
}

/* =====================================================================
   PHASE X – Alternativen-Dropdown in Step 2
   ===================================================================== */

.rk-alternatives-wrap {
    margin-top: 8px;
    grid-column: 1 / -1;
}

.rk-alternatives-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--rk-primary-dark);
    margin-bottom: 4px;
}

.rk-alternatives-select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--rk-border);
    border-radius: var(--rk-radius);
    background: #fff;
    font-family: var(--rk-font);
    font-size: 0.85rem;
    color: var(--rk-text);
    cursor: pointer;
    transition: border-color 0.2s;
    appearance: auto;
}

.rk-alternatives-select:hover {
    border-color: var(--rk-primary);
}

.rk-alternatives-select:focus {
    border-color: var(--rk-primary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(var(--rk-primary-rgb), 0.15);
}

.rk-alternatives-select option {
    padding: 4px 8px;
}

/* ===== Tooltip-System (Phase AG) ===== */
/* 2026-04-04 Copilot – Tooltip-System analog TsKuehlzellenPlaner */

.rk-tooltip-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 5px;
    vertical-align: middle;
    color: var(--rk-primary);
    opacity: 0.65;
    cursor: help;
    transition: opacity 0.15s, transform 0.15s;
    flex-shrink: 0;
}
.rk-tooltip-trigger:hover {
    opacity: 1;
    transform: scale(1.15);
}
.rk-tooltip-trigger svg {
    display: block;
}

/* Phase AL.2: Tooltip-Icon weiss auf aktivem Toggle-Button */
.rk-seg-btn--active .rk-tooltip-trigger {
    color: #fff;
    opacity: 0.85;
}
.rk-load-segment__btn--active .rk-tooltip-trigger {
    color: #fff;
    opacity: 0.85;
}

/* Card-Tooltip (oben rechts auf System-/Shape-Cards) */
.rk-card-tooltip {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rk-primary);
    opacity: 0.5;
    cursor: help;
    transition: opacity 0.15s, transform 0.15s;
    z-index: 2;
}
.rk-card-tooltip:hover {
    opacity: 1;
    transform: scale(1.15);
}

/* Fixed-Tooltip Popup */
.rk-tooltip-fixed {
    position: fixed;
    z-index: 10000;
    background: #fff;
    border: 1px solid var(--rk-border);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
    padding: 10px 12px;
    max-width: 260px;
    pointer-events: none;
    animation: rkTooltipIn 0.15s ease-out;
}
.rk-tooltip-fixed__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--rk-text);
    margin-bottom: 4px;
}
.rk-tooltip-fixed__text {
    font-size: 12px;
    line-height: 1.45;
    color: #555;
}
@keyframes rkTooltipIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ===== Phase BN: Persistente Footer-Bar ===== */
.rk-footer-bar {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    /* Phase BJ: Responsive Einrueckung — 240px bei grossen Screens, 0 bei schmalen */
    padding: 10px clamp(16px, 10vw, 240px);
    background: #fff;
    border-top: 2px solid var(--rk-primary);
    box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
}
.rk-footer-bar.rk-hidden { display: none; }

/* Zurück / Weiter Buttons */
.rk-footer-bar__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border: none;
    border-radius: var(--rk-radius);
    font-family: var(--rk-font);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
    white-space: nowrap;
}
.rk-footer-bar__btn:disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}
.rk-footer-bar__btn--back {
    background: transparent !important;
    color: var(--rk-primary-dark) !important;
    border: 2px solid var(--rk-border) !important;
}
.rk-footer-bar__btn--back:hover:not(:disabled) {
    background: #eaf0f5 !important;
    border-color: var(--rk-primary) !important;
    color: var(--rk-primary) !important;
}
.rk-footer-bar__btn--next {
    background: var(--rk-primary) !important;
    color: #fff !important;
    border: 2px solid var(--rk-primary) !important;
}
.rk-footer-bar__btn--next:hover:not(:disabled) {
    background: var(--rk-primary-hover) !important;
    border-color: var(--rk-primary-hover) !important;
}
.rk-footer-bar__btn--next.rk-hidden { display: none; }

/* CTA-Button: Warenkorb (blau) oder Anfrage (orange) */
.rk-footer-bar__btn--cta {
    gap: 8px;
    min-width: 160px;
    justify-content: center;
}
.rk-footer-bar__btn--cta.rk-hidden { display: none; }
.rk-footer-bar__btn--cta svg { flex-shrink: 0; }
.rk-footer-bar__btn--cta-cart {
    background: var(--rk-primary-dark) !important;
    color: #fff !important;
    border: 2px solid var(--rk-primary-dark) !important;
}
.rk-footer-bar__btn--cta-cart:hover:not(:disabled) {
    background: var(--rk-primary) !important;
    border-color: var(--rk-primary) !important;
}
.rk-footer-bar__btn--cta-inquiry {
    background: var(--rk-accent);
    color: #fff;
}
.rk-footer-bar__btn--cta-inquiry:hover:not(:disabled) {
    background: #e05e00;
}

/* Center: Laden + Speichern + Preis */
.rk-footer-bar__center {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    justify-content: center;
    min-width: 0;
}
.rk-footer-bar__action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    background: transparent;
    border: 1px solid var(--rk-border);
    border-radius: var(--rk-radius);
    font-family: var(--rk-font);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--rk-text);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.rk-footer-bar__action:hover {
    background: var(--rk-bg);
    border-color: var(--rk-primary);
    color: var(--rk-primary);
}
.rk-footer-bar__action svg { flex-shrink: 0; }

/* Preis-Anzeige in Footer-Bar */
.rk-footer-bar__price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    padding: 0 8px;
    white-space: nowrap;
}
.rk-footer-bar__price.rk-hidden { display: none; }
.rk-footer-bar__price-label {
    font-size: 0.82rem;
    font-weight: 400;
    color: #555;
}
.rk-footer-bar__price-value {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--rk-primary-dark);
    transition: opacity 0.3s ease;
    min-width: 60px;
    display: inline-block;
}
.rk-footer-bar__price-suffix {
    font-size: 0.78rem;
    color: #777;
}
/* Phase BP.3: Sanftes Dimmen statt Pulse — Label/Suffix bleiben sichtbar */
.rk-footer-bar__price--loading .rk-footer-bar__price-value {
    opacity: 0.45;
    transition: opacity 0.3s ease;
}
.rk-footer-bar__price--loading .rk-footer-bar__price-suffix {
    opacity: 0.45;
    transition: opacity 0.3s ease;
}
.rk-footer-bar__price--loading .rk-footer-bar__price-label {
    opacity: 0.45;
    transition: opacity 0.3s ease;
}

/* Responsive: Mobile ≤600px */
@media (max-width: 600px) {
    .rk-footer-bar {
        padding: 8px 10px;
        gap: 4px;
    }
    .rk-footer-bar__btn {
        padding: 8px 12px;
        font-size: 0.82rem;
    }
    .rk-footer-bar__btn--cta {
        min-width: 130px;
        font-size: 0.8rem;
    }
    .rk-footer-bar__action-label { font-size: 0.72rem; }
    .rk-footer-bar__action { padding: 6px 8px; gap: 3px; }
    .rk-footer-bar__center { gap: 6px; overflow: hidden; }
    .rk-footer-bar__price-value { font-size: 1rem; }
    /* Preis-Label und Suffix im Footer ausblenden — zu eng */
    .rk-footer-bar__price-label { display: none; }
    .rk-footer-bar__price-suffix { display: none; }

    /* Step-4 Content: BOM-Tabelle enger */
    .rk-bom-table th { padding: 6px 8px; font-size: 0.8rem; }
    .rk-bom-table td { padding: 6px 8px; font-size: 0.82rem; }

    /* Step-4 Content: Content-Padding reduzieren */
    .rk-content { padding: 14px 12px; }

    /* Step-4: Inquiry-Button full-width */
    .rk-btn--inquiry { width: 100%; justify-content: center; }

    /* Step-4: Perf-Items umbrechen bei langem Label */
    .rk-perf__item { flex-wrap: wrap; }
}

/* Responsive: Tablet ≤768px — Preis/Cart zentral statt rechts */
@media (max-width: 768px) {
    .rk-price-section { text-align: center; }
    .rk-price-display { align-items: center; }
    .rk-cart-section { align-items: stretch; }
    .rk-btn--cart { width: 100%; justify-content: center; }
    .rk-btn--cart-width { width: 100%; min-width: 0; }
    .rk-export-actions { justify-content: stretch; }
    .rk-export-actions .rk-btn--ghost { flex: 1; justify-content: center; }
}

/* CP.1: Responsive: Schmale Screens ≤700px — Footer-Bar 2-zeilig */
@media (max-width: 700px) {
    .rk-footer-bar {
        flex-wrap: wrap;
        justify-content: center;
        padding: 6px 10px;
        gap: 6px;
    }
    /* Zeile 1: Zurueck + Weiter + CTA nebeneinander */
    .rk-footer-bar__btn--back { order: 1; }
    .rk-footer-bar__btn--next { order: 2; }
    .rk-footer-bar__btn--cta  { order: 3; min-width: 0; flex: 1; }
    /* Zeile 2: Center (Neu/Laden/Speichern/Preis) volle Breite */
    .rk-footer-bar__center {
        order: 4;
        flex-basis: 100%;
        justify-content: center;
        padding-top: 2px;
        border-top: 1px solid rgba(0,0,0,0.06);
    }
}
/* Sehr schmale Screens ≤480px — Action-Labels ausblenden */
@media (max-width: 480px) {
    .rk-footer-bar__action-label { display: none; }
    .rk-footer-bar__action { padding: 6px 8px; }
}

/* Fullscreen: Footer-Bar ebenfalls sticky */
#regal-konfigurator.rk-planer-fullscreen .rk-footer-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
}

/* ===== Phase CD: UX-Feinschliff Step 2 + Mobile ===== */

/* CD.1: Accordion-Header immer blau hinterlegt (auch collapsed) */
.rk-row-form__header {
    background: var(--rk-bg);
}

/* CD.2: Eckverbindung/Maß-opt Buttons — Mobile responsive */
@media (max-width: 600px) {
    .rk-toggles-row { gap: 6px; }
    .rk-toggles-row__col { flex: 1 1 100%; }
    .rk-seg-btn { padding: 5px 6px; font-size: 0.72rem; }
}

/* CD.3: Footer-Bar — Mobile Speichern/Laden Labels ausblenden, Preis in neue Zeile */
@media (max-width: 600px) {
    .rk-footer-bar__action-label { display: none; }
    .rk-footer-bar__center {
        flex-wrap: wrap;
        justify-content: center;
    }
    .rk-footer-bar__price {
        flex-basis: 100%;
        justify-content: center;
        padding-top: 2px;
    }
}

/* 2026-04-13 Copilot – ShopVote-Badge im Konfigurator-Bereich ausblenden, sichtbar sobald SEO-Content in Viewport */
body.is-ctl-regalplaner #sv-rbadge-box {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .3s ease !important;
}
body.is-ctl-regalplaner.sv-badge-show #sv-rbadge-box {
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 110 !important; /* ueber .rk-footer-bar (z-index:100) */
}