/*
 * ps-configurator.css – Plug & Shine Gartenlicht-Planer (Premium-Ausbau)
 * ======================================================================
 * Vollbreites, immersives, eigenständiges Design (Präfix .ps-). Keine externen
 * Schriften/Bilder/Frameworks. "Night Garden": tiefes Nachtblau mit warmen
 * Lichtakzenten. Alles gekapselt, responsiv und tastaturbedienbar.
 */

.ps-app {
    --ps-night:    #0a1626;
    --ps-night-2:  #102a44;
    --ps-night-3:  #14365a;
    --ps-ink:      #19283a;
    --ps-ink-soft: #5c6f82;
    --ps-line:     #e6edf4;
    --ps-line-2:   #d3deea;
    --ps-bg:       #f4f7fb;
    --ps-panel:    #ffffff;
    --ps-amber:    #ffb24d;
    --ps-amber-2:  #f5921e;
    --ps-glow:     #ffd79a;
    --ps-teal:     #34b3a0;
    --ps-ok:       #1f9d57;
    --ps-warn:     #d9810a;
    --ps-err:      #d6453d;
    --ps-radius:   18px;
    --ps-radius-s: 12px;
    --ps-shadow:   0 24px 60px -28px rgba(10,22,38,.45);
    --ps-shadow-s: 0 10px 26px -16px rgba(10,22,38,.42);
    --ps-ease:     cubic-bezier(.4,.2,.2,1);

    /* Vollbreiten-Ausbruch aus dem zentrierten Shop-Container */
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow-x: clip;

    color: var(--ps-ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    background:
        radial-gradient(1200px 480px at 78% -8%, #eaf1f9 0%, rgba(244,247,251,0) 60%),
        var(--ps-bg);
    padding-bottom: 72px;
}
.ps-app *, .ps-app *::before, .ps-app *::after { box-sizing: border-box; }
.ps-app button { font-family: inherit; }
.ps-app :focus-visible { outline: 3px solid rgba(245,146,30,.55); outline-offset: 2px; border-radius: 6px; }

.ps-wrap { max-width: 1500px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 52px); }

/* ============================ HERO ============================ */
.ps-hero {
    position: relative; overflow: hidden; isolation: isolate;
    border-radius: 28px;
    margin: clamp(18px, 3vw, 34px) 0 clamp(20px, 3vw, 32px);
    background:
        radial-gradient(120% 150% at 82% -20%, #1d4a6e 0%, var(--ps-night-2) 42%, var(--ps-night) 78%, #06101d 100%);
    color: #eaf2fb;
    box-shadow: var(--ps-shadow);
}
.ps-hero-glow { position: absolute; inset: 0; z-index: 0; }
.ps-orb { position: absolute; border-radius: 50%; filter: blur(22px); opacity: .6;
    background: radial-gradient(circle at 50% 40%, var(--ps-glow), transparent 70%); }
.ps-orb-1 { width: 300px; height: 300px; top: -70px; right: 6%; opacity: .7; animation: ps-float 9s var(--ps-ease) infinite; }
.ps-orb-2 { width: 180px; height: 180px; bottom: -50px; right: 26%; animation: ps-float 11s var(--ps-ease) infinite reverse; }
.ps-orb-3 { width: 150px; height: 150px; top: 36%; left: -40px; opacity: .35; animation: ps-float 13s var(--ps-ease) infinite; }
.ps-stars {
    position: absolute; inset: 0; opacity: .5;
    background-image:
        radial-gradient(1.4px 1.4px at 20% 30%, #fff, transparent),
        radial-gradient(1.4px 1.4px at 65% 20%, #ffe9c6, transparent),
        radial-gradient(1.2px 1.2px at 80% 60%, #fff, transparent),
        radial-gradient(1.2px 1.2px at 35% 70%, #cfe4ff, transparent),
        radial-gradient(1.6px 1.6px at 50% 45%, #fff, transparent),
        radial-gradient(1.2px 1.2px at 90% 35%, #fff, transparent);
}
@keyframes ps-float { 0%,100% { transform: translateY(0) translateX(0); } 50% { transform: translateY(-18px) translateX(8px); } }

.ps-hero-inner { position: relative; z-index: 1; padding: clamp(28px, 5.2vw, 72px); max-width: 820px; }
.ps-eyebrow { display: inline-flex; align-items: center; gap: 9px; text-transform: uppercase;
    letter-spacing: .15em; font-size: .76rem; font-weight: 800; color: var(--ps-glow); margin: 0 0 18px;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); padding: 7px 14px; border-radius: 999px; }
.ps-eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ps-amber); box-shadow: 0 0 10px 1px var(--ps-amber); }
.ps-hero-title { font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.08; margin: 0 0 18px; font-weight: 800; letter-spacing: -.015em; }
.ps-hero-lead { font-size: clamp(1.02rem, 1.45vw, 1.2rem); color: #c4d6e8; margin: 0 0 30px; max-width: 660px; }
.ps-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.ps-hero-usps { list-style: none; display: flex; flex-wrap: wrap; gap: 18px; margin: 0; padding: 0; }
.ps-hero-usps li { position: relative; padding-left: 24px; font-size: .92rem; color: #b6cadd; font-weight: 600; }
.ps-hero-usps li::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px; border-radius: 50%; background: rgba(52,179,160,.22);
    box-shadow: inset 0 0 0 2px var(--ps-teal); }
.ps-hero-usps li::after { content: ""; position: absolute; left: 5px; top: 50%; width: 4px; height: 7px;
    border: solid var(--ps-teal); border-width: 0 2px 2px 0; transform: translateY(-65%) rotate(45deg); }

/* ============================ BUTTONS ============================ */
.ps-btn { appearance: none; cursor: pointer; border: 0; font-weight: 700; border-radius: 999px;
    padding: 13px 24px; transition: transform .14s var(--ps-ease), box-shadow .14s var(--ps-ease), background .2s;
    display: inline-flex; align-items: center; gap: 9px; line-height: 1.1; }
.ps-btn:active { transform: translateY(1px) scale(.99); }
.ps-btn-lg { padding: 16px 30px; font-size: 1.05rem; }
.ps-btn-sm { padding: 9px 18px; font-size: .9rem; }
.ps-btn-primary { background: linear-gradient(135deg, var(--ps-amber) 0%, var(--ps-amber-2) 100%); color: #3a2406;
    box-shadow: 0 14px 30px -10px rgba(245,146,30,.7); }
.ps-btn-primary:hover { box-shadow: 0 18px 38px -10px rgba(245,146,30,.9); transform: translateY(-1px); }
.ps-btn-ghost { background: rgba(255,255,255,.1); color: #eaf2fb; border: 1px solid rgba(255,255,255,.24); }
.ps-btn-ghost:hover { background: rgba(255,255,255,.16); }
.ps-btn-outline { background: var(--ps-panel); color: var(--ps-ink); border: 1.5px solid var(--ps-line-2); }
.ps-btn-outline:hover { border-color: var(--ps-amber-2); color: var(--ps-amber-2); }
.ps-btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }

/* ============================ STEPS ============================ */
.ps-steps { display: flex; gap: 10px; margin: 0 0 26px; flex-wrap: nowrap; }
.ps-step-pill { display: flex; align-items: center; gap: 11px; padding: 13px 18px; border-radius: 14px;
    background: var(--ps-panel); border: 1px solid var(--ps-line); color: var(--ps-ink-soft);
    font-size: .96rem; font-weight: 600; cursor: pointer; flex: 1 1 0; min-width: 0;
    transition: border-color .2s, color .2s, box-shadow .2s, transform .15s; }
.ps-step-pill:hover:not(.is-locked) { transform: translateY(-1px); }
.ps-step-num { width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center;
    font-size: .85rem; font-weight: 700; background: #eef3f9; color: var(--ps-ink-soft); transition: .2s; }
.ps-step-num svg { width: 15px; height: 15px; }
.ps-step-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-step-pill.is-active { border-color: var(--ps-amber); color: var(--ps-ink); box-shadow: 0 10px 26px -16px rgba(245,146,30,.95); }
.ps-step-pill.is-active .ps-step-num { background: linear-gradient(135deg, var(--ps-amber), var(--ps-amber-2)); color: #3a2406; }
.ps-step-pill.is-done .ps-step-num { background: var(--ps-ok); color: #fff; }
.ps-step-pill.is-locked { opacity: .5; cursor: not-allowed; }

/* ============================ LAYOUT ============================ */
.ps-layout { display: grid; grid-template-columns: minmax(0,1fr) 392px; gap: 30px; align-items: start; }
.ps-main { min-height: 360px; outline: none; }
.ps-loading { color: var(--ps-ink-soft); padding: 80px 0; text-align: center; }

.ps-section-head { margin: 2px 0 22px; }
.ps-section-head h3 { font-size: clamp(1.4rem, 2.1vw, 1.7rem); margin: 0 0 7px; font-weight: 800; letter-spacing: -.015em; }
.ps-section-head p { margin: 0; color: var(--ps-ink-soft); max-width: 720px; font-size: 1.02rem; }

/* ===== Bereich-Auswahl (Schritt 1) ===== */
.ps-zone-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 16px; }
.ps-zone { position: relative; border: 1.5px solid var(--ps-line); border-radius: var(--ps-radius);
    background: var(--ps-panel); padding: 22px; cursor: pointer; text-align: left;
    transition: border-color .18s, box-shadow .18s, transform .14s var(--ps-ease); overflow: hidden; }
.ps-zone::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 80% at 100% 0%, rgba(245,146,30,.06), transparent 60%); opacity: 0; transition: .2s; }
.ps-zone:hover { border-color: var(--ps-line-2); box-shadow: var(--ps-shadow-s); transform: translateY(-3px); }
.ps-zone.is-selected { border-color: var(--ps-amber); box-shadow: 0 16px 36px -22px rgba(245,146,30,.9); }
.ps-zone.is-selected::after { opacity: 1; }
.ps-zone-ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 15px;
    background: linear-gradient(135deg, #fff4e2, #ffe6c0); color: var(--ps-amber-2); transition: .2s; }
.ps-zone.is-selected .ps-zone-ic { background: linear-gradient(135deg, var(--ps-amber), var(--ps-amber-2)); color: #fff; box-shadow: 0 8px 20px -8px rgba(245,146,30,.7); }
.ps-zone-ic svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ps-zone-name { display: block; font-weight: 700; font-size: 1.12rem; }
.ps-zone-claim { display: block; font-size: .9rem; color: var(--ps-ink-soft); margin-top: 6px; }
.ps-zone-check { position: absolute; top: 16px; right: 16px; width: 26px; height: 26px; border-radius: 50%;
    border: 2px solid var(--ps-line-2); display: grid; place-items: center; transition: .15s; background: #fff; }
.ps-zone.is-selected .ps-zone-check { background: var(--ps-amber); border-color: var(--ps-amber); }
.ps-zone-check svg { width: 14px; height: 14px; stroke: #fff; stroke-width: 3.2; fill: none; opacity: 0; transition: .15s; }
.ps-zone.is-selected .ps-zone-check svg { opacity: 1; }

/* ===== Abschnitte (Schritt 2) ===== */
.ps-abschnitt { border: 1px solid var(--ps-line); border-radius: var(--ps-radius); margin-bottom: 22px;
    background: var(--ps-panel); overflow: hidden; box-shadow: var(--ps-shadow-s); }
.ps-ab-head { display: flex; align-items: center; gap: 14px; padding: 17px 20px;
    background: linear-gradient(180deg, #fbfdff, #f4f8fc); border-bottom: 1px solid var(--ps-line); }
.ps-ab-ic { width: 40px; height: 40px; border-radius: 11px; flex: 0 0 auto; display: grid; place-items: center;
    background: linear-gradient(135deg, var(--ps-night-2), var(--ps-night-3)); color: var(--ps-glow); }
.ps-ab-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ps-ab-titles { flex: 1; min-width: 0; }
.ps-ab-title { font-weight: 800; font-size: 1.1rem; }
.ps-ab-sub { font-size: .84rem; color: var(--ps-ink-soft); }
.ps-ab-remove { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--ps-line-2);
    background: #fff; color: var(--ps-ink-soft); cursor: pointer; display: grid; place-items: center; transition: .15s; }
.ps-ab-remove:hover { border-color: var(--ps-err); color: var(--ps-err); }
.ps-ab-remove svg { width: 16px; height: 16px; }

.ps-prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; padding: 20px; }
.ps-prod { border: 1px solid var(--ps-line); border-radius: 15px; overflow: hidden; background: var(--ps-panel);
    display: flex; flex-direction: column; transition: border-color .18s, box-shadow .18s, transform .14s; }
.ps-prod:hover { border-color: var(--ps-line-2); box-shadow: var(--ps-shadow-s); transform: translateY(-2px); }
.ps-prod.is-active { border-color: var(--ps-amber); box-shadow: 0 14px 32px -20px rgba(245,146,30,.9); }
.ps-prod-img { aspect-ratio: 4 / 3; background: #f1f5f9 center/contain no-repeat; position: relative; }
.ps-prod-img .ps-noimg { position: absolute; inset: 0; display: grid; place-items: center; color: #aebccb; font-size: .8rem; }
.ps-prod-badge { position: absolute; top: 9px; left: 9px; background: rgba(10,22,38,.85); color: #fff;
    font-size: .72rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.ps-prod-badge.is-sim { background: #6d28d9; }
.ps-prod-qbadge { position: absolute; top: 9px; right: 9px; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px;
    background: var(--ps-amber-2); color: #fff; font-weight: 800; font-size: .82rem; display: none; align-items: center; justify-content: center; box-shadow: 0 6px 16px -6px rgba(245,146,30,.9); }
.ps-prod.is-active .ps-prod-qbadge { display: inline-flex; }
.ps-prod-body { padding: 13px 14px 15px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.ps-prod-name { font-weight: 700; font-size: .96rem; line-height: 1.3; }
.ps-prod-specs { display: flex; flex-wrap: wrap; gap: 6px; }
.ps-chip { font-size: .73rem; font-weight: 600; background: #eef3f9; color: #5c6f82; padding: 3px 9px; border-radius: 7px; }
.ps-chip-w { background: #fff2e0; color: var(--ps-amber-2); }
.ps-prod-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ps-prod-price { font-weight: 800; font-size: 1.04rem; }
.ps-prod-price small { font-weight: 600; color: var(--ps-ink-soft); font-size: .72rem; }

.ps-qty { display: inline-flex; align-items: center; border: 1px solid var(--ps-line-2); border-radius: 999px; overflow: hidden; background: #fff; }
.ps-qty button { width: 32px; height: 32px; border: 0; background: #f4f7fb; cursor: pointer; font-size: 1.15rem; line-height: 1;
    color: var(--ps-ink); display: grid; place-items: center; transition: .15s; }
.ps-qty button:hover { background: #e9f0f7; color: var(--ps-amber-2); }
.ps-qty input { width: 40px; text-align: center; border: 0; font: inherit; font-weight: 800; padding: 5px 0; -moz-appearance: textfield; background: #fff; }
.ps-qty input::-webkit-outer-spin-button, .ps-qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.ps-prod.is-active .ps-qty { border-color: var(--ps-amber); }

/* ===== Abstandsplanung (Slider) ===== */
.ps-distance { border-top: 1px dashed var(--ps-line-2); padding: 18px 20px 6px; background: #fbfdff; }
.ps-distance-head { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .96rem; margin-bottom: 4px; }
.ps-distance-head svg { width: 18px; height: 18px; color: var(--ps-amber-2); }
.ps-distance-sub { font-size: .83rem; color: var(--ps-ink-soft); margin-bottom: 16px; }
.ps-sliders { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.ps-slider label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-weight: 600; font-size: .9rem; margin-bottom: 9px; }
.ps-slider .ps-slider-val { font-weight: 800; font-size: 1.05rem; color: var(--ps-amber-2); white-space: nowrap; }
.ps-slider .ps-slider-hint { display: block; font-size: .78rem; color: var(--ps-ink-soft); margin-top: 8px; }
.ps-range { -webkit-appearance: none; appearance: none; width: 100%; height: 7px; border-radius: 999px; outline-offset: 4px;
    background: linear-gradient(90deg, var(--ps-amber) var(--ps-fill,30%), #e6edf4 var(--ps-fill,30%)); }
.ps-range::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; cursor: pointer;
    background: #fff; border: 3px solid var(--ps-amber-2); box-shadow: 0 4px 12px -3px rgba(245,146,30,.7); transition: transform .12s; }
.ps-range::-webkit-slider-thumb:hover { transform: scale(1.12); }
.ps-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; cursor: pointer; background: #fff; border: 3px solid var(--ps-amber-2); }
.ps-range::-moz-range-track { height: 7px; border-radius: 999px; background: #e6edf4; }

/* ===== "Abschnitt hinzufügen" ===== */
.ps-add-section { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
    border: 1.5px dashed var(--ps-line-2); border-radius: var(--ps-radius); background: #fbfdff; color: var(--ps-ink-soft);
    padding: 18px; font-weight: 700; cursor: pointer; transition: .18s; margin-bottom: 8px; }
.ps-add-section:hover { border-color: var(--ps-amber); color: var(--ps-amber-2); background: #fff8ef; }
.ps-add-section svg { width: 20px; height: 20px; }
.ps-add-pop { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 10px; padding: 16px;
    border: 1px solid var(--ps-line); border-radius: var(--ps-radius); background: #fff; margin-bottom: 18px; }
.ps-add-pop button { border: 1px solid var(--ps-line); border-radius: 11px; background: #fbfdff; padding: 12px;
    cursor: pointer; display: flex; align-items: center; gap: 9px; font-weight: 600; transition: .15s; }
.ps-add-pop button:hover { border-color: var(--ps-amber); color: var(--ps-amber-2); }
.ps-add-pop button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; }

.ps-empty-hint { color: var(--ps-ink-soft); font-size: .9rem; padding: 8px 20px 18px; }
.ps-auto-note { font-size: .85rem; color: var(--ps-ink-soft); background: #f6f9fc; border: 1px dashed var(--ps-line-2);
    border-radius: 11px; padding: 12px 15px; }

/* ===== Technik (Schritt 3) ===== */
.ps-tech-grid { display: grid; gap: 24px; }
.ps-tech-block > strong { display: block; font-size: 1.05rem; margin-bottom: 4px; }
.ps-tech-block > .ps-tech-sub { color: var(--ps-ink-soft); font-size: .9rem; margin-bottom: 12px; }
.ps-option-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); gap: 12px; }
.ps-opt { border: 1.5px solid var(--ps-line); border-radius: 14px; padding: 15px; cursor: pointer; background: var(--ps-panel);
    display: flex; gap: 13px; align-items: center; transition: border-color .15s, box-shadow .15s, transform .14s; }
.ps-opt:hover { border-color: var(--ps-line-2); transform: translateY(-2px); }
.ps-opt.is-selected { border-color: var(--ps-amber); box-shadow: 0 12px 28px -18px rgba(245,146,30,.9); }
.ps-opt-img { width: 58px; height: 58px; border-radius: 10px; background: #f1f5f9 center/contain no-repeat; flex: 0 0 auto; }
.ps-opt-tx { min-width: 0; }
.ps-opt-name { display: block; font-weight: 700; font-size: .94rem; }
.ps-opt-meta { display: block; font-size: .82rem; color: var(--ps-ink-soft); }
.ps-opt-price { margin-left: auto; font-weight: 800; white-space: nowrap; }

/* ============================ RAIL ============================ */
.ps-rail { position: sticky; top: 16px; }
.ps-rail-inner { background: linear-gradient(180deg, #ffffff, #fbfdff); border: 1px solid var(--ps-line);
    border-radius: 22px; padding: 20px; box-shadow: var(--ps-shadow); }
.ps-rail-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; }
.ps-rail-title { font-size: 1.18rem; margin: 0; font-weight: 800; }
.ps-rail-live { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em;
    color: var(--ps-teal); background: rgba(52,179,160,.12); padding: 4px 10px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; }
.ps-rail-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ps-teal); animation: ps-pulse 1.8s infinite; }
@keyframes ps-pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* ===== SVG-Grafik ===== */
.ps-graphic { margin: 0 0 16px; border-radius: 16px; overflow: hidden; position: relative;
    background: radial-gradient(120% 120% at 80% 0%, #163d5e 0%, var(--ps-night-2) 45%, var(--ps-night) 100%);
    border: 1px solid rgba(255,255,255,.06); min-height: 150px; }
.ps-graphic svg { display: block; width: 100%; height: auto; }
.ps-graphic-empty { color: #9fb6cc; font-size: .86rem; text-align: center; padding: 46px 18px; }
.ps-graphic-zoom { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: #cfe0f0; display: grid; place-items: center; transition: .15s; }
.ps-graphic-zoom:hover { background: rgba(255,255,255,.2); }
.ps-graphic-zoom svg { width: 15px; height: 15px; }

.ps-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-bottom: 15px; }
.ps-metric { background: #f7fafd; border: 1px solid var(--ps-line); border-radius: 13px; padding: 12px 13px; }
.ps-metric-val { font-size: 1.4rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.ps-metric-lbl { font-size: .73rem; color: var(--ps-ink-soft); margin-top: 5px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.ps-gauge { height: 7px; border-radius: 4px; background: #e9eef4; overflow: hidden; margin-top: 10px; }
.ps-gauge span { display: block; height: 100%; border-radius: 4px; transition: width .5s var(--ps-ease), background .3s; }

.ps-checks { display: flex; flex-direction: column; gap: 8px; margin-bottom: 15px; }
.ps-check { display: flex; gap: 10px; align-items: flex-start; font-size: .86rem; padding: 9px 11px; border-radius: 10px; }
.ps-check svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 1px; }
.ps-check-ok { background: #eafaf0; color: #145c33; }
.ps-check-warnung { background: #fdf3e3; color: #8a560a; }
.ps-check-fehler { background: #fdeceb; color: #8f2a23; }
.ps-check-info { background: #eef4fb; color: #2c4a63; }

.ps-rail-total { display: flex; align-items: baseline; justify-content: space-between; border-top: 2px solid var(--ps-night);
    padding-top: 14px; margin-bottom: 14px; }
.ps-rail-total .lbl { font-weight: 700; }
.ps-rail-total .val { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; }
.ps-rail-actions { display: flex; flex-direction: column; gap: 10px; }
.ps-rail-actions .ps-btn { justify-content: center; width: 100%; }
.ps-disclaimer { font-size: .72rem; color: var(--ps-ink-soft); margin: 13px 0 0; }
.ps-empty-summary { color: var(--ps-ink-soft); font-size: .9rem; text-align: center; padding: 22px 8px; }

/* ===== Stückliste (Rail + Ergebnis) ===== */
.ps-bom { margin-top: 6px; }
.ps-bom-group { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ps-ink-soft);
    font-weight: 800; margin: 14px 0 7px; }
.ps-bom-item { display: flex; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--ps-line); }
.ps-bom-thumb { width: 44px; height: 44px; border-radius: 9px; background: #f1f5f9 center/contain no-repeat; flex: 0 0 auto; border: 1px solid var(--ps-line); }
.ps-bom-main { flex: 1; min-width: 0; }
.ps-bom-name { display: block; font-size: .9rem; font-weight: 600; line-height: 1.3; }
.ps-bom-sub { display: block; font-size: .76rem; color: var(--ps-ink-soft); }
.ps-bom-price { font-weight: 700; font-size: .9rem; white-space: nowrap; }
.ps-bom-sim .ps-bom-name::after { content: "Demo"; font-size: .66rem; background: #ede9fe; color: #5b21b6; padding: 1px 7px; border-radius: 6px; margin-left: 7px; font-weight: 800; }

/* ===== Ergebnis (Schritt 4) ===== */
.ps-result-grid { display: grid; gap: 22px; }
.ps-result-card { border: 1px solid var(--ps-line); border-radius: var(--ps-radius); background: var(--ps-panel); overflow: hidden; box-shadow: var(--ps-shadow-s); }
.ps-result-card-head { display: flex; align-items: center; gap: 12px; padding: 15px 20px; background: linear-gradient(180deg,#fbfdff,#f4f8fc); border-bottom: 1px solid var(--ps-line); }
.ps-result-card-head .ps-ab-ic { width: 34px; height: 34px; }
.ps-result-card-title { font-weight: 800; }
.ps-result-card-meta { margin-left: auto; font-size: .86rem; color: var(--ps-ink-soft); font-weight: 600; }
.ps-result-card-body { padding: 8px 20px 16px; }
.ps-section-stats { display: flex; flex-wrap: wrap; gap: 18px; padding: 14px 0; color: var(--ps-ink-soft); font-size: .88rem; border-bottom: 1px solid var(--ps-line); margin-bottom: 6px; }
.ps-section-stats b { color: var(--ps-ink); }

.ps-bigplan { border-radius: var(--ps-radius); overflow: hidden; }

/* ===== Step actions ===== */
.ps-step-actions { display: flex; justify-content: space-between; gap: 14px; margin-top: 28px; }

/* ===== Toast ===== */
.ps-toast { position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%) translateY(20px);
    background: var(--ps-night); color: #fff; padding: 15px 24px; border-radius: 13px; z-index: 99999;
    box-shadow: 0 24px 60px -18px rgba(0,0,0,.5); opacity: 0; transition: .3s var(--ps-ease); max-width: 90vw; font-weight: 600; }
.ps-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }
.ps-toast.is-err { background: var(--ps-err); }
.ps-toast.is-ok { background: var(--ps-ok); }

/* Guided→Direkt-Import-Hinweis (Phase 4D, additiv) */
/* Übernahme-Hinweis als SCHWEBENDER Toast (0.19.1): position:fixed an <body>,
   nimmt keinen Platz im Seitenlayout ein → kein Versatz der Spalten, kein
   Layout-Sprung beim Schließen. Oben rechts, unter einem fixierten Header
   (top wird zur Laufzeit gesetzt); mobil fast volle Breite. */
.ps-import-banner { position: fixed; top: 18px; right: 18px; z-index: 6000;
    display: flex; align-items: flex-start; gap: 10px; max-width: 430px;
    padding: 13px 44px 13px 16px; border-radius: 12px; font-size: 14.5px; line-height: 1.45;
    background: #e7f4ee; border: 1px solid #b7ddca; color: #17564a;
    box-shadow: 0 14px 34px -12px rgba(15, 40, 32, .35);
    animation: ps-import-in .28s ease; }
.ps-import-banner.is-err { background: #fbeeea; border-color: #e7c7bd; color: #a23b28; }
.ps-import-banner.is-leaving { opacity: 0; transform: translateY(-8px); transition: opacity .25s ease, transform .25s ease; }
@keyframes ps-import-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) { .ps-import-banner { left: 12px; right: 12px; max-width: none; } }
@media (prefers-reduced-motion: reduce) { .ps-import-banner { animation: none; } .ps-import-banner.is-leaving { transition: none; } }
.ps-import-banner-x { position: absolute; top: 8px; right: 10px; width: 26px; height: 26px; border: none;
    background: none; cursor: pointer; font-size: 20px; line-height: 1; color: inherit; opacity: .7; border-radius: 8px; }
.ps-import-banner-x:hover { opacity: 1; }
.ps-import-banner-x:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* ===== Modal (Großansicht Grafik) ===== */
/* WICHTIG: Modals werden an <body> angehängt – AUSSERHALB von .ps-app. Damit
   var(--ps-*) (z. B. ausgewählter Picker-Button = var(--ps-ok)) darin auflöst,
   wird der komplette Token-Satz hier erneut definiert (scoped, kein globaler Eingriff). */
.ps-modal {
    --ps-night: #0a1626; --ps-night-2: #102a44; --ps-night-3: #14365a;
    --ps-ink: #19283a; --ps-ink-soft: #5c6f82; --ps-line: #e6edf4; --ps-line-2: #d3deea;
    --ps-bg: #f4f7fb; --ps-panel: #ffffff; --ps-amber: #ffb24d; --ps-amber-2: #f5921e;
    --ps-glow: #ffd79a; --ps-teal: #34b3a0; --ps-ok: #1f9d57; --ps-warn: #d9810a; --ps-err: #d6453d;
    --ps-radius: 18px; --ps-radius-s: 12px;
    --ps-shadow: 0 24px 60px -28px rgba(10,22,38,.45); --ps-shadow-s: 0 10px 26px -16px rgba(10,22,38,.42);
    --ps-ease: cubic-bezier(.4,.2,.2,1);
    position: fixed; inset: 0; z-index: 99998; background: rgba(6,14,24,.78); display: none;
    align-items: center; justify-content: center; padding: 24px; backdrop-filter: blur(4px); overflow-y: auto; }
.ps-modal.is-open { display: flex; }
/* Modal auf den Viewport begrenzen; gescrollt wird NUR im Inhaltsbereich (.ps-modal-content). */
.ps-modal-box { position: relative; background: var(--ps-night); border-radius: 20px; padding: 16px; max-width: 980px; width: 100%;
    max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
    display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--ps-shadow); }
.ps-modal-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: 2px 2px 4px; }
.ps-modal-close { position: absolute; top: 12px; right: 12px; z-index: 4; width: 36px; height: 36px; border-radius: 9px; border: 1px solid rgba(255,255,255,.2);
    background: rgba(255,255,255,.1); color: #fff; cursor: pointer; font-size: 1.2rem; line-height: 1; }

.ps-mobilebar { display: none; }

/* ============================ RESPONSIVE ============================ */
@media (max-width: 1080px) {
    .ps-layout { grid-template-columns: minmax(0,1fr) 340px; gap: 22px; }
}
@media (max-width: 940px) {
    .ps-layout { grid-template-columns: 1fr; }
    .ps-rail { position: static; }
    .ps-rail-inner { box-shadow: var(--ps-shadow-s); }
    /* Rail rückt nach oben (Grafik bleibt sichtbar), Aktionen in Mobilleiste */
    .ps-rail { order: -1; margin-bottom: 18px; }
}
@media (max-width: 720px) {
    .ps-steps { gap: 7px; }
    .ps-step-pill { padding: 11px; justify-content: center; }
    .ps-step-label { display: none; }
    .ps-sliders { grid-template-columns: 1fr; gap: 18px; }
    .ps-prod-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); padding: 16px; gap: 12px; }
    .ps-zone-grid { grid-template-columns: 1fr 1fr; }
    .ps-mobilebar { display: flex; align-items: center; gap: 12px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 500;
        background: rgba(10,22,38,.97); color: #fff; padding: 11px 16px; backdrop-filter: blur(10px); box-shadow: 0 -8px 30px -10px rgba(0,0,0,.5); }
    .ps-mobilebar-plan { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; border: 0; background: none; color: #fff; cursor: pointer; padding: 0; }
    .ps-mobilebar-plan span { font-size: .72rem; color: #9fb6cc; }
    .ps-mobilebar-plan strong { font-size: 1.15rem; }
    .ps-mobilebar .ps-btn { margin-left: auto; min-height: 44px; }
    .ps-mobilebar-plan { min-height: 44px; justify-content: center; }
    .ps-app { padding-bottom: 92px; }
}
@media (max-width: 420px) {
    .ps-zone-grid { grid-template-columns: 1fr; }
    .ps-metrics { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .ps-app *, .ps-app *::before, .ps-app *::after { transition: none !important; animation: none !important; }
}

/* =====================================================================
 * UX/KABEL/BILDER-AUSBAU – Intro, Inspiration, Strecke, Picker, Lightbox
 * ===================================================================== */

/* ---- So funktioniert's ---- */
.ps-howto { margin: 6px 0 30px; }
.ps-howto-head { margin-bottom: 20px; }
.ps-howto-head h3 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); margin: 0 0 6px; font-weight: 800; letter-spacing: -.015em; }
.ps-howto-head p { margin: 0; color: var(--ps-ink-soft); max-width: 720px; font-size: 1.02rem; }
.ps-howto-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 20px; }
.ps-howto-step { display: flex; gap: 14px; align-items: flex-start; background: var(--ps-panel); border: 1px solid var(--ps-line); border-radius: var(--ps-radius); padding: 18px; }
.ps-howto-ic { width: 46px; height: 46px; border-radius: 12px; flex: 0 0 auto; display: grid; place-items: center; background: linear-gradient(135deg, var(--ps-night-2), var(--ps-night-3)); color: var(--ps-glow); }
.ps-howto-ic svg { width: 24px; height: 24px; }
.ps-howto-tx strong { display: block; font-weight: 700; margin-bottom: 4px; }
.ps-howto-tx span { color: var(--ps-ink-soft); font-size: .9rem; }
.ps-howto-svg { background: radial-gradient(120% 120% at 80% 0%, #163d5e, var(--ps-night)); border-radius: var(--ps-radius); padding: 18px 20px; }
.ps-howto-svg svg { display: block; width: 100%; height: auto; }

/* ---- Inspiration ---- */
.ps-inspo { margin: 0 0 30px; }
.ps-inspo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.ps-inspo-tile { position: relative; aspect-ratio: 4 / 3; border: 0; border-radius: var(--ps-radius); overflow: hidden; cursor: pointer;
    background: var(--ps-night-2) center/cover no-repeat; color: #fff; text-align: left; display: flex; flex-direction: column; justify-content: flex-end;
    padding: 16px; transition: transform .16s var(--ps-ease), box-shadow .16s; box-shadow: var(--ps-shadow-s); }
.ps-inspo-tile:hover { transform: translateY(-3px); box-shadow: var(--ps-shadow); }
.ps-inspo-ic { position: absolute; top: 14px; left: 14px; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
    background: rgba(10,22,38,.5); backdrop-filter: blur(4px); color: var(--ps-glow); }
.ps-inspo-ic svg { width: 20px; height: 20px; }
.ps-inspo-label { font-weight: 800; font-size: 1.12rem; position: relative; z-index: 1; }
.ps-inspo-go { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 700; color: var(--ps-glow); margin-top: 4px; position: relative; z-index: 1; }

/* ---- Strecke (Schritt 2) ---- */
.ps-strecke { padding: 8px 20px 18px; }
.ps-stop { display: flex; align-items: center; gap: 13px; border: 1px solid var(--ps-line); border-radius: 14px; background: var(--ps-panel); padding: 11px 13px; }
.ps-stop-trafo { background: linear-gradient(135deg, #14243a, #0e2034); color: #eaf2fb; border-color: #14365a; }
.ps-stop-trafo .ps-stop-ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: rgba(255,178,77,.16); color: var(--ps-amber); font-size: 1.2rem; flex: 0 0 auto; }
.ps-stop-trafo .ps-stop-tx strong { color: #fff; }
.ps-stop-trafo .ps-stop-tx span { color: #9fb6cc; }
.ps-stop-light { box-shadow: var(--ps-shadow-s); }
.ps-stop-thumb { width: 46px; height: 46px; border-radius: 10px; background: #f1f5f9 center/contain no-repeat; flex: 0 0 auto; border: 1px solid var(--ps-line); }
.ps-stop-tx { flex: 1; min-width: 0; }
.ps-stop-tx strong { display: block; font-weight: 700; font-size: .95rem; line-height: 1.25; }
.ps-stop-tx span { font-size: .8rem; color: var(--ps-ink-soft); }
.ps-stop-act { display: flex; gap: 4px; flex: 0 0 auto; }
.ps-stop-act button { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--ps-line); background: #fff; color: var(--ps-ink-soft); cursor: pointer; display: grid; place-items: center; transition: .15s; }
.ps-stop-act button:hover:not([disabled]) { border-color: var(--ps-amber); color: var(--ps-amber-2); }
.ps-stop-act button[disabled] { opacity: .35; cursor: default; }
.ps-stop-act button svg { width: 15px; height: 15px; }
.ps-stop-act button[data-removestop]:hover { border-color: var(--ps-err); color: var(--ps-err); }

.ps-connector { display: flex; flex-direction: column; align-items: center; }
.ps-conn-line { width: 2px; height: 11px; background: repeating-linear-gradient(var(--ps-line-2) 0 3px, transparent 3px 6px); }
.ps-connector-add .ps-conn-line { height: 14px; }
.ps-chip { appearance: none; cursor: pointer; border: 1px solid var(--ps-line-2); background: #fff; border-radius: 999px; padding: 5px 12px; font-weight: 700; font-size: .82rem; color: var(--ps-ink); transition: .15s; }
.ps-chip-dist { background: #fff6ea; border-color: #ffd9a8; color: var(--ps-amber-2); }
.ps-chip-dist:hover { border-color: var(--ps-amber); box-shadow: 0 4px 12px -6px rgba(245,146,30,.7); }
.ps-add-light { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; margin-top: 4px;
    border: 1.5px dashed var(--ps-amber); border-radius: 13px; background: #fff8ef; color: var(--ps-amber-2); padding: 13px; font-weight: 700; cursor: pointer; transition: .15s; }
.ps-add-light:hover { background: #fff1e0; }
.ps-add-light svg { width: 19px; height: 19px; }

/* ---- Picker / Lightbox (Modal) ---- */
.ps-modal-box.ps-modal-wide { max-width: 1040px; }
.ps-picker h4 { margin: 0 0 14px; font-size: 1.2rem; font-weight: 800; color: #fff; }
.ps-picker h4 span { font-weight: 600; color: #9fb6cc; }
.ps-chip-row { display: flex; flex-wrap: wrap; gap: 9px; }
.ps-chip-pick { padding: 9px 16px; font-size: .92rem; }
.ps-chip-pick.is-on { background: linear-gradient(135deg, var(--ps-amber), var(--ps-amber-2)); border-color: var(--ps-amber-2); color: #3a2406; }
.ps-picker-note { color: #9fb6cc; font-size: .82rem; margin: 12px 0 0; }
.ps-picker-dist { margin-bottom: 16px; }
.ps-picker-dist-lbl { display: block; color: #cfe0f0; font-weight: 600; font-size: .9rem; margin-bottom: 9px; }
/* KEIN eigener Scroll mehr – das Grid fließt, gescrollt wird der ganze Modal-Inhalt (.ps-modal-content). */
.ps-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-top: 14px; padding: 2px; }
.ps-pc { border: 1px solid #1f3a55; border-radius: 14px; overflow: hidden; background: #0f2238; display: flex; flex-direction: column; }
.ps-pc-img { aspect-ratio: 4 / 3; background: #0c1b2d center/contain no-repeat; position: relative; }
.ps-pc-img .ps-noimg { position: absolute; inset: 0; display: grid; place-items: center; color: #5b7a96; font-size: .8rem; }
.ps-pc-effect { position: absolute; bottom: 8px; right: 8px; display: inline-flex; align-items: center; gap: 5px; border: 0; cursor: pointer;
    background: rgba(10,22,38,.8); color: #ffe1a8; font-size: .74rem; font-weight: 700; padding: 5px 10px; border-radius: 999px; }
.ps-pc-effect:hover { background: rgba(10,22,38,.95); }
.ps-pc-body { padding: 12px 13px 13px; display: flex; flex-direction: column; gap: 8px; flex: 1; color: #eaf2fb; }
.ps-pc-name { font-weight: 700; font-size: .92rem; line-height: 1.3; }
.ps-pc-nutzen { font-size: .82rem; color: #b6cadd; line-height: 1.4; }
.ps-pc .ps-prod-specs { display: flex; flex-wrap: wrap; gap: 5px; }
.ps-pc .ps-chip { background: #18304a; border-color: #244a66; color: #cfe0f0; pointer-events: none; }
.ps-pc .ps-chip-w { background: #3a2a12; color: var(--ps-glow); }
.ps-pc .ps-chip-soft { background: #14365a; color: #9fd3e0; }
.ps-pc-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ps-pc-foot .ps-prod-price { color: #fff; font-weight: 800; }

.ps-lightbox { color: #eaf2fb; }
.ps-lb-head { margin-bottom: 12px; }
.ps-lb-head strong { display: block; font-size: 1.15rem; font-weight: 800; }
.ps-lb-head span { color: #b6cadd; font-size: .9rem; }
.ps-lb-stage { position: relative; background: #0b1a2c; border-radius: 14px; overflow: hidden; display: grid; place-items: center; min-height: 320px; }
.ps-lb-stage img { max-width: 100%; max-height: 64vh; display: block; }
.ps-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(10,22,38,.6); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.ps-lb-prev { left: 12px; } .ps-lb-next { right: 12px; }
.ps-lb-nav:hover { background: rgba(10,22,38,.9); }
.ps-lb-thumbs { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.ps-lb-thumb { width: 56px; height: 56px; border-radius: 9px; border: 2px solid transparent; background: #0c1b2d center/cover no-repeat; cursor: pointer; }
.ps-lb-thumb.is-on { border-color: var(--ps-amber); }
.ps-lb-note { color: #9fb6cc; font-size: .8rem; margin: 10px 0 0; }
.ps-modal-graphic svg { width: 100%; height: auto; }

@media (max-width: 720px) {
    .ps-inspo-grid { grid-template-columns: 1fr 1fr; }
    .ps-pick-grid { grid-template-columns: 1fr 1fr; }
    .ps-stop-act button { width: 34px; height: 34px; }
    .ps-strecke { padding: 8px 14px 16px; }
}
@media (max-width: 420px) {
    .ps-inspo-grid { grid-template-columns: 1fr; }
    .ps-pick-grid { grid-template-columns: 1fr; }
}


/* ---- Inspirationskacheln (stilisiert, ohne Foto) ---- */
.ps-inspo-tile { background: radial-gradient(120% 120% at 85% 10%, #1d4a6e 0%, var(--ps-night-2) 48%, var(--ps-night) 100%); }
.ps-inspo-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,16,28,0) 40%, rgba(8,16,28,.5)); }
.ps-inspo-watermark { position: absolute; right: -10px; bottom: -14px; width: 130px; height: 130px; color: rgba(255,215,154,.12); }
.ps-inspo-watermark svg { width: 100%; height: 100%; }
.ps-inspo-claim { position: relative; z-index: 1; color: #b6cadd; font-size: .82rem; margin-top: 4px; max-width: 92%; }
.ps-pc-effect svg { flex: 0 0 auto; }


/* ---- Ansichts-Umschaltung (Garten/Technik) im Modal ---- */
.ps-view-toggle { display: inline-flex; gap: 4px; background: #0f2238; border: 1px solid #1f3a55; border-radius: 999px; padding: 4px; margin-bottom: 14px; }
.ps-view-toggle button { border: 0; background: none; color: #9fb6cc; font: inherit; font-weight: 700; font-size: .88rem; padding: 7px 16px; border-radius: 999px; cursor: pointer; transition: .15s; }
.ps-view-toggle button.is-on { background: linear-gradient(135deg, var(--ps-amber), var(--ps-amber-2)); color: #3a2406; }
.ps-modal-graphic .ps-bigplan, .ps-modal-graphic svg { width: 100%; height: auto; display: block; }


/* ====================================================================
   NETZ-BUILDER (Vereinfachung: ein zusammenhängendes Kabelnetz)
   ==================================================================== */
.ps-net { position: relative; }
.ps-ast { position: relative; }
.ps-ast.is-branch {
    margin-left: clamp(14px, 5vw, 38px);
    padding-left: 18px;
    border-left: 2px dashed var(--ps-line-2);
    margin-top: 4px;
}
.ps-ast.is-branch::before {
    content: ""; position: absolute; left: -2px; top: 0; width: 18px; height: 22px;
    border-left: 2px dashed var(--ps-line-2); border-bottom: 2px dashed var(--ps-line-2);
    border-bottom-left-radius: 10px;
}

/* Verbinder zwischen Knoten (vertikale gestrichelte Linie + Distanz-Chip) */
.ps-conn { display: flex; flex-direction: column; align-items: center; }
.ps-conn .ps-conn-line { width: 2px; height: 12px; background: repeating-linear-gradient(var(--ps-line-2) 0 3px, transparent 3px 6px); }
.ps-conn-open .ps-conn-line, .ps-conn-end .ps-conn-line { height: 14px; }

/* Knoten (Trafo, Leuchte, freier Anschluss, Endkappe) */
.ps-node { display: flex; align-items: center; gap: 13px; border: 1px solid var(--ps-line); border-radius: 14px; background: var(--ps-panel); padding: 11px 13px; }
.ps-node-trafo { background: linear-gradient(135deg, #14243a, #0e2034); color: #eaf2fb; border-color: #14365a; box-shadow: var(--ps-shadow-s); }
.ps-node-trafo .ps-node-ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: rgba(255,178,77,.16); color: var(--ps-amber); font-size: 1.2rem; flex: 0 0 auto; }
.ps-node-trafo .ps-node-tx strong { color: #fff; }
.ps-node-trafo .ps-node-tx span { color: #9fb6cc; }
.ps-node-light { box-shadow: var(--ps-shadow-s); }
.ps-node-thumb { width: 46px; height: 46px; border-radius: 10px; background: #f1f5f9 center/contain no-repeat; flex: 0 0 auto; border: 1px solid var(--ps-line); }
.ps-node-tx { flex: 1; min-width: 0; }
.ps-node-tx strong { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .95rem; line-height: 1.25; }
.ps-node-tx span { font-size: .8rem; color: var(--ps-ink-soft); }
.ps-node-badge { font-size: .66rem; font-weight: 800; padding: 1px 8px; border-radius: 6px; letter-spacing: .02em; }
.ps-node-badge.is-saison { background: #e3f1fb; color: #1d6aa0; }
.ps-node-free { border-style: dashed; border-color: var(--ps-line-2); background: #f7fafd; }
.ps-node-free .ps-node-ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: #eef3f9; color: var(--ps-ink-soft); font-size: 1.3rem; font-weight: 700; flex: 0 0 auto; }
.ps-node-cap { background: #eef3f9; border-style: dashed; }
.ps-node-cap .ps-node-ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: var(--ps-ink-soft); font-size: .9rem; flex: 0 0 auto; }
.ps-cap-reopen { background: none; border: 0; color: var(--ps-amber-2); font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; padding: 0; text-decoration: underline; }
.ps-node-act { display: flex; gap: 4px; flex: 0 0 auto; }
.ps-node-act button { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--ps-line); background: #fff; color: var(--ps-ink-soft); cursor: pointer; display: grid; place-items: center; transition: .15s; }
.ps-node-act button:hover:not([disabled]) { border-color: var(--ps-amber); color: var(--ps-amber-2); }
.ps-node-act button[disabled] { opacity: .35; cursor: default; }
.ps-node-act button svg { width: 15px; height: 15px; }
.ps-node-act button[data-remove-pt]:hover { border-color: var(--ps-err); color: var(--ps-err); }

/* Abzweig-Kopf */
.ps-branch-head { display: flex; align-items: center; gap: 10px; padding: 4px 0 6px; }
.ps-branch-tag { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: .8rem; color: var(--ps-teal); }
.ps-branch-vt { font-size: .74rem; font-weight: 700; color: var(--ps-ink-soft); background: #eef6f4; border: 1px solid #cde8e2; border-radius: 999px; padding: 2px 10px; }
.ps-branch-remove { margin-left: auto; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--ps-line); background: #fff; color: var(--ps-ink-soft); cursor: pointer; display: grid; place-items: center; }
.ps-branch-remove:hover { border-color: var(--ps-err); color: var(--ps-err); }
.ps-branch-remove svg { width: 14px; height: 14px; }

/* Aktions-Cluster am offenen Ende */
.ps-end { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
/* PRIMÄRAKTION – klar gefüllter Hauptbutton (deutlich stärker als Sekundäraktionen) */
.ps-end-main { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
    border: 0; border-radius: var(--ps-radius-s);
    background: linear-gradient(135deg, var(--ps-amber) 0%, var(--ps-amber-2) 100%); color: #3a2406;
    font-weight: 800; font-size: .98rem; padding: 14px; cursor: pointer; transition: .18s var(--ps-ease);
    box-shadow: 0 12px 26px -16px rgba(245,146,30,.85); }
.ps-end-main:hover { transform: translateY(-1px); box-shadow: 0 18px 34px -13px rgba(245,146,30,.95); }
.ps-end-main svg { width: 19px; height: 19px; }
/* SEKUNDÄRAKTIONEN – zurückhaltend, gleiches Gewicht untereinander */
.ps-end-more { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ps-end-ghost { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--ps-line-2); background: transparent; color: var(--ps-ink-soft);
    font: inherit; font-weight: 600; font-size: .82rem; padding: 7px 13px; border-radius: 999px; cursor: pointer; transition: .15s var(--ps-ease); }
.ps-end-ghost:hover { border-color: var(--ps-teal); color: var(--ps-teal); background: #f3faf8; }
.ps-end-ghost svg { flex: 0 0 auto; opacity: .7; }
.ps-end-ghost:hover svg { opacity: 1; }

/* Technik-Panel (eingeklappt, optional) */
.ps-tech { margin-top: 20px; border: 1px solid var(--ps-line); border-radius: var(--ps-radius); background: var(--ps-panel); overflow: hidden; }
.ps-tech-toggle { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: linear-gradient(180deg,#fbfdff,#f4f8fc); color: var(--ps-ink);
    font: inherit; font-weight: 800; font-size: 1rem; padding: 15px 20px; cursor: pointer; text-align: left; }
.ps-tech-toggle em { font-style: normal; font-weight: 600; color: var(--ps-ink-soft); font-size: .86rem; }
.ps-tech-toggle > span { flex: 1; }
.ps-tech-chev { transition: transform .2s var(--ps-ease); flex: 0 0 auto; }
.ps-tech.is-open .ps-tech-chev { transform: rotate(180deg); }
.ps-tech-body { padding: 6px 20px 18px; display: flex; flex-direction: column; gap: 20px; }
.ps-tech-body[hidden] { display: none; }
.ps-tech-detail-body[hidden] { display: none; }
.ps-soft { font-weight: 600; color: var(--ps-ink-soft); }

/* Picker-Erweiterungen: Anwendungs-Filter + Status-Umschalter */
.ps-pick-usage, .ps-picker-status { margin-bottom: 16px; }
.ps-pick-lbl { display: block; color: #cfe0f0; font-weight: 600; font-size: .9rem; margin-bottom: 9px; }
.ps-chip-usage { background: #18304a; border-color: #244a66; color: #cfe0f0; }
.ps-chip-usage:hover { border-color: var(--ps-amber); }
.ps-chip-usage.is-on { background: linear-gradient(135deg, var(--ps-amber), var(--ps-amber-2)); border-color: var(--ps-amber-2); color: #3a2406; }
.ps-seg { display: inline-flex; gap: 4px; background: #0f2238; border: 1px solid #1f3a55; border-radius: 999px; padding: 4px; flex-wrap: wrap; }
.ps-seg-btn { border: 0; background: none; color: #cfe0f0; font: inherit; font-weight: 700; font-size: .86rem; padding: 7px 15px; border-radius: 999px; cursor: pointer; transition: .15s; }
.ps-seg-btn:hover:not(.is-on) { color: #fff; }
.ps-seg-btn.is-on { background: linear-gradient(135deg, #5fd6c2, #2bb9a3); color: #04261f; box-shadow: 0 4px 12px -6px rgba(63,199,180,.8); }

/* Schritt 2: Übersicht „Auf einen Blick" + Technik-Details */
.ps-overview { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 12px; }
.ps-ov { background: #f7fafd; border: 1px solid var(--ps-line); border-radius: 13px; padding: 13px 14px; }
.ps-ov-val { font-size: 1.4rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.ps-ov-lbl { font-size: .76rem; color: var(--ps-ink-soft); margin-top: 6px; font-weight: 600; }
.ps-overview-note { color: var(--ps-ink-soft); font-size: .84rem; margin: 14px 0 0; }
.ps-checks-block { display: flex; flex-direction: column; gap: 8px; }
.ps-tech-card-toggle { width: 100%; cursor: pointer; border: 0; font: inherit; }
.ps-tech-card-toggle .ps-tech-chev { margin-left: auto; }
.ps-tech-card-toggle.is-open .ps-tech-chev { transform: rotate(180deg); }
.ps-tech-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 10px; margin-bottom: 8px; }
.ps-tech-fact { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: #f7fafd; border: 1px solid var(--ps-line); border-radius: 11px; }
.ps-tech-fact span { font-size: .76rem; color: var(--ps-ink-soft); font-weight: 600; }
.ps-tech-fact strong { font-size: .95rem; }
.ps-tech-strang { margin-top: 12px; }
.ps-tech-strang-head { font-size: .82rem; font-weight: 700; color: var(--ps-ink-soft); padding: 6px 0; border-top: 1px solid var(--ps-line); }

.ps-inspo-empty { margin-top: 16px; text-align: center; }

@media (max-width: 720px) {
    .ps-ast.is-branch { margin-left: 10px; padding-left: 12px; }
    .ps-end-main { font-size: .9rem; padding: 12px; }
}


/* =====================================================================
 * AUSBAU PHASE A – Klarheit, Zustände, nachträgliche Abzweige, Undo
 * ===================================================================== */

/* Builder-Leiste: Undo/Redo/Leeren + Leer-Banner */
.ps-builder-bar { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; flex-wrap: wrap; }
.ps-history { display: flex; gap: 8px; }
.ps-hist-btn { display: inline-flex; align-items: center; gap: 7px; border: 1.5px solid var(--ps-line-2); background: var(--ps-panel); color: var(--ps-ink);
    font: inherit; font-weight: 700; font-size: .85rem; padding: 8px 14px; border-radius: 999px; cursor: pointer; transition: .15s; }
.ps-hist-btn:hover:not([disabled]) { border-color: var(--ps-amber-2); color: var(--ps-amber-2); }
.ps-hist-btn[disabled] { opacity: .4; cursor: not-allowed; }
.ps-hist-reset { margin-left: auto; border-color: #f0c9c6; color: var(--ps-err); }
.ps-hist-reset:hover { border-color: var(--ps-err); background: #fdf3f2; color: var(--ps-err); }
.ps-empty-banner { background: linear-gradient(180deg,#fff7ec,#fff1df); border: 1.5px dashed var(--ps-amber); border-radius: 14px;
    padding: 14px 18px; margin-bottom: 16px; color: #6b4a16; font-size: .98rem; }
.ps-empty-banner strong { color: #3a2406; }

/* „+"-Aktionsbutton am Knoten */
.ps-node-plus { width: 30px; height: 30px; border-radius: 8px; border: 1.5px solid var(--ps-amber); background: #fff8ef; color: var(--ps-amber-2);
    cursor: pointer; display: grid; place-items: center; transition: .15s; }
.ps-node-plus:hover { background: var(--ps-amber); color: #3a2406; }
.ps-node-plus svg { width: 16px; height: 16px; }

/* Punkt-Menü (Modal) */
.ps-menu h4 { margin: 0 0 14px; font-size: 1.18rem; font-weight: 800; color: #fff; }
.ps-menu-list { display: flex; flex-direction: column; gap: 8px; }
.ps-menu-item { display: flex; align-items: center; gap: 13px; text-align: left; width: 100%;
    border: 1px solid #244a66; background: #14283f; color: #eaf2fb; border-radius: 12px; padding: 12px 14px; cursor: pointer; transition: .15s; }
.ps-menu-item:hover { border-color: var(--ps-amber); background: #1a3350; }
.ps-menu-item.is-danger:hover { border-color: var(--ps-err); background: #3a1d1d; }
.ps-menu-ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,178,77,.16); color: var(--ps-amber); flex: 0 0 auto; }
.ps-menu-item.is-danger .ps-menu-ic { background: rgba(214,69,61,.18); color: #ff9a93; }
.ps-menu-ic svg { width: 19px; height: 19px; }
.ps-menu-tx { min-width: 0; }
.ps-menu-tx strong { display: block; font-weight: 700; font-size: .96rem; }
.ps-menu-tx span { font-size: .82rem; color: #9fb6cc; }

/* Ziel-/Anwendungs-Picker */
.ps-picker-note-top { margin: 0 0 16px; }
.ps-target-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 12px; }
.ps-target { display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center;
    border: 1.5px solid #244a66; background: #14283f; color: #eaf2fb; border-radius: 14px; padding: 18px 12px; cursor: pointer; transition: .15s; }
.ps-target:hover { border-color: var(--ps-amber); background: #1a3350; transform: translateY(-2px); }
.ps-target-ic { width: 46px; height: 46px; color: var(--ps-amber); }
.ps-target-ic svg { width: 100%; height: 100%; }
.ps-target-label { font-weight: 700; font-size: .92rem; }
.ps-target.is-free { border-style: dashed; }
.ps-target.is-free .ps-target-ic, .ps-target.is-custom .ps-target-ic { color: #9fb6cc; }
.ps-target-custom { margin-top: 16px; display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.ps-target-custom label { display: flex; flex-direction: column; gap: 6px; color: #cfe0f0; font-weight: 600; font-size: .9rem; flex: 1; }
.ps-target-custom input { background: #0f2238; border: 1.5px solid #244a66; color: #fff; border-radius: 10px; padding: 11px 13px; font: inherit; }
.ps-target-custom input:focus { border-color: var(--ps-amber); outline: none; }

/* Picker: Sub-Titel, Hinweise, Status-Hinweis, Fußzeile */
.ps-picker-sub { font-weight: 600; color: #9fc2e0; font-size: .92rem; }
.ps-pick-hint { font-weight: 500; color: #9fb6cc; font-size: .8rem; }
.ps-status-hint { margin: 10px 0 0; padding: 10px 13px; background: #14365a; border: 1px solid #2a587e; border-radius: 10px;
    color: #d6e8f6; font-size: .86rem; }
.ps-status-hint em { color: #9fc2e0; font-style: normal; display: block; margin-top: 3px; font-size: .82rem; }
.ps-pick-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; position: sticky; bottom: 0;
    padding-top: 12px; background: linear-gradient(180deg, rgba(11,20,35,0), var(--ps-night) 40%); }

/* Anwendungsfilter-Chips: aktiver Zustand mit Häkchen + klarer Füllung */
.ps-chip-usage { font-weight: 700; }
.ps-chip-usage.is-on { box-shadow: 0 4px 12px -6px rgba(245,146,30,.9); }
.ps-chip-usage.is-on::before { content: "✓ "; font-weight: 900; }

/* Distanz-Chips Häkchen */
.ps-chip-pick { position: relative; }

/* Produktkarte: ausgewählter Zustand */
.ps-pc { transition: border-color .15s, box-shadow .15s; }
.ps-pc.is-selected { border-color: var(--ps-ok); box-shadow: 0 0 0 2px var(--ps-ok), 0 14px 30px -16px rgba(31,157,87,.7); }
.ps-pc.is-selected::before { content: "✓ Ausgewählt"; position: absolute; z-index: 3; top: 8px; left: 8px;
    background: var(--ps-ok); color: #fff; font-size: .72rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; }
.ps-btn.is-selected, .ps-pc-foot .ps-btn.is-selected { background: var(--ps-ok); color: #fff; box-shadow: none; }
.ps-btn.is-selected:hover { background: #1b8b4d; }

/* Trafo-/Steuerungs-Optionen: Zustands-Label */
.ps-opt-state { margin-left: auto; font-weight: 800; white-space: nowrap; color: var(--ps-ink); }
.ps-opt.is-selected { border-color: var(--ps-amber); background: #fff8ef; box-shadow: 0 0 0 1.5px var(--ps-amber); }
.ps-opt.is-selected .ps-opt-state { color: var(--ps-ok); }
.ps-opt:focus-visible { outline: 3px solid rgba(245,146,30,.55); }

/* Schritt-2-Plan: Legende + PDF-Hinweis */
.ps-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: .82rem; color: var(--ps-ink-soft); }
.ps-leg { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.ps-leg-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.ps-leg-free { border: 1.6px dashed #9fb6cc; background: transparent; }
.ps-pdf-hint { display: flex; align-items: center; gap: 10px; background: #f4f8fc; border: 1px dashed var(--ps-line-2);
    border-radius: 12px; padding: 12px 16px; color: var(--ps-ink-soft); font-size: .88rem; }
.ps-pdf-hint svg { flex: 0 0 auto; color: var(--ps-amber-2); }
.ps-tech-umsetzung { font-size: .82rem; color: var(--ps-ink-soft); padding: 2px 0 6px; }

/* Modal-Grafik: Titel */
.ps-modal-title { color: #fff; font-size: 1.25rem; font-weight: 800; margin: 0 0 12px; }
.ps-modal-graphic .ps-legend { color: #9fb6cc; margin-top: 14px; }

/* Intro: Leer-Start hervorheben + „oder" */
.ps-inspo-empty-top { margin: 4px 0 8px; }
.ps-inspo-or { text-align: center; color: var(--ps-ink-soft); font-size: .92rem; margin: 4px 0 14px; font-weight: 600; }

@media (max-width: 720px) {
    .ps-target-grid { grid-template-columns: 1fr 1fr; }
}


/* ---- Korrektur-Runde: Duplizieren, Saisonal-Gruppe, „Gleicher Bereich" ---- */
.ps-node-act .ps-node-dup:hover { border-color: var(--ps-teal); color: var(--ps-teal); }

.ps-pick-grid > .ps-pick-groupnote,
.ps-pick-grid > .ps-pick-fallback { grid-column: 1 / -1; }
.ps-pick-groupnote { margin: 0; padding: 11px 14px; background: #14365a; border: 1px solid #2a587e; border-radius: 10px;
    color: #dbeafe; font-size: .87rem; }
.ps-pick-fallback { text-align: center; padding: 22px 14px; color: #b6cadd; }
.ps-pick-fallback .ps-picker-note { margin: 0 0 14px; }

.ps-target.is-on { border-color: var(--ps-amber); box-shadow: 0 0 0 2px var(--ps-amber); background: #1c2f3f; }
.ps-target.is-same { order: -1; }
.ps-target.is-same .ps-target-ic { color: var(--ps-amber); }
.ps-target-label small { display: block; font-weight: 600; color: #9fc2e0; font-size: .76rem; margin-top: 3px; }
.ps-target.is-on::after { content: "✓ vorausgewählt"; position: absolute; top: 8px; right: 8px;
    background: var(--ps-amber); color: #3a2406; font-size: .64rem; font-weight: 800; padding: 2px 7px; border-radius: 999px; }
.ps-target { position: relative; }


/* ---- Bereichsfarben: kleine, gezielte Akzente (Farbe nie alleinige Kennzeichnung) ---- */
/* Farbpunkt in Auswahlfiltern */
.ps-chip-color { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px;
    vertical-align: middle; flex: 0 0 auto; box-shadow: 0 0 0 1px rgba(255,255,255,.25) inset; }
.ps-chip-usage.is-on .ps-chip-color { box-shadow: 0 0 0 1px rgba(58,36,6,.35) inset; }
/* Legende: Bereich-Icon in Bereichsfarbe + Name */
.ps-legend { align-items: center; }
.ps-leg-ic { display: inline-flex; width: 17px; height: 17px; margin-right: 6px; vertical-align: middle; }
.ps-leg-ic svg { width: 100%; height: 100%; }
/* Technische Übersicht: Strang-Farbpunkt */
.ps-tech-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; vertical-align: middle;
    box-shadow: 0 0 0 1px rgba(0,0,0,.15) inset; }
/* Knoten-Akzent: linker Farbbalken (inline gesetzt) – Symbol/Name bleiben immer sichtbar */
.ps-node-light, .ps-node-free { border-left-width: 4px; }
.ps-branch-tag svg { color: inherit; }

/* ---- Distanz-Angebote (≈ Wunsch / real an echter Buchse) ---- */
.ps-chip-dist2 { line-height: 1.12; text-align: center; }
.ps-chip-dist2 small { display: block; font-weight: 600; font-size: .72em; opacity: .72; margin-top: 1px; }
.ps-chip-dist2.is-on small { opacity: .9; }


/* =====================================================================
 * VERZWEIGUNG (Stränge/Äste) + INLINE-PRODUKTGALERIE
 * ===================================================================== */

/* ---- Stränge im Strecken-Builder ---- */
.ps-ab-tag { display: inline-block; font-size: .7rem; font-weight: 800; vertical-align: middle; margin-left: 8px;
    background: #eef3f9; color: var(--ps-ink-soft); padding: 2px 9px; border-radius: 999px; }
.ps-branch-note { display: flex; align-items: center; gap: 8px; margin: 0 20px 8px; padding: 9px 13px; border-radius: 10px;
    background: #eef6f4; color: #1f6b5e; font-size: .85rem; font-weight: 600; border: 1px solid #cdeae4; }
.ps-branch-note svg { flex: 0 0 auto; }
.ps-strang { margin: 0 0 4px; }
.ps-strang-head { display: flex; align-items: center; gap: 10px; padding: 6px 20px 0; }
.ps-strang-badge { display: inline-flex; align-items: center; font-weight: 800; font-size: .82rem; color: #fff;
    background: var(--ps-kreis, var(--ps-amber-2)); padding: 3px 12px; border-radius: 999px; }
.ps-strang-remove { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--ps-line); background: #fff;
    color: var(--ps-ink-soft); cursor: pointer; display: grid; place-items: center; transition: .15s; }
.ps-strang-remove:hover { border-color: var(--ps-err); color: var(--ps-err); }
.ps-strang-remove svg { width: 14px; height: 14px; }
.ps-add-branch { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; margin: 6px 0 2px;
    border: 1.5px dashed var(--ps-teal); border-radius: 13px; background: #eef7f5; color: #1f6b5e; padding: 12px;
    font-weight: 700; cursor: pointer; transition: .15s; }
.ps-add-branch:hover { background: #e3f1ee; }
.ps-add-branch svg { width: 19px; height: 19px; }

/* ---- Inline-Produktgalerie ---- */
.ps-pc-gallery { position: relative; }
.ps-pc-img { position: relative; }
.ps-pc-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%;
    border: 0; background: rgba(10,22,38,.62); color: #fff; font-size: 1.2rem; line-height: 1; cursor: pointer;
    display: grid; place-items: center; opacity: 0; transition: opacity .15s, background .15s; }
.ps-pc-gallery:hover .ps-pc-nav { opacity: 1; }
.ps-pc-nav:hover { background: rgba(10,22,38,.9); }
.ps-pc-prev { left: 7px; } .ps-pc-next { right: 7px; }
.ps-pc-count { position: absolute; bottom: 8px; left: 8px; background: rgba(10,22,38,.72); color: #fff;
    font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.ps-pc-dots { position: absolute; bottom: 9px; left: 0; right: 0; display: flex; gap: 4px; justify-content: center; pointer-events: none; }
.ps-pc-dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.45); }
.ps-pc-dots i.is-on { background: var(--ps-amber); width: 14px; border-radius: 3px; }
.ps-pc-expand { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 7px; border: 0;
    background: rgba(10,22,38,.6); color: #fff; cursor: pointer; display: grid; place-items: center; opacity: 0; transition: opacity .15s; }
.ps-pc-gallery:hover .ps-pc-expand { opacity: 1; }
.ps-pc-expand:hover { background: rgba(10,22,38,.9); }
@media (hover: none) { .ps-pc-nav, .ps-pc-expand { opacity: .85; } }


/* ---- Strang-Liste in der Ergebnis-Karte ---- */
.ps-strang-list { display: flex; flex-direction: column; gap: 6px; padding: 8px 0 4px; border-bottom: 1px solid var(--ps-line); margin-bottom: 6px; }
.ps-strang-row { display: flex; align-items: center; gap: 9px; font-size: .86rem; }
.ps-strang-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.ps-strang-meta { margin-left: auto; color: var(--ps-ink-soft); font-weight: 600; }


/* ---- Bedarfsgerechtes Nachladen: Picker-Ladezustand, „Weitere laden", Lazy-Bild ---- */
.ps-pick-loading { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 12px;
    color: var(--ps-ink-soft); padding: 54px 0; font-size: .92rem; }
.ps-spin { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--ps-line-2);
    border-top-color: var(--ps-amber); animation: ps-spin .8s linear infinite; flex: 0 0 auto; }
@keyframes ps-spin { to { transform: rotate(360deg); } }
.ps-pick-morewrap { grid-column: 1 / -1; display: flex; justify-content: center; padding: 8px 0 2px; }
/* Lazy-Hauptbild: dezenter Platzhalter, solange data-bg noch nicht gesetzt ist. */
.ps-pc-img[data-bg] { background-color: #0c1b2d; }
.ps-pc-img.is-loading::after { content: ""; position: absolute; inset: 0; margin: auto; width: 24px; height: 24px;
    border-radius: 50%; border: 3px solid rgba(255,255,255,.35); border-top-color: var(--ps-amber); animation: ps-spin .8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .ps-spin, .ps-pc-img.is-loading::after { animation: none; } }


/* ---- Eigenschafts-Filter (Smart/Farbe/Saisonal) + Produktkarten-Badges ---- */
.ps-pick-props { margin-bottom: 16px; }
.ps-chip-prop { cursor: pointer; }
.ps-chip-prop.is-on { background: var(--ps-teal); border-color: var(--ps-teal); color: #06221d; font-weight: 700; }
.ps-pc .ps-chip-farbe { background: #2a1f3a; border-color: #4a3a66; color: #d9c2ff; }
.ps-pc .ps-chip-smart { background: #123a32; border-color: #1f6657; color: #8fe9d6; font-weight: 700; }
.ps-pc .ps-chip-smart2 { background: #14304a; border-color: #2a5575; color: #acd4ef; }


/* ---- Steuerungsart-Auswahl (Smart-Home-Modus) ---- */
.ps-ctrlmode { margin: 14px 0 18px; }
.ps-ctrlmode-lbl { display: block; font-weight: 700; color: var(--ps-ink); margin-bottom: 9px; }
.ps-ctrlmode-row { display: flex; gap: 10px; flex-wrap: wrap; }
.ps-ctrlmode-btn { flex: 1 1 200px; text-align: left; background: var(--ps-panel); border: 1.5px solid var(--ps-line-2); border-radius: var(--ps-radius-s);
    padding: 10px 13px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; transition: border-color .15s, box-shadow .15s; }
.ps-ctrlmode-btn strong { font-size: .95rem; color: var(--ps-ink); }
.ps-ctrlmode-btn span { font-size: .8rem; color: var(--ps-ink-soft); line-height: 1.3; }
.ps-ctrlmode-btn.is-on { border-color: var(--ps-teal); box-shadow: 0 0 0 3px rgba(52,179,160,.18); }
.ps-ctrlmode-btn.is-on strong::after { content: " ✓"; color: var(--ps-teal); }

/* ---- Smart-Home-Detailblock (Technische Details) ---- */
.ps-smart-block { background: #0e2a25; border: 1px solid #1f6657; border-radius: var(--ps-radius-s); padding: 12px 14px; margin-bottom: 14px; color: #d7f3ea; }
.ps-smart-head { font-weight: 800; color: #8fe9d6; margin-bottom: 6px; }
.ps-smart-sum { font-size: .85rem; color: #aee3d6; margin-bottom: 10px; }
.ps-smart-grp { border-top: 1px solid #1c4f45; padding: 8px 0; }
.ps-smart-grp-head { font-weight: 700; color: #eafaf5; }
.ps-smart-grp-meta { color: #7fcabb; font-weight: 600; font-size: .82rem; }
.ps-smart-grp-row { font-size: .82rem; color: #bfe7dc; margin-top: 2px; }
.ps-smart-funcs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.ps-chip-func { background: #123a32; border-color: #1f6657; color: #8fe9d6; }
.ps-smart-warn { font-size: .82rem; color: #ffd79a; margin-top: 5px; }
.ps-smart-gw { font-size: .8rem; color: #aee3d6; margin-top: 10px; border-top: 1px dashed #1c4f45; padding-top: 8px; }

/* ---- LED-Strips / Lichtlinien ---- */
.ps-pc .ps-chip-strip { background: #1a2f12; border-color: #3a5a22; color: #cfe9a8; font-weight: 700; }
.ps-node-badge.is-strip { background: #1a2f12; color: #cfe9a8; border: 1px solid #3a5a22; }
.ps-node-strip { background: linear-gradient(90deg, rgba(120,200,90,.05), transparent 60%); }
.ps-node-strip .ps-node-thumb { position: relative; }
.ps-node-strip .ps-node-thumb::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 4px; height: 3px; border-radius: 2px;
    background: repeating-linear-gradient(90deg, #ffd79a 0 6px, transparent 6px 10px); }

/* ============================================================
   UX-Durchgang 2026-06-29 (Asset 2-12-0) – Desktop-Bedienbarkeit
   Picker-Meta (X von Y + Reset), Skeleton-Ladezustand, Set-Alternativ-Badges.
   Bereichsfarben/Token unverändert; nur additive, ruhige Klarheit.
   ============================================================ */
.ps-pick-meta { display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:2px 2px 10px; min-height:22px; }
.ps-pick-count { font-size:12.5px; font-weight:700; color:var(--ps-ink-soft); letter-spacing:.2px; }
.ps-pick-reset { background:none; border:0; color:var(--ps-amber); font-size:12.5px; font-weight:700;
  cursor:pointer; padding:4px 8px; border-radius:8px; transition:background .15s var(--ps-ease); }
.ps-pick-reset:hover { background:rgba(255,158,77,.12); text-decoration:underline; }

/* Skeleton-Platzhalter für Produktkarten (ruhiger als Spinner) */
.ps-pc-sk { pointer-events:none; opacity:.85; }
.ps-pc-sk .ps-sk-img, .ps-pc-sk .ps-sk-line, .ps-pc-sk .ps-sk-chips {
  display:block; border-radius:8px;
  background:linear-gradient(100deg, rgba(255,255,255,.04) 30%, rgba(255,255,255,.10) 50%, rgba(255,255,255,.04) 70%);
  background-size:200% 100%; animation:ps-shimmer 1.3s linear infinite; }
.ps-pc-sk .ps-sk-img { height:108px; margin-bottom:10px; }
.ps-pc-sk .ps-sk-line { height:12px; margin:6px 0; }
.ps-pc-sk .ps-sk-short { width:55%; }
.ps-pc-sk .ps-sk-chips { height:18px; width:75%; margin-top:10px; border-radius:9px; }
@keyframes ps-shimmer { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }
@media (prefers-reduced-motion: reduce) { .ps-pc-sk .ps-sk-img, .ps-pc-sk .ps-sk-line, .ps-pc-sk .ps-sk-chips { animation:none; } }

/* Set-Alternativen / Spar-Tipp */
.ps-alt-badge { display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:.3px;
  padding:2px 8px; border-radius:20px; vertical-align:middle; margin-right:6px;
  background:rgba(159,182,204,.18); color:#cfe0f0; border:1px solid rgba(159,182,204,.35); }
.ps-alt-badge.is-spar { background:rgba(123,211,137,.16); color:#bff0c9; border-color:rgba(123,211,137,.45); }
.ps-bom-alt { background:rgba(255,255,255,.025); border-radius:10px; }
.ps-einkauf-altnote { margin-top:12px; border-top:1px solid var(--ps-line); padding-top:10px; }
.ps-einkauf-deckt { font-size:12.5px; color:var(--ps-ink-soft); margin:6px 2px 0; }

/* „Technische Prüfung"-Überschrift über den Prüf-Meldungen (Ergebnis) */
.ps-checks-block { position:relative; }
.ps-checks-title { font-size:12px; font-weight:800; letter-spacing:.6px; text-transform:uppercase;
  color:var(--ps-ink-soft); margin:0 2px 8px; }

/* Plan-Legende: RGB/Farbe-Dot (Regenbogen) – nur dezente Orientierung */
.ps-leg-rgb { width:11px; height:11px; border-radius:50%; border:1px solid rgba(255,255,255,.6);
  background:linear-gradient(90deg,#ff5d6c,#ffd24d,#5ad1a8,#6aa6ff); }

/* ============================================================
   UX-Durchgang 2 (Asset 2-13-0) – Desktop-Design/Übersicht
   Ergebnis-Status-Summary (sticky, Verdikt + Kernzahlen + Preis).
   ============================================================ */
.ps-result-summary { position:sticky; top:8px; z-index:5; display:flex; align-items:center; flex-wrap:wrap; gap:14px;
  padding:13px 18px; border-radius:var(--ps-radius-s); margin-bottom:4px;
  background:linear-gradient(180deg,#102a44 0%,#0d2238 100%); color:#eaf2fb;
  box-shadow:var(--ps-shadow-s); border:1px solid rgba(255,255,255,.07); }
.ps-result-summary.ps-rsum-ok   { border-left:4px solid var(--ps-ok); }
.ps-result-summary.ps-rsum-warn { border-left:4px solid var(--ps-warn); }
.ps-result-summary.ps-rsum-err  { border-left:4px solid var(--ps-err); }
.ps-rsum-state { display:flex; align-items:center; gap:9px; font-weight:800; font-size:1rem; }
.ps-rsum-badge { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%;
  font-size:.85rem; font-weight:900; color:#0a1626; }
.ps-rsum-ok  .ps-rsum-badge { background:var(--ps-ok); color:#fff; }
.ps-rsum-warn .ps-rsum-badge { background:var(--ps-warn); color:#fff; }
.ps-rsum-err .ps-rsum-badge { background:var(--ps-err); color:#fff; }
.ps-rsum-chips { display:flex; flex-wrap:wrap; gap:7px; flex:1; }
.ps-rsum-chip { font-size:12.5px; font-weight:700; padding:4px 11px; border-radius:999px;
  background:rgba(255,255,255,.08); color:#cfe0f0; border:1px solid rgba(255,255,255,.1); }
.ps-rsum-chip.ps-rsum-smart { background:rgba(52,179,160,.16); color:#8fd3c6; border-color:rgba(52,179,160,.4); }
.ps-rsum-price { display:flex; flex-direction:column; align-items:flex-end; line-height:1.15; margin-left:auto; }
.ps-rsum-price-lbl { font-size:10px; text-transform:uppercase; letter-spacing:.7px; color:#9fb6cc; font-weight:700; }
.ps-rsum-price-val { font-size:1.3rem; font-weight:900; color:var(--ps-glow); }

/* Picker-Karte: technische Daten aufklappbar (ruhigere Karten) */
.ps-pc-tech { margin:8px 0 2px; border-top:1px solid var(--ps-line); }
.ps-pc-tech > summary { list-style:none; cursor:pointer; font-size:11.5px; font-weight:700; color:var(--ps-ink-soft);
  padding:7px 2px 4px; display:flex; align-items:center; gap:5px; user-select:none; }
.ps-pc-tech > summary::-webkit-details-marker { display:none; }
.ps-pc-tech > summary::before { content:'›'; display:inline-block; transition:transform .15s var(--ps-ease); font-weight:800; }
.ps-pc-tech[open] > summary::before { transform:rotate(90deg); }
.ps-pc-tech > summary:hover { color:var(--ps-amber-2); }
.ps-pc-techbody { display:flex; flex-wrap:wrap; gap:5px; align-items:center; padding:4px 2px 6px; }
.ps-pc-art { font-size:11px; color:var(--ps-ink-soft); }

/* Zubehör – drei klare Gruppen (notwendig / optional / enthalten) */
.ps-zub-group { padding:4px 0; }
.ps-zub-group + .ps-zub-group { margin-top:10px; border-top:1px solid var(--ps-line); padding-top:12px; }
.ps-zub-gtitle { font-size:12.5px; font-weight:800; letter-spacing:.3px; margin:0 2px 6px; display:flex; align-items:center; gap:7px; }
.ps-zub-gtitle::before { content:''; width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
.ps-zub-need::before { background:var(--ps-ok); }
.ps-zub-opt::before  { background:var(--ps-amber-2); }
.ps-zub-incl::before { background:var(--ps-ink-soft); }
.ps-zub-note { font-size:12.5px; color:var(--ps-ink-soft); margin:0 2px 8px; }
.ps-zub-note.ps-zub-ok { color:var(--ps-ok); font-weight:600; }

/* Technische Details – Unterbereich-Überschriften (scanbar statt Textblock) */
.ps-tech-subtitle { font-size:11.5px; font-weight:800; letter-spacing:.6px; text-transform:uppercase;
  color:var(--ps-ink-soft); margin:14px 2px 8px; padding-bottom:5px; border-bottom:1px solid var(--ps-line); }
.ps-tech-subtitle:first-child { margin-top:2px; }

/* ============================================================
   Bedien-/Lesbarkeits-Durchgang (Asset 2-14-0)
   Nur gültige Abstände, prominente Meterwahl, Bestätigung,
   Freihalter-Dialog, #6-Sperrmeldungen, Disabled-Lesbarkeit.
   ============================================================ */

/* #3 – Abstand prominent: große, klar antippbare Felder + „Gewählter Abstand" */
.ps-pick-lbl-dist { font-size: 1.02rem; font-weight: 800; color: #ffffff; }
.ps-dist-row { gap: 10px; }
.ps-dist-row .ps-chip-pick.ps-chip-dist2 {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    min-width: 72px; min-height: 52px; padding: 9px 18px; line-height: 1.15;
    font-size: 1.12rem; font-weight: 800; }
.ps-dist-row .ps-chip-pick.ps-chip-dist2 small { font-size: .66rem; font-weight: 600; opacity: .85; margin-top: 2px; }
.ps-dist-chosen { margin: 12px 2px 0; font-size: .95rem; color: #dce9f6; }
.ps-dist-chosen strong { color: var(--ps-glow); font-size: 1.06rem; }

/* #2 – Bestätigungsleiste (sticky am Modal-Boden). Umbruchfähig: auf schmalen
   Breiten stapeln Info + Button automatisch (kein Quetschen langer Namen). */
.ps-pick-confirm { position: sticky; bottom: 0; z-index: 4; display: flex; align-items: center; flex-wrap: wrap;
    gap: 10px 14px; margin: 16px -4px -4px; padding: 14px 18px;
    background: linear-gradient(180deg, rgba(13,34,56,.55) 0%, #0d2238 55%); border-top: 1px solid rgba(255,255,255,.14);
    border-radius: 0 0 14px 14px; backdrop-filter: blur(3px); }
.ps-pick-confirm-info { font-size: .92rem; color: #b8cadd; flex: 100 1 200px; }
.ps-pick-confirm-info.is-ready { color: #ffffff; }
.ps-pick-confirm-info strong { color: var(--ps-glow); }
.ps-pick-confirm-btn { flex: 1 1 200px; }

/* #4 – Freihalter-Dialog (zwei große, klar lesbare Optionen) */
.ps-freeask-opts { display: grid; gap: 12px; margin-top: 6px; }
.ps-freeask-opt { display: flex; align-items: center; gap: 14px; text-align: left; width: 100%;
    padding: 16px 18px; border-radius: 14px; border: 1.5px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.05); color: #eaf2fb; cursor: pointer; transition: .15s var(--ps-ease); }
.ps-freeask-opt:hover { border-color: var(--ps-amber); background: rgba(255,255,255,.1); transform: translateY(-1px); }
.ps-freeask-opt.is-primary { border-color: var(--ps-amber-2); background: rgba(255,178,77,.14); }
.ps-freeask-opt.is-primary:hover { background: rgba(255,178,77,.22); }
.ps-freeask-ic { font-size: 1.7rem; flex: 0 0 auto; }
.ps-freeask-tx strong { display: block; font-size: 1.02rem; font-weight: 800; color: #fff; }
.ps-freeask-tx span { font-size: .86rem; color: #b8cadd; }

/* #6 – „kein weiterer Anschluss möglich" (Picker-Box + Builder-Meldung) */
.ps-nodist-box { text-align: center; padding: 26px 18px 8px; }
.ps-nodist-ic { display: inline-flex; color: var(--ps-warn); margin-bottom: 10px; }
.ps-nodist-ic svg { width: 40px; height: 40px; }
.ps-nodist-msg { font-size: 1.06rem; font-weight: 800; color: #fff; margin: 0 0 8px; }
.ps-nodist-hint { font-size: .9rem; color: #b8cadd; margin: 0 0 18px; }
.ps-end-nomore { display: flex; align-items: center; gap: 9px; margin: 0 0 10px; padding: 11px 13px;
    background: #fdf3e3; color: #7a4e08; border: 1px solid #f0d9a8; border-radius: 10px;
    font-size: .88rem; font-weight: 600; }
.ps-end-nomore svg { flex: 0 0 auto; color: var(--ps-warn); }

/* #4 – „Leuchte auswählen" am Freihalterplatz (klar als Primäraktion) */
.ps-node-fill { border: 0; background: linear-gradient(135deg, var(--ps-amber), var(--ps-amber-2)); color: #3a2406;
    font-weight: 800; font-size: .82rem; padding: 8px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap;
    width: auto; height: auto; transition: .15s var(--ps-ease); }
.ps-node-fill:hover { box-shadow: 0 9px 20px -10px rgba(245,146,30,.95); transform: translateY(-1px); }
.ps-node-free { background: #fbfdff; }
.ps-node-free .ps-node-tx strong { color: var(--ps-ink); }
.ps-node-free .ps-node-tx span { color: var(--ps-ink-soft); }

/* #5 – Disabled bleibt LESBAR (kein blasses Verschwinden) */
.ps-btn:disabled, .ps-btn[disabled] { opacity: 1; background: #e7edf3; color: #56657a; border: 1px solid #d3deea;
    box-shadow: none; transform: none; cursor: not-allowed; }
.ps-end-main:disabled, .ps-end-main[disabled] { opacity: 1; background: #eef2f7; color: #5c6f82;
    box-shadow: none; transform: none; cursor: not-allowed; }
.ps-end-ghost:disabled, .ps-end-ghost[disabled] { opacity: 1; background: #f4f7fb; color: #8493a3;
    border-color: #e1e8f0; cursor: not-allowed; }
.ps-step-pill.is-locked { opacity: .7; }

/* Positionsgenaue Abstände (edit/insert) – Ladezustand + „kein gültiger Abstand" */
.ps-dist-loading { display:flex; align-items:center; gap:9px; color:#b8cadd; font-size:.92rem; padding:12px 2px; }
.ps-dist-none { display:flex; align-items:flex-start; gap:10px; padding:13px 15px; border-radius:10px;
  background:rgba(217,129,10,.14); border:1px solid rgba(217,129,10,.42); color:#ffe0a6; font-size:.92rem; font-weight:600; }
.ps-dist-none svg { flex:0 0 auto; color:var(--ps-warn); margin-top:1px; }

/* Mobil-Feinschliff (echte Smartphone-Breite) für die neuen Bedien-Komponenten.
   Modals sind viewportbreit; Chips/Footer/Summary brechen bereits umbruchsicher um. */
@media (max-width: 480px) {
  /* Abnahme 2026-07-04: Touch-Ziele >= ~44 px (Befund: Verkabelungs-/Undo-/Aktions-
     Buttons vorher 35-39 px). Nur mobil, Desktop-Optik unveraendert. */
  .ps-hist-btn, .ps-end-ghost,
  .ps-verkabel-seg .ps-seg-btn, .ps-status-row .ps-seg-btn { min-height: 44px; }
  .ps-end-ghost { padding-top: 11px; padding-bottom: 11px; }
  .ps-dist-row { gap: 8px; }
  .ps-dist-row .ps-chip-pick.ps-chip-dist2 { min-width: 66px; min-height: 48px; font-size: 1rem; padding: 8px 12px; }
  .ps-pick-confirm { padding: 12px 14px; }
  .ps-pick-confirm-btn { width: 100%; }
  .ps-result-summary { padding: 12px 14px; gap: 8px 10px; }
  .ps-rsum-price { margin-left: 0; align-items: flex-start; }
  .ps-rsum-price-val { font-size: 1.18rem; }
  .ps-freeask-opt { padding: 14px; gap: 12px; }
  .ps-freeask-ic { font-size: 1.45rem; }
  .ps-nodist-box { padding: 18px 12px 6px; }
  .ps-end-nomore { font-size: .84rem; }
}

/* ============================================================
   Automatische Netzoptimierung (Asset 2-16-0)
   Auto-Meldung, Verkabelungs-Umschalter, „Alternative" (angepasste Abstände).
   ============================================================ */
.ps-check-auto { background:#e7f6f2; color:#0c5e52; }
.ps-verkabel { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 16px; }
.ps-verkabel-lbl { font-size:.74rem; font-weight:800; text-transform:uppercase; letter-spacing:.6px; color:var(--ps-ink-soft); }
.ps-verkabel-seg { background:#eef3f9; border:1px solid var(--ps-line); border-radius:999px; padding:4px; display:inline-flex; gap:4px; }
.ps-verkabel-seg .ps-seg-btn { color:var(--ps-ink-soft); font-size:.85rem; }
.ps-verkabel-seg .ps-seg-btn:hover:not(.is-on) { color:var(--ps-ink); }
.ps-verkabel-seg .ps-seg-btn.is-on { background:linear-gradient(135deg,var(--ps-amber),var(--ps-amber-2)); color:#3a2406; box-shadow:0 4px 12px -6px rgba(245,146,30,.8); }

.ps-auto-card .ps-result-card-title { color:#0c5e52; }
.ps-adj-list { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.ps-adj-row { display:inline-flex; align-items:center; gap:7px; background:#f1f5f9; border:1px solid var(--ps-line); border-radius:9px; padding:6px 11px; font-size:.86rem; }
.ps-adj-wunsch { color:var(--ps-ink-soft); text-decoration:line-through; }
.ps-adj-real { color:var(--ps-ok); font-weight:800; }
.ps-adj-row svg { color:var(--ps-ink-soft); flex:0 0 auto; }

/* ============================================================
   Grafik-Viewport + Picker-Kontrast (Asset 2-17-0)
   ============================================================ */

/* --- „Ihr Kabelnetz"-Modal: feste Bühne + Zoom/Pan, voller Plan passt immer --- */
.ps-view-stage { position: relative; width: 100%; height: min(70vh, 620px); min-height: 320px;
  border-radius: var(--ps-radius); overflow: hidden; background: #0a1c2c; cursor: grab; touch-action: none; }
.ps-view-stage.is-grab { cursor: grabbing; }
.ps-view-stage svg { width: 100% !important; height: 100% !important; display: block; }
.ps-modal-graphic .ps-view-stage svg { height: 100% !important; } /* überstimmt alte height:auto-Regel */
.ps-view-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.ps-view-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 42px; min-height: 42px;
  padding: 0 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.08);
  color: #eaf2fb; font-weight: 700; font-size: .95rem; cursor: pointer; transition: .15s var(--ps-ease); }
.ps-view-btn:hover { background: rgba(255,255,255,.16); border-color: var(--ps-amber); }
.ps-view-btn.ps-view-fit { background: linear-gradient(135deg,#F2B35D,#e89a37); color: #0B1625; border: 0; font-weight: 800; }
.ps-view-btn.ps-view-fit:hover { filter: brightness(1.06); }
.ps-view-hint { margin: 8px 2px 0; font-size: .8rem; color: #9fb6cc; }

/* --- Produkt-Picker: „Auswählen" als klare Hauptaktion (Bernstein/Nachtblau) --- */
.ps-pc-foot .ps-btn-primary { background: #F2B35D; color: #0B1625; font-weight: 800; min-height: 44px;
  padding: 10px 20px; border-radius: 11px; border: 1px solid #c9863a; box-shadow: 0 6px 16px -8px rgba(0,0,0,.6); }
.ps-pc-foot .ps-btn-primary:hover { background: #ffc473; box-shadow: 0 10px 22px -8px rgba(0,0,0,.7); transform: translateY(-1px); }
.ps-pc-foot .ps-btn-primary:active { transform: translateY(0); }
/* Ausgewählt: eindeutig (Grün + Häkchen + Form), nicht nur Farbe */
.ps-pc-foot .ps-btn.is-selected { background: #157a42; color: #fff; border-color: #0e5e31; box-shadow: 0 0 0 2px rgba(21,122,66,.4); }
.ps-pc-foot .ps-btn.is-selected:hover { background: #116b39; }
/* Deaktiviert: neutral, aber lesbar – nicht mit Normalzustand verwechselbar */
.ps-pc-foot .ps-btn:disabled, .ps-pc-foot .ps-btn[disabled] { background: #20384f; color: #9fb6cc; border: 1px solid #2c4660; box-shadow: none; cursor: not-allowed; }
.ps-pc.is-selected::before { background: var(--ps-ok); color: #fff; padding: 3px 9px; border-radius: 7px; font-size: 11px; font-weight: 800; box-shadow: 0 2px 6px rgba(0,0,0,.4); }

/* --- Abstandsfelder: gewählter Abstand klar AKTIV (gefüllt + Kontur + Häkchen) --- */
.ps-dist-row .ps-chip-pick.ps-chip-dist2 { background: #14304a; border: 1.5px solid #2c5070; color: #eaf2fb; }
.ps-dist-row .ps-chip-pick.ps-chip-dist2 small { color: #a9c2d8; opacity: 1; }
.ps-dist-row .ps-chip-pick.ps-chip-dist2:hover { border-color: var(--ps-amber); background: #18395a; }
.ps-dist-row .ps-chip-pick.ps-chip-dist2.is-on { background: #F2B35D; border-color: #b9772b; color: #0B1625; box-shadow: 0 0 0 2px rgba(242,179,93,.4); position: relative; }
.ps-dist-row .ps-chip-pick.ps-chip-dist2.is-on small { color: #3a2406; opacity: 1; font-weight: 700; }
.ps-dist-row .ps-chip-pick.ps-chip-dist2.is-on::after { content: "✓"; position: absolute; top: -7px; right: -7px; width: 17px; height: 17px;
  background: var(--ps-ok); color: #fff; border-radius: 50%; font-size: 11px; font-weight: 900; display: grid; place-items: center; box-shadow: 0 2px 5px rgba(0,0,0,.4); }

/* --- „Strang endet hier": Endbuchsen-Abstände klar gekennzeichnet, aber wählbar --- */
.ps-dist-row .ps-chip-pick.ps-chip-dist2.is-endet { border-style: dashed; border-color: #b9772b; }
.ps-dist-row .ps-chip-pick.ps-chip-dist2 .ps-chip-endet-lbl { display: block; font-size: .62rem; font-weight: 700; color: #f0c088; margin-top: 2px; }
.ps-dist-row .ps-chip-pick.ps-chip-dist2.is-on .ps-chip-endet-lbl { color: #7a4e08; }
.ps-dist-endet-hint { margin: 10px 0 0; padding: 10px 12px; border: 1px solid #ecd3ae; background: #fdf6ec;
  border-radius: 10px; font-size: .88rem; line-height: 1.5; color: #6b4a10; }
.ps-dist-endet-hint strong { color: #4d3406; }
.ps-dist-endet-alt { display: block; margin-top: 4px; color: #0c5e52; }

/* --- P7: sichtbarer Tastatur-Fokus in allen Dialogen (kein visueller Umbau) --- */
.ps-modal :focus-visible { outline: 3px solid #F2B35D; outline-offset: 2px; border-radius: 6px; }
.ps-modal .ps-modal-close:focus-visible { outline-offset: 0; }

/* --- P3: Vorher-Nachher-Dialog „Technischer Lösungsvorschlag" (Auto-Split) --- */
.ps-autoprop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0 4px; }
.ps-autoprop-col { border: 1px solid #dbe4ee; border-radius: 12px; padding: 12px 14px; background: #f7fafc; }
.ps-autoprop-col.is-vorschlag { border-color: #a9ddd1; background: #f2fbf8; }
.ps-autoprop-col h5 { margin: 0 0 8px; font-size: .92rem; color: var(--ps-ink); }
.ps-autoprop-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ps-autoprop-list li { display: flex; justify-content: space-between; gap: 10px; font-size: .88rem; color: var(--ps-ink-soft); }
.ps-autoprop-list li strong { color: var(--ps-ink); text-align: right; }
.ps-autoprop-note { margin: 10px 0 0; font-size: .86rem; color: #6b4a10; background: #fdf6ec; border: 1px solid #ecd3ae; border-radius: 10px; padding: 9px 12px; }
.ps-autoprop-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.ps-autoprop .ps-btn-ghost { background: none; color: var(--ps-ink-soft); border: 1px solid #c8d4e0; }
.ps-autoprop .ps-btn-ghost:hover { background: #eef3f8; color: var(--ps-ink); }
@media (max-width: 640px) {
  .ps-autoprop-grid { grid-template-columns: 1fr; }
  .ps-autoprop-acts .ps-btn { flex: 1 1 100%; }
}

/* ============================================================
   Sackgassenhilfe + automatisch ergänzter Strang (UX-Ausbau 3)
   ============================================================ */
/* Auto-Toast (teal, passend zur Auto-Meldung im Rail) */
.ps-toast.is-auto { background: #0c5e52; }

/* Hilfe-Block, wenn ein Strang nicht weitergeführt werden kann */
.ps-end-deadend { display: block; }
.ps-deadend { border: 1px solid #cde8e2; background: #f2fbf8; border-radius: 12px; padding: 14px 15px; }
.ps-deadend-head { display: flex; gap: 11px; align-items: flex-start; }
.ps-deadend-ic { flex: 0 0 auto; display: inline-flex; width: 34px; height: 34px; border-radius: 9px;
  align-items: center; justify-content: center; background: #d9f0ea; color: #0c5e52; }
.ps-deadend-tx { display: flex; flex-direction: column; gap: 3px; }
.ps-deadend-tx strong { color: var(--ps-ink); font-size: .98rem; }
.ps-deadend-tx span { color: var(--ps-ink-soft); font-size: .9rem; line-height: 1.45; }
.ps-deadend-acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 13px; }
.ps-deadend-auto { background: #0c5e52; border-color: #0c5e52; color: #fff; }
.ps-deadend-auto:hover { background: #0a4f45; box-shadow: 0 9px 20px -10px rgba(12,94,82,.9); transform: translateY(-1px); }
.ps-deadend-other { border: 0; background: none; color: var(--ps-ink-soft); font-weight: 700; font-size: .86rem;
  text-decoration: underline; cursor: pointer; padding: 6px 4px; }
.ps-deadend-other:hover { color: var(--ps-ink); }
.ps-deadend-note { margin: 0; font-size: .88rem; color: #7a4e08; }
.ps-deadend-end { margin-top: 12px; }

/* Automatisch ergänzter Strang: dauerhafte Kennzeichnung + kurzer Blink */
.ps-branch-auto { font-size: .72rem; font-weight: 800; color: #0c5e52; background: #d9f0ea;
  border: 1px solid #a9ddd1; border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.ps-ast.is-autoadded { position: relative; }
.ps-ast.is-autoadded > .ps-branch-head { padding-left: 8px; border-left: 3px solid #34b3a0; }
.ps-ast.is-flash { animation: ps-flash 1.6s ease; border-radius: 12px; }
.ps-node.is-flash, [data-pt].is-flash { animation: ps-flash 2s ease; border-radius: 10px; }
@keyframes ps-flash {
  0%   { box-shadow: 0 0 0 0 rgba(52,179,160,.0); background: rgba(52,179,160,.28); }
  25%  { box-shadow: 0 0 0 4px rgba(52,179,160,.45); background: rgba(52,179,160,.24); }
  100% { box-shadow: 0 0 0 0 rgba(52,179,160,0); background: transparent; }
}

/* Fokussiertes Abzweig-Menü (Neue Richtung) im hellen Rahmen wie ps-menu */
.ps-branchhint .ps-btn-primary { background: #0c5e52; color: #fff; border-color: #0c5e52; margin-top: 4px; }
.ps-branchhint .ps-btn-primary:hover { background: #0a4f45; }

@media (max-width: 480px) {
  .ps-deadend-acts { flex-direction: column; align-items: stretch; }
  .ps-deadend-acts .ps-btn { width: 100%; }
}

/* ============================================================
   Picker-UX: übersichtliche Abstandsauswahl + direkte Übernahme
   ============================================================ */
/* Kurzer Hinweis unter der Abstands-Überschrift */
.ps-dist-hint { margin: 2px 0 10px; font-size: .86rem; color: #a9c2d8; }
.ps-picker-dist.is-missing { outline: 2px solid var(--ps-warn); outline-offset: 6px; border-radius: 12px; animation: ps-flash 2.2s ease; }
/* Häufige Werte + Gruppen nutzen die bestehende .ps-dist-row/.ps-chip-dist2-Optik */
.ps-dist-row .ps-chip-pick.ps-chip-dist2 { min-height: 44px; }
/* „Weitere Abstände anzeigen/ausblenden" */
.ps-dist-more-toggle { display: inline-flex; align-items: center; gap: 7px; margin: 12px 0 2px; padding: 8px 12px;
  background: transparent; border: 1px solid #2c5070; border-radius: 999px; color: #cfe0f0; font-weight: 700; font-size: .86rem;
  cursor: pointer; min-height: 40px; transition: .15s var(--ps-ease); }
.ps-dist-more-toggle:hover { border-color: var(--ps-amber); color: #eaf2fb; }
.ps-dist-more-chev { transition: transform .18s var(--ps-ease); }
.ps-dist-section.is-expanded .ps-dist-more-chev { transform: rotate(180deg); }
/* Gruppen (kurz/mittel/lang) sind NUR im ausgeklappten Zustand sichtbar – klassen-basiert,
   damit der Zustand nicht am [hidden]-Attribut vs. display:flex scheitert. Sehr viele lange
   Abstände bekommen einen kompakten, begrenzten Scrollbereich. */
.ps-dist-groups { display: none; margin-top: 10px; flex-direction: column; gap: 12px;
    max-height: 260px; overflow-y: auto; padding-right: 4px; }
.ps-dist-section.is-expanded .ps-dist-groups { display: flex; }
.ps-dist-group-lbl { display: block; margin-bottom: 7px; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: #9fb6cc; }
.ps-dist-group-lbl small { text-transform: none; letter-spacing: 0; font-weight: 600; color: #7f97ae; margin-left: 6px; }
/* Ausgewählter Abstand: kompakte, klare Zusammenfassung */
.ps-dist-chosen-box { margin: 14px 0 2px; padding: 11px 14px; background: rgba(242,179,93,.12); border: 1px solid rgba(242,179,93,.4); border-radius: 11px; }
.ps-dist-chosen-lbl { margin: 0; font-size: .98rem; color: #eaf2fb; font-weight: 600; }
.ps-dist-chosen-lbl strong { color: #ffd79a; }
.ps-dist-chosen-check { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-left: 4px; border-radius: 50%;
  background: var(--ps-ok); color: #fff; font-size: 12px; font-weight: 900; vertical-align: middle; }
.ps-dist-chosen-sub { margin: 5px 0 0; font-size: .84rem; color: #a9c2d8; }

/* ===== Freie Abstandseingabe: Zahlenfeld + Slider (Picker, dunkles Thema) ===== */
.ps-dist-free { margin: 4px 0 6px; padding: 14px; background: #14304a; border: 1px solid #2c5070; border-radius: 14px; }
.ps-dist-input-row { display: flex; align-items: stretch; gap: 10px; }
.ps-dist-step { flex: 0 0 auto; width: 50px; min-height: 50px; border-radius: 12px; border: 1.5px solid #2c5070; background: #0f2238; color: #eaf2fb; font-size: 1.6rem; font-weight: 700; line-height: 1; cursor: pointer; transition: border-color .15s, color .15s; }
.ps-dist-step:hover { border-color: var(--ps-amber); color: var(--ps-amber); }
.ps-dist-step:focus-visible { outline: 2px solid var(--ps-amber); outline-offset: 2px; }
.ps-dist-field { flex: 1 1 auto; display: flex; align-items: center; gap: 6px; padding: 0 12px; background: #0f2238; border: 1.5px solid #2c5070; border-radius: 12px; }
.ps-dist-field:focus-within { border-color: var(--ps-amber); box-shadow: 0 0 0 3px rgba(242,179,93,.22); }
.ps-dist-num { flex: 1 1 auto; width: 100%; min-height: 50px; border: 0; outline: none; background: transparent; color: #fff; font: inherit; font-size: 1.5rem; font-weight: 800; text-align: center; }
.ps-dist-unit { flex: 0 0 auto; color: #a9c2d8; font-size: 1.05rem; font-weight: 700; }
.ps-dist-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; margin: 16px 0 4px; border-radius: 999px; outline-offset: 4px; background: #0f2238; border: 1px solid #2c5070; cursor: pointer; }
.ps-dist-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; background: #F2B35D; border: 3px solid #0B1625; box-shadow: 0 4px 12px -3px rgba(0,0,0,.6); }
.ps-dist-slider::-webkit-slider-thumb:hover { transform: scale(1.08); }
.ps-dist-slider::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; cursor: pointer; background: #F2B35D; border: 3px solid #0B1625; }
.ps-dist-slider:focus-visible { outline: 2px solid var(--ps-amber); }
/* Min/Max-Beschriftung unter dem diskreten Regler (nur echte Systemwerte) */
.ps-dist-slider-scale { display: flex; justify-content: space-between; margin: 0 2px 2px; font-size: .78rem; font-weight: 600; color: #a9c2d8; }

/* Kundenkonto: Konfiguration speichern (Phase 5) */
.ps-myconfigs-link { display: block; text-align: center; margin-top: 2px; font-size: .82rem; font-weight: 600; color: var(--ps-ink-soft, #55636f); text-decoration: underline; text-underline-offset: 2px; }
.ps-myconfigs-link:hover { color: var(--ps-ink, #22303c); }
.ps-modal-save .ps-modal-content { max-width: 480px; }
.ps-save-modal { display: flex; flex-direction: column; gap: 10px; }
.ps-save-p { margin: 0; font-size: .95rem; line-height: 1.5; color: #cfe0f0; }
.ps-save-lbl { font-size: .8rem; font-weight: 700; color: #a9c2d8; }
.ps-save-name { width: 100%; padding: 11px 12px; font: inherit; font-size: 1rem; font-weight: 600; color: #fff; background: #0f2238; border: 1.5px solid #2c5070; border-radius: 10px; }
.ps-save-name:focus-visible { outline: 2px solid var(--ps-amber); outline-offset: 1px; }
.ps-save-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.ps-save-msg { min-height: 1.2em; }
.ps-save-err { color: #ffb4a6; font-weight: 700; font-size: .9rem; }
.ps-save-okmsg { color: #8fd3c6; font-weight: 700; font-size: .95rem; }
.ps-save-note { margin: 2px 0 0; font-size: .8rem; color: #a9c2d8; line-height: 1.5; }
.ps-save-note a { color: #cfe0f0; }
.ps-dist-resolved { margin: 12px 0 4px; font-size: 1.02rem; color: #eaf2fb; font-weight: 600; line-height: 1.4; }
.ps-dist-resolved strong { color: #ffd79a; }
.ps-dist-res-err { color: #ffb4a6; font-weight: 700; }
.ps-dist-autonote { margin: 2px 0 0; font-size: .82rem; color: #a9c2d8; line-height: 1.45; }
.ps-dist-quick-lbl { margin: 15px 0 7px; font-size: .84rem; color: #a9c2d8; font-weight: 600; }
.ps-dist-apply-row { display: flex; justify-content: flex-end; margin-top: 16px; }
.ps-dist-apply-row .ps-btn { min-height: 48px; padding: 13px 28px; }
.ps-dist-apply-row .ps-btn[disabled], .ps-dist-apply-row .ps-btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

/* ===== Dynamische Abstandsvorschläge um den Wunsch (Picker, dunkles Thema) ===== */
.ps-dist-wunschline { margin: 10px 0 2px; font-size: .95rem; color: #cfe0f0; font-weight: 600; }
.ps-dist-wunschline strong { color: #ffd79a; font-size: 1.05rem; }
.ps-dist-suggest { display: flex; flex-direction: column; gap: 12px; margin: 12px 0 4px; }
.ps-dist-sugg-group { display: flex; flex-direction: column; gap: 7px; }
.ps-dist-sugg-lbl { font-size: .76rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #a9c2d8; }
.ps-dist-sugg-mid .ps-dist-sugg-lbl { color: #ffd79a; }
.ps-dist-sugg-row { display: flex; flex-wrap: wrap; gap: 9px; }
.ps-dist-sugg { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 92px; min-height: 54px; padding: 9px 15px; cursor: pointer;
    background: #14304a; border: 1.5px solid #2c5070; border-radius: 12px; color: #eaf2fb; text-align: left; transition: border-color .14s, background .14s, box-shadow .14s; }
.ps-dist-sugg:hover { border-color: var(--ps-amber); background: #18395a; }
.ps-dist-sugg:focus-visible { outline: 2px solid var(--ps-amber); outline-offset: 2px; }
.ps-dist-sugg-val { font-size: 1.05rem; font-weight: 800; color: #fff; line-height: 1.12; }
.ps-dist-sugg-dev { font-size: .74rem; font-weight: 600; color: #a9c2d8; }
.ps-dist-sugg.is-rec { border-color: #b9772b; box-shadow: inset 0 0 0 1px rgba(242,179,93,.35); }
.ps-dist-sugg.is-rec .ps-dist-sugg-dev { color: #f0c088; }
.ps-dist-sugg.is-exact { border-color: #2f9e64; box-shadow: inset 0 0 0 1px rgba(52,179,102,.45); }
.ps-dist-sugg.is-exact .ps-dist-sugg-dev { color: #8fe0b0; }
.ps-dist-sugg.is-on { background: #F2B35D; border-color: #b9772b; box-shadow: 0 0 0 2px rgba(242,179,93,.4); }
.ps-dist-sugg.is-on .ps-dist-sugg-val { color: #0B1625; }
.ps-dist-sugg.is-on .ps-dist-sugg-dev { color: #3a2406; font-weight: 700; }
.ps-dist-selected { margin: 12px 0 4px; padding: 11px 14px; background: rgba(242,179,93,.12); border: 1px solid rgba(242,179,93,.4); border-radius: 11px; font-size: .98rem; color: #eaf2fb; font-weight: 600; line-height: 1.45; }
.ps-dist-selected strong { color: #ffd79a; }
.ps-dist-nomax { margin: 0 0 8px; font-size: .9rem; color: #ffcf9a; line-height: 1.45; }
.ps-dist-nomax strong { color: #fff; }
.ps-dist-allrow { display: flex; flex-wrap: wrap; gap: 9px; padding-top: 2px; }
.ps-dist-endwrap { margin: 12px 0 2px; }

/* Wunsch/eingeplant im Streckenüberblick (helle Seite) */
.ps-chip-dist.has-wunsch { display: inline-flex; flex-direction: column; line-height: 1.06; padding-top: 6px; padding-bottom: 6px; }
.ps-chip-dist-req { display: block; font-size: .66rem; font-weight: 700; color: var(--ps-amber-2); letter-spacing: .01em; }
.ps-chip-dist-res { display: block; }

/* Technische Details (Kabelbegriffe hierher ausgelagert) */
.ps-dist-tech { margin: 12px 0 2px; }
.ps-dist-tech > summary { cursor: pointer; font-size: .85rem; font-weight: 700; color: #a9c2d8; padding: 6px 0; list-style: revert; }
.ps-dist-tech > summary:hover { color: #eaf2fb; }
.ps-dist-tech-body { margin-top: 6px; font-size: .85rem; color: #b8cadd; }
.ps-dist-tech-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 5px 12px; }
.ps-dist-tech-list li { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; border-bottom: 1px dashed #24384f; }
.ps-dist-tech-val { font-weight: 700; color: #eaf2fb; }
.ps-dist-tech-via { color: #9fb6cc; }

/* „Nutzung der Leuchte" – klar vom Abstand getrennt, kein technischer Filter */
.ps-picker-usagekind { margin: 18px 0 4px; padding-top: 14px; border-top: 1px solid #24384f; }
.ps-usagekind-sub { margin: 8px 0 0; font-size: .84rem; color: #a9c2d8; }

/* Schlanker Fußbereich (kein Übernehmen-Button mehr) */
.ps-pick-footer { position: sticky; bottom: 0; margin-top: 14px; padding: 11px 14px; background: rgba(11,22,37,.96);
  border-top: 1px solid #24384f; border-radius: 0 0 12px 12px; backdrop-filter: blur(3px); font-size: .9rem; color: #cfe0f0; }
.ps-pick-footer-info.is-ready strong { color: #ffd79a; }
.ps-pick-footer-warn { color: #ffcf8f; font-weight: 700; }
.ps-pick-footer-err { color: #ff9b93; font-weight: 700; }

/* Produktkarte: direkte Übernahme; „Aktuell" beim Ändern */
.ps-pc.is-current { outline: 2px solid var(--ps-ok); outline-offset: 2px; }
.ps-pc-current { font-size: .72rem; font-weight: 800; color: #fff; background: var(--ps-ok); border-radius: 999px; padding: 1px 8px; vertical-align: middle; }
.ps-pc-take[data-busy="1"] { opacity: 1; }
.ps-pc-take .ps-spin { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }

/* Fokus-Sichtbarkeit + Rückkehr zur neu hinzugefügten Leuchte */
.ps-node:focus { outline: 2px solid var(--ps-amber); outline-offset: 2px; }
.ps-node:focus-visible { outline: 2px solid var(--ps-amber); outline-offset: 2px; }
.ps-chip-dist2:focus-visible, .ps-pc-take:focus-visible, .ps-dist-more-toggle:focus-visible { outline: 2px solid var(--ps-amber); outline-offset: 2px; }

@media (max-width: 480px) {
  .ps-dist-tech-list { grid-template-columns: 1fr; }
  .ps-pick-footer { font-size: .84rem; }
}

/* ============================================================
   Stromkreise / getrennte Plug-&-Shine-Systeme (Mehr-Trafo)
   ============================================================ */
/* Einzelsystem-Zusammenfassung */
.ps-syscard-single .ps-sysgrid { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.ps-sysitem { display: flex; flex-direction: column; gap: 2px; }
.ps-sysitem-l { font-size: .78rem; color: var(--ps-ink-soft); font-weight: 600; }
.ps-sysitem-v { font-size: 1.05rem; font-weight: 800; color: var(--ps-ink); }
/* Neutraler Info-Hinweis bei mehreren Systemen (kein roter Fehler) */
.ps-syshint { display: flex; align-items: flex-start; gap: 11px; padding: 13px 15px; margin: 2px 0 4px;
  background: #fff7e9; border: 1px solid #f0d9a8; border-radius: 12px; color: #6b4e12; font-size: .92rem; line-height: 1.45; }
.ps-syshint svg { flex: 0 0 auto; color: var(--ps-warn); margin-top: 1px; }
.ps-syshint strong { color: #5a3f0c; }
/* System-Karten (getrennt) */
.ps-syscards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.ps-syscard { border: 1px solid var(--ps-line); border-radius: 12px; padding: 13px 15px; background: #fbfdff; border-left: 4px solid var(--ps-teal); }
.ps-syscard.is-warn { border-left-color: var(--ps-err); background: #fdf5f4; }
.ps-syscard-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ps-syscard-sys { font-size: 1.02rem; font-weight: 800; color: var(--ps-ink); }
.ps-syscard-trafo { font-size: .82rem; font-weight: 800; color: #0c5e52; background: #d9f0ea; border-radius: 999px; padding: 2px 10px; }
.ps-syscard.is-warn .ps-syscard-trafo { color: var(--ps-err); background: #fbe3e1; }
.ps-syscard-list { list-style: none; margin: 0; padding: 0; }
.ps-syscard-list li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px dashed var(--ps-line); font-size: .9rem; }
.ps-syscard-list li:last-child { border-bottom: 0; }
.ps-syscard-list li span { color: var(--ps-ink-soft); }
.ps-syscard-list li strong { color: var(--ps-ink); font-weight: 700; }
.ps-syscard-neu strong { color: #0c5e52 !important; }

/* Einspeisepunkt-Zustände der Systemkarte */
.ps-syscard.is-attention { border-left-color: var(--ps-warn); background: #fff8ec; }
.ps-syscard-prompt { margin: 0 0 8px; padding: 8px 10px; background: #fff2d6; border: 1px solid #f0d9a8; border-radius: 8px;
  font-size: .86rem; color: #6b4e12; font-weight: 600; }
.ps-syscard.is-warn .ps-syscard-prompt { background: #fbe3e1; border-color: #f0c9c6; color: #8a2b23; }
.ps-syscard-foot { margin-top: 10px; }
.ps-syscard-foot .ps-btn { width: 100%; }
.ps-einspeise-change { border: 0; background: none; color: var(--ps-ink-soft); font-weight: 700; font-size: .84rem;
  text-decoration: underline; cursor: pointer; padding: 4px 2px; }
.ps-einspeise-change:hover { color: var(--ps-ink); }
/* Warenkorb-Sperr-Hinweis */
.ps-cart-block-hint { margin: 0 0 6px; font-size: .82rem; color: #6b4e12; font-weight: 600; }

/* Einspeisepunkt-Dialog (im dunklen Modal, konsistent zu den Pickern) */
.ps-einspeise-q { margin: 6px 0 10px; font-weight: 800; color: #eaf2fb; }
.ps-einspeise .ps-menu-item { text-align: left; }
.ps-einspeise-dist .ps-picker-dist { margin-top: 4px; }

@media (max-width: 480px) {
  .ps-syscards { grid-template-columns: 1fr; }
  .ps-syshint { font-size: .86rem; }
}

/* ---- „Zurück zur Auswahl"-Link (Kopf des Expertenmodus) ---- */
.ps-backlink {
  display: inline-flex; align-items: center; gap: 6px;
  margin: clamp(14px, 2.4vw, 22px) 0 2px;
  font-size: .95rem; font-weight: 600; text-decoration: none;
  color: var(--ps-ink-soft, #5b6b7d);
}
.ps-backlink:hover { color: var(--ps-amber-2, #f5921e); }
.ps-backlink:focus-visible { outline: 3px solid rgba(245,146,30,.55); outline-offset: 2px; border-radius: 6px; }

/* ---- Einstiegs-Auswahl: geführt vs. Experte (direkt unter dem Video-Showcase) ---- */
.ps-entry { margin: clamp(24px, 4vw, 44px) 0 clamp(6px, 1.5vw, 14px); scroll-margin-top: 18px; }
.ps-entry:focus { outline: none; }
.ps-entry-head { max-width: 720px; margin: 0 auto clamp(18px, 2.6vw, 28px); text-align: center; }
.ps-entry-title {
  margin: 0 0 8px;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 800; letter-spacing: -.01em;
  color: var(--ps-ink, #10233a);
}
.ps-entry-lead {
  margin: 0 auto; max-width: 640px;
  font-size: 1rem; line-height: 1.55;
  color: var(--ps-ink-soft, #5b6b7d);
}
.ps-entry-cards {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 24px);
  max-width: 940px; margin: 0 auto;
}
.ps-entry-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  padding: clamp(22px, 3vw, 30px);
  text-decoration: none;
  background: var(--ps-panel, #fff);
  border: 1.5px solid var(--ps-line-2, #d3deea);
  border-radius: var(--ps-radius, 18px);
  box-shadow: var(--ps-shadow-s, 0 10px 26px -16px rgba(10,22,38,.42));
  color: var(--ps-ink, #19283a);
  transition: transform .18s var(--ps-ease, ease), box-shadow .18s var(--ps-ease, ease), border-color .18s var(--ps-ease, ease);
}
.ps-entry-card:hover { transform: translateY(-3px); box-shadow: 0 26px 52px -26px rgba(10,22,38,.5); border-color: var(--ps-amber-2, #f5921e); }
.ps-entry-card:focus-visible { outline: 3px solid rgba(245,146,30,.55); outline-offset: 3px; }
.ps-entry-card--guided { border-color: rgba(245,146,30,.5); }
.ps-entry-badge {
  position: absolute; top: 14px; right: 14px;
  font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: #3a2406; background: linear-gradient(135deg, var(--ps-amber, #ffb24d), var(--ps-amber-2, #f5921e));
  padding: 4px 10px; border-radius: 999px;
}
.ps-entry-ico {
  width: 52px; height: 52px; flex: none; display: grid; place-items: center;
  border-radius: 14px; background: var(--ps-bg, #f4f7fb); color: var(--ps-amber-2, #f5921e);
}
.ps-entry-ico svg { width: 28px; height: 28px; }
.ps-entry-card--expert .ps-entry-ico { color: var(--ps-teal, #34b3a0); }
.ps-entry-card-title { font-size: 1.2rem; font-weight: 800; letter-spacing: -.01em; }
.ps-entry-card-desc { flex: 1 1 auto; font-size: .96rem; line-height: 1.5; color: var(--ps-ink-soft, #5b6b7d); }
.ps-entry-cta { margin-top: 6px; }
.ps-entry-card:hover .ps-entry-cta.ps-btn-outline { border-color: var(--ps-amber-2, #f5921e); color: var(--ps-amber-2, #f5921e); }
@media (max-width: 720px) {
  .ps-entry-cards { grid-template-columns: 1fr; }
  .ps-entry-cta { width: 100%; justify-content: center; }
}

/* ---- Übergang Showcase → echter Planer (Anker #plug-shine-planer) ---- */
.ps-handoff {
  scroll-margin-top: 18px;
  margin: 40px 0 22px;
  padding: 26px 20px 0;
  text-align: center;
  border-top: 1px solid var(--ps-line, rgba(255,255,255,.08));
}
.ps-handoff-title {
  margin: 0 0 6px;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--ps-ink, #10233a);
}
.ps-handoff-title:focus { outline: none; }
.ps-handoff-title:focus-visible { outline: 3px solid var(--ps-amber, #f2b35d); outline-offset: 4px; border-radius: 8px; }
.ps-handoff-sub {
  margin: 0 auto;
  max-width: 640px;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ps-ink-soft, #5b6b7d);
}
@media (max-width: 480px) {
  .ps-handoff { margin: 26px 0 16px; padding-top: 20px; }
}

/* ============ Picker-Feinschliff: Kopf, Produkttyp-Schalter, Bild-Fallback ============ */

/* Kopfzeilen nicht unter den (jetzt absolut positionierten) Schließen-Button laufen lassen. */
.ps-picker > h4, .ps-menu > h4, .ps-freeask > h4, .ps-modal-content > .ps-modal-title { padding-right: 44px; }

/* Produkttyp-Schalter: Alle / Leuchten / LED-Strips & Lichtlinien (gut sichtbar, nicht hinter Filtern). */
.ps-pick-type { margin: 0 0 16px; }
.ps-pick-type .ps-pick-lbl { display: block; color: #cfe0f0; font-weight: 600; font-size: .9rem; margin-bottom: 9px; }
.ps-pick-type-seg { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid #24384f; border-radius: 999px; background: #0f2238; flex-wrap: wrap; }
.ps-pick-type-seg button { border: 0; background: transparent; color: #9fb6cc; font-weight: 600; font-size: .86rem; padding: 8px 15px; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background .16s, color .16s; }
.ps-pick-type-seg button:hover { color: #eaf2fb; }
.ps-pick-type-seg button.is-on { background: var(--ps-amber); color: #0b1625; }
.ps-pick-type-seg button:focus-visible { outline: 2px solid var(--ps-amber); outline-offset: 2px; }

/* Produktbilder: einheitlicher, ruhiger Bildbereich (contain); neutrales Fallback statt leerer Fläche. */
.ps-pc-img { background-repeat: no-repeat; background-position: center; background-size: contain; }
.ps-pc-img.is-fallback { background-size: 46px 46px; background-color: #0c1b2d; }
.ps-pc-img .ps-noimg { text-align: center; padding: 0 8px; }
.ps-pc-img.is-fallback .ps-noimg { color: #6f8ca8; }

/* ============ Lichtplan: reale Kabelanschlüsse (Buchsen) ============ */
.ps-freetoggle { display: flex; justify-content: flex-end; margin: 0 0 8px; }
.ps-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; font-size: .82rem; color: var(--ps-ink-soft); font-weight: 600; }
.ps-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.ps-switch-track { width: 34px; height: 18px; border-radius: 999px; background: #c9d6e3; position: relative; transition: background .16s; flex: none; }
.ps-switch-thumb { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .16s; }
.ps-switch input:checked + .ps-switch-track { background: var(--ps-amber-2, #f5921e); }
.ps-switch input:checked + .ps-switch-track .ps-switch-thumb { transform: translateX(16px); }
.ps-switch input:focus-visible + .ps-switch-track { outline: 2px solid var(--ps-amber); outline-offset: 2px; }
.ps-buchse { transition: opacity .12s; }
.ps-buchse:hover circle { stroke: #bfe4ff; }
.ps-buchse:hover path { stroke: #ffffff; }

/* Strang-Zusammenfassung (Buchsenübersicht je Kabelstrang) */
.ps-strangsum { margin: 6px 0 2px; display: flex; flex-direction: column; gap: 6px; }
.ps-strangsum-row { font-size: .8rem; color: var(--ps-ink-soft); display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.ps-strangsum-row strong { color: var(--ps-ink); font-weight: 700; }
.ps-strangsum-row .ps-ss-frei { color: #2b7cc4; font-weight: 700; }
.ps-strangsum-row .ps-ss-muted { color: #8aa0b4; }
.ps-strangsum-row .ps-ss-hint { color: #7f95a9; font-size: .76rem; }

/* Leuchte an fester freier Buchse (kein Abstands-Picker) */
.ps-atbuchse-fixed { margin: 4px 0 14px; padding: 12px 14px; border: 1px solid #24384f; border-radius: 12px; background: rgba(87,166,222,.08); }
.ps-atbuchse-lead { margin: 0 0 6px; color: #eaf2fb; font-weight: 600; font-size: .92rem; }
.ps-atbuchse-pos { margin: 0; color: #cfe0f0; font-size: .9rem; }
.ps-atbuchse-pos strong { color: #9cd6ff; }
.ps-atbuchse-fixed .ps-dist-tech { margin-top: 10px; }

/* ==================================================================
   Verteiler- & Kabel-Ausgangsdarstellung (Asset 2-27-0)
   Kompakte Kundenkarte, Ausgangslisten, Stücklisten-Begründungen.
   ================================================================== */
.ps-vt-card .ps-result-card-head { align-items: center; }
.ps-auto-badge { display: inline-block; padding: 3px 10px; border-radius: 8px; background: #13403a; border: 1px solid #34b3a0; color: #8fd3c6; font-size: .74rem; font-weight: 800; white-space: nowrap; }
.ps-vt-block { padding: 6px 0 2px; }
.ps-vt-block + .ps-vt-block { border-top: 1px dashed #24384f; margin-top: 10px; padding-top: 12px; }
.ps-vt-sys { color: #1d5f8a; font-weight: 700; font-size: .85rem; margin-bottom: 2px; }
.ps-vt-sum { color: #16283a; font-size: .98rem; margin-bottom: 4px; }
.ps-vt-grund { margin: 0 0 10px; color: #47617a; font-size: .88rem; line-height: 1.45; }
.ps-vt-nr { color: #47617a; font-weight: 700; font-size: .82rem; margin: 8px 0 4px; }
.ps-vt-list { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 6px; }
.ps-vt-out { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; border: 1px solid #24384f; background: rgba(16,42,66,.45); }
.ps-vt-out.is-frei { border-style: dashed; opacity: .8; }
.ps-vt-outnr { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #132f47; border: 1.5px solid #57a6de; color: #cfe6f8; font-weight: 800; font-size: .8rem; }
.ps-vt-out.is-frei .ps-vt-outnr { border-style: dashed; color: #8fb0cc; }
.ps-vt-outlbl { color: #eaf2fb; font-weight: 700; font-size: .9rem; }
.ps-vt-out.is-frei .ps-vt-outlbl { color: #9fb6cc; font-weight: 600; }
.ps-vt-outmeta { margin-left: auto; color: #9fb6cc; font-size: .8rem; text-align: right; }
.ps-vt-buchse { margin: 6px 0 0; color: #47617a; font-size: .84rem; line-height: 1.45; }
.ps-bom-expl { display: block; margin-top: 3px; color: #5b7690; font-size: .8rem; line-height: 1.4; }
.ps-tech-vt .ps-tech-umsetzung.is-frei { opacity: .75; }
.ps-tech-vtnote { margin: 6px 0 12px; color: #5b7690; font-size: .8rem; line-height: 1.45; }
@media (max-width: 480px) {
    .ps-vt-out { flex-wrap: wrap; }
    .ps-vt-outmeta { margin-left: 34px; width: 100%; text-align: left; }
}