@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

/*
   ps-showcase.css – Plug-&-Shine-Beispielgarten (Showcase)
   ========================================================
   Vollständig gekapselte Einstiegs-Darstellung für die Seite
   /plug-shine-konfigurator. ERSETZT den alten statischen Intro-/Hero-Bereich.
   ALLE Regeln sind unter .ps-showcase gescopet – keine globalen Regeln, die
   Shop oder den echten Konfigurator verändern. Eigene Variablen (--psc-*),
   damit nichts mit --ps-* des Konfigurators kollidiert.

   WICHTIG (Abgrenzung): Die hier gezeigte Verkabelung ist eine FESTE
   Beispielerklärung. Sie hat NICHTS mit dem echten CableSolver / der
   Kundenplanung zu tun.
*/

.ps-showcase {
    --psc-bg: #060B14;
    --psc-ink: #F5F1E8;
    --psc-amber: #F2B35D;
    --psc-cyan: #66C6DA;
    --psc-green: #84D3A6;
    --psc-panel: rgba(9,14,24,.72);
    --psc-line: rgba(245,241,232,.12);

    position: relative;
    display: flex;
    flex-direction: column;
    height: 100vh;            /* JS überschreibt exakt auf „bis Viewport-Unterkante" */
    max-height: 100vh;
    min-height: 620px;
    overflow: hidden;         /* NUR die Showcase ist ein kompakter Screen-Abschnitt */
    margin: 0 0 0;
    border-radius: 16px;
    background: var(--psc-bg);
    color: var(--psc-ink);
    font-family: 'Hanken Grotesk', system-ui, -apple-system, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    isolation: isolate;
}
.ps-showcase *, .ps-showcase *::before, .ps-showcase *::after { box-sizing: border-box; }
.ps-showcase button { font-family: inherit; }

/* ambient backdrop */
.ps-showcase__bg {
    position: absolute; inset: 0; z-index: 0;
    background: radial-gradient(120% 90% at 50% 12%, #0E1727 0%, #080D16 60%, #05080F 100%);
}

/* one-screen column */
.ps-showcase__col {
    position: relative; z-index: 1;
    flex: 1 1 auto; min-height: 0;
    max-width: 1560px; width: 100%; margin: 0 auto;
    padding: 12px 24px 16px;
    display: flex; flex-direction: column; gap: 11px;
}

/* ---------- HEADER ---------- */
.ps-showcase__header {
    flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.ps-showcase__brand { display: flex; flex-direction: column; gap: 2px; }
.ps-showcase__brandname { font-size: 18px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; line-height: 1; }
.ps-showcase__brandname b { color: var(--psc-amber); font-weight: 600; }
.ps-showcase__kicker { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 8.5px; letter-spacing: .26em; text-transform: uppercase; color: rgba(245,241,232,.42); }

.ps-showcase__toggle {
    display: flex; gap: 4px; padding: 4px;
    border: 1px solid rgba(245,241,232,.14); border-radius: 999px;
    background: rgba(10,16,28,.6); backdrop-filter: blur(10px);
}
.ps-showcase__toggle button {
    padding: 8px 17px; border: 0; border-radius: 999px; background: transparent;
    color: rgba(245,241,232,.72); font-weight: 600; font-size: 13px; cursor: pointer; white-space: nowrap;
    transition: background .18s, color .18s;
}
.ps-showcase__toggle button.is-on { background: var(--psc-amber); color: #0B1625; }

.ps-showcase__replay {
    display: flex; align-items: center; gap: 7px; font-weight: 500; font-size: 12.5px;
    color: rgba(245,241,232,.6); background: rgba(10,16,28,.5);
    border: 1px solid rgba(245,241,232,.12); border-radius: 999px; padding: 7px 13px; cursor: pointer;
    backdrop-filter: blur(8px); transition: color .18s, background .18s;
}
.ps-showcase__replay:hover { color: var(--psc-ink); background: rgba(10,16,28,.75); }
.ps-showcase__replay span { font-size: 14px; line-height: 1; }

/* ---------- GARDEN STAGE ---------- */
.ps-showcase__stage {
    flex: 1 1 auto; min-height: 0; position: relative; overflow: hidden;
    border-radius: 14px; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 30px 80px rgba(0,0,0,.5);
    background: #05080f;
}
.ps-showcase__camera {
    position: relative; height: 100%; width: auto; aspect-ratio: 1672 / 941; max-width: 100%;
    transform-origin: center; transform: none;
    transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.ps-showcase__img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 10px;
    transition: filter .35s;
}
.ps-showcase.is-tech .ps-showcase__img { filter: brightness(.62) saturate(.9); }
.ps-showcase__dim {
    position: absolute; inset: 0; border-radius: 10px; background: rgba(7,11,20,.30);
    opacity: 0; transition: opacity .35s; pointer-events: none;
}
.ps-showcase.is-tech .ps-showcase__dim { opacity: 1; }

.ps-showcase__zonelabels {
    position: absolute; inset: 0; pointer-events: none;
    font-family: 'IBM Plex Mono', ui-monospace, monospace; text-transform: uppercase;
    letter-spacing: .18em; color: rgba(245,241,232,.38); font-size: 10px;
}
.ps-showcase__zonelabels span { position: absolute; }

.ps-showcase__ring {
    position: absolute; border-radius: 14px; border: 1.5px solid rgba(242,179,93,.7);
    box-shadow: inset 0 0 60px rgba(242,179,93,.16), 0 0 0 100vmax rgba(5,8,15,.34);
    pointer-events: none; opacity: 0; transition: opacity .3s;
}
.ps-showcase__ring.is-on { opacity: 1; }

.ps-showcase__overlay { position: absolute; inset: 0; pointer-events: none; }
.ps-showcase__glow {
    position: absolute; width: 3.6%; aspect-ratio: 1; transform: translate(-50%,-50%);
    border-radius: 50%; mix-blend-mode: screen; filter: blur(1.5px); opacity: 0;
    transition: opacity .3s;
}
.ps-showcase__wiresvg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ps-showcase__node { position: absolute; transform: translate(-50%,-50%); display: flex; align-items: center; gap: 6px; }
.ps-showcase__nodelabel { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 9.5px; letter-spacing: .02em; color: rgba(245,241,232,.9); white-space: nowrap; }

.ps-showcase__legend {
    position: absolute; left: 12px; bottom: 12px; z-index: 6; padding: 10px 12px;
    background: rgba(9,14,24,.9); border: 1px solid var(--psc-line); border-radius: 11px;
    backdrop-filter: blur(14px); box-shadow: 0 12px 34px rgba(0,0,0,.45);
    display: none;
}
.ps-showcase.is-tech .ps-showcase__legend { display: block; }
.ps-showcase__legend .ps-showcase__legendgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 16px; font-size: 10.5px; color: rgba(245,241,232,.82); }
.ps-showcase__legend .ps-showcase__legenditem { display: flex; align-items: center; gap: 8px; }

.ps-showcase__zone { position: absolute; border: 0; background: transparent; cursor: pointer; padding: 0; }
.ps-showcase__zone:focus-visible { outline: 2px solid var(--psc-amber); outline-offset: -2px; border-radius: 8px; }

/* ---------- AREA BAR ---------- */
.ps-showcase__areas {
    flex: none; display: flex; align-items: center; justify-content: center; gap: 7px;
    flex-wrap: nowrap; overflow-x: auto; padding: 7px 10px; border-radius: 14px;
    background: rgba(10,16,28,.62); border: 1px solid rgba(245,241,232,.1); backdrop-filter: blur(14px);
}
.ps-showcase__areas button {
    padding: 8px 13px; border: 1px solid rgba(245,241,232,.14); border-radius: 9px;
    background: rgba(255,255,255,.03); color: rgba(245,241,232,.82); font-weight: 500; font-size: 13px;
    cursor: pointer; white-space: nowrap; flex: none; transition: background .16s, color .16s, border-color .16s;
}
.ps-showcase__areas button:hover { border-color: rgba(242,179,93,.5); }
.ps-showcase__areas button.is-on { background: rgba(242,179,93,.92); color: #0B1625; border-color: transparent; }
.ps-showcase__areas .ps-showcase__sep { width: 1px; height: 20px; background: rgba(245,241,232,.12); margin: 0 1px; flex: none; }

/* ---------- INFO BAND ---------- */
.ps-showcase__info {
    flex: none; display: grid;
    grid-template-columns: minmax(190px,1fr) minmax(300px,1.6fr) minmax(230px,1.05fr);
    gap: 20px; align-items: center; padding: 15px 20px;
    background: var(--psc-panel); border: 1px solid rgba(245,241,232,.1); border-radius: 16px; backdrop-filter: blur(12px);
}
.ps-showcase__infocol { min-width: 0; }
.ps-showcase__mode { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--psc-amber); margin-bottom: 6px; }
.ps-showcase__areaname { font-size: 21px; font-weight: 600; line-height: 1.05; margin-bottom: 5px; }
.ps-showcase__desc { font-size: 12.5px; line-height: 1.5; color: rgba(245,241,232,.72); margin: 0; }
.ps-showcase__specline { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px; color: var(--psc-green); margin-top: 8px; display: none; }
.ps-showcase.is-tech .ps-showcase__specline { display: block; }

.ps-showcase__lbl { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: rgba(245,241,232,.45); margin-bottom: 8px; }
.ps-showcase__products { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 3px; }
.ps-showcase__pcard {
    display: flex; align-items: center; gap: 10px; flex: none; width: 210px; padding: 9px 11px;
    border: 1px solid rgba(245,241,232,.1); border-radius: 11px; background: rgba(255,255,255,.02);
}
.ps-showcase__pico { width: 46px; height: 46px; flex: none; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: #0a0f18; color: var(--psc-amber); }
.ps-showcase__pname { font-size: 13.5px; font-weight: 600; line-height: 1.15; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-showcase__pspec { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10px; color: var(--psc-amber); }
.ps-showcase__phint { font-size: 12px; color: rgba(245,241,232,.55); line-height: 1.5; padding: 11px 13px; border: 1px dashed rgba(245,241,232,.16); border-radius: 11px; background: rgba(255,255,255,.015); }

.ps-showcase__ctacol { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; }
.ps-showcase__ctatext { margin: 0; font-size: 12.5px; line-height: 1.5; color: rgba(245,241,232,.82); }
.ps-showcase__cta {
    display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 24px; border: 0;
    border-radius: 11px; background: var(--psc-amber); color: #0B1625; font-weight: 600; font-size: 14.5px;
    text-decoration: none; cursor: pointer; white-space: nowrap; box-shadow: 0 10px 28px rgba(242,179,93,.32);
    transition: transform .18s, box-shadow .18s;
}
.ps-showcase__cta:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(242,179,93,.5); }
.ps-showcase__cta:focus-visible { outline: 3px solid rgba(242,179,93,.55); outline-offset: 3px; }
.ps-showcase__cta span { font-size: 18px; line-height: 1; }
.ps-showcase__note { font-size: 10.5px; color: rgba(245,241,232,.45); margin: 2px 0 0; }

/* dezenter Direktlink oben rechts (springt ebenfalls zum Planer) */
.ps-showcase__skiplink {
    position: absolute; top: 14px; right: 20px; z-index: 4;
    font-size: 12px; font-weight: 500; color: rgba(245,241,232,.62);
    background: rgba(10,16,28,.55); border: 1px solid rgba(245,241,232,.14); border-radius: 999px;
    padding: 6px 13px; text-decoration: none; backdrop-filter: blur(8px); transition: color .16s, background .16s;
}
.ps-showcase__skiplink:hover { color: var(--psc-ink); background: rgba(10,16,28,.8); }

/* ---------- INTRO OVERLAY ---------- */
.ps-showcase__intro { position: absolute; inset: 0; z-index: 20; background: #04070d; }
.ps-showcase__intro.is-hidden { display: none; }
.ps-showcase__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ps-showcase__introveil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,7,13,.32) 0%, rgba(4,7,13,0) 34%, rgba(4,7,13,.34) 64%, rgba(4,7,13,.9) 100%); }
.ps-showcase__skip {
    position: absolute; top: 20px; right: 22px; z-index: 2; font-weight: 500; font-size: 13px;
    color: rgba(245,241,232,.72); background: rgba(6,10,18,.42); border: 1px solid rgba(245,241,232,.18);
    border-radius: 999px; padding: 9px 16px; cursor: pointer; backdrop-filter: blur(6px); transition: color .16s, background .16s;
}
.ps-showcase__skip:hover { color: #fff; background: rgba(6,10,18,.7); }
.ps-showcase__introfoot { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 24px 48px; display: flex; flex-direction: column; align-items: center; text-align: center; z-index: 2; }
.ps-showcase__introkick { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .34em; text-transform: uppercase; color: var(--psc-amber); margin-bottom: 14px; text-shadow: 0 2px 14px rgba(0,0,0,.7); }
.ps-showcase__introtitle { font-size: clamp(26px, 4.2vw, 52px); font-weight: 300; line-height: 1.06; letter-spacing: -.015em; margin: 0 0 12px; max-width: 820px; }
.ps-showcase__introtitle b { font-weight: 600; }
.ps-showcase__introlead { font-size: 15px; color: rgba(245,241,232,.72); margin: 0 0 24px; max-width: 520px; }
.ps-showcase__introcta { padding: 15px 32px; border: 0; border-radius: 12px; background: var(--psc-amber); color: #0B1625; font-weight: 600; font-size: 15.5px; cursor: pointer; box-shadow: 0 14px 40px rgba(242,179,93,.36); transition: transform .18s; }
.ps-showcase__introcta:hover { transform: translateY(-2px); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
    .ps-showcase { height: auto; max-height: none; overflow: visible; min-height: 0; }
    .ps-showcase__col { padding: 14px 14px 18px; }
    .ps-showcase__stage { height: 46vh; min-height: 260px; flex: none; }
    .ps-showcase__info { grid-template-columns: 1fr; gap: 12px; }
    .ps-showcase__ctacol { align-items: stretch; }
    .ps-showcase__cta { justify-content: center; }
    .ps-showcase__header { flex-wrap: wrap; }
}
@media (max-width: 520px) {
    .ps-showcase__brandname { font-size: 16px; }
    /* Abnahme 2026-07-04: Touch-Ziele >= ~44 px (Befund: vorher 30-32 px hoch).
       Nur mobil; Desktop-Optik unveraendert. */
    .ps-showcase__toggle button, .ps-showcase__areas button { font-size: 12px; padding: 11px 13px; min-height: 44px; }
    .ps-showcase__replay { min-height: 44px; padding: 10px 14px; }
    .ps-showcase__skip { min-height: 44px; padding: 11px 16px; }
    .ps-showcase__areaname { font-size: 18px; }
    .ps-showcase__cta { width: 100%; }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
    .ps-showcase__camera, .ps-showcase__img, .ps-showcase__ring, .ps-showcase__glow,
    .ps-showcase__cta, .ps-showcase__replay, .ps-showcase__introcta { transition: none !important; }
    .ps-showcase__wiresvg .ps-showcase__seg { animation: none !important; }
}

@keyframes psc-dashflow { to { stroke-dashoffset: -26; } }