/* LIGO CUBE B2B – ergänzt das Design-System des Themes (main.css). Nur neue Bausteine, Präfix lcb2b-. */

/* ---------- Bühne ---------- */
.lcb2b-hero .lc-h1 { max-width: 9.5em; }
.lcb2b-facts { margin-top: clamp(28px, 4vw, 44px); }
.lcb2b-facts dt { white-space: nowrap; }
.lcb2b-facts-note { margin-top: 14px; }

/* ---------- Zielgruppen ---------- */
.lcb2b-groups { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--lc-line); }
@media (min-width: 700px) { .lcb2b-groups { grid-template-columns: repeat(2, 1fr); column-gap: 32px; } }
@media (min-width: 1100px) { .lcb2b-groups { grid-template-columns: repeat(3, 1fr); } }
.lcb2b-group { display: grid; grid-template-columns: 52px 1fr 20px; gap: 16px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--lc-line); text-decoration: none; height: 100%; }
.lcb2b-group .lc-feature__icon { width: 52px; height: 52px; margin: 0; }
.lcb2b-group .lc-feature__icon .lc-icon { width: 24px; height: 24px; }
.lcb2b-group strong { display: block; font-family: var(--lc-title); font-weight: 300; font-size: 22px; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.15; margin-bottom: 4px; }
.lcb2b-group span span { display: block; font-size: 14.5px; color: var(--lc-ink-2); line-height: 1.45; }
.lcb2b-group > .lc-icon { width: 18px; height: 18px; color: var(--lc-ink-3); transition: transform 0.15s, color 0.15s; }
.lcb2b-group:hover strong { text-decoration: underline; text-decoration-color: var(--lc-red); text-underline-offset: 4px; }
.lcb2b-group:hover > .lc-icon { transform: translateX(4px); color: var(--lc-red); }

/* ---------- Pilot → Reihe ---------- */
.lcb2b-plan { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--lc-ink); }
@media (min-width: 900px) { .lcb2b-plan { grid-template-columns: repeat(3, 1fr); } }
.lcb2b-plan li { position: relative; padding: 24px 0 26px; border-bottom: 1px solid var(--lc-line); }
@media (min-width: 900px) { .lcb2b-plan li { padding: 28px 40px 8px 0; border-bottom: 0; } .lcb2b-plan li + li { padding-left: 32px; border-left: 1px solid var(--lc-line); } }
.lcb2b-plan__nr { display: block; font-family: var(--lc-title); font-weight: 300; font-size: 30px; line-height: 1; color: var(--lc-red); margin-bottom: 18px; }
.lcb2b-plan__cubes { display: flex; gap: 5px; height: 22px; margin-bottom: 18px; }
.lcb2b-plan__cubes i { display: block; width: 34px; height: 22px; border: 1.5px solid var(--lc-ink); background: linear-gradient(90deg, transparent 62%, var(--lc-ink) 62%, var(--lc-ink) 70%, transparent 70%); }
.lcb2b-plan p { color: var(--lc-ink-2); font-size: 15.5px; max-width: 30em; }

/* ---------- Renditerechner ---------- */
.lcb2b-calc { display: grid; gap: 28px; }
@media (min-width: 1024px) { .lcb2b-calc { grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: start; } }
.lcb2b-calc__inputs { display: grid; gap: 26px; align-content: start; }

.lcb2b-scen { border: 0; padding: 0; margin: 0; min-width: 0; }
.lcb2b-scen legend { margin-bottom: 10px; padding: 0; }
.lcb2b-scen__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.lcb2b-scen__btn { display: grid; gap: 2px; padding: 11px 12px; border: 1px solid var(--lc-line-2); text-decoration: none; background: #fff; transition: border-color 0.15s, background 0.15s; }
.lcb2b-scen__btn strong { font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; }
.lcb2b-scen__btn span { font-size: 13px; color: var(--lc-ink-2); white-space: nowrap; }
.lcb2b-scen__btn:hover { border-color: var(--lc-ink); }
.lcb2b-scen__btn.is-active { border-color: var(--lc-ink); box-shadow: inset 0 0 0 1px var(--lc-ink); }
.lcb2b-scen__btn.is-active strong { color: var(--lc-red); }
@media (max-width: 380px) { .lcb2b-scen__btn span { white-space: normal; } }

.lcb2b-slider { display: grid; gap: 10px; }
.lcb2b-slider__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.lcb2b-slider__head label { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lc-ink-2); }
.lcb2b-slider__val { display: inline-flex; align-items: baseline; gap: 6px; }
.lcb2b-slider__val input { width: 5.2em; min-height: 44px; border: 1px solid var(--lc-line-2); border-radius: 0; padding: 6px 10px; text-align: right; font-family: var(--lc-title); font-weight: 300; font-size: 24px; color: var(--lc-ink); background: #fff; -moz-appearance: textfield; appearance: textfield; }
.lcb2b-slider__val input::-webkit-outer-spin-button, .lcb2b-slider__val input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.lcb2b-slider__val input:focus { outline: none; border-color: var(--lc-ink); box-shadow: inset 0 0 0 1px var(--lc-ink); }
.lcb2b-slider__val span { font-size: 14px; color: var(--lc-ink-2); min-width: 2.6em; }
.lcb2b-slider small { font-size: 13px; color: var(--lc-ink-3); }

.lcb2b-range { -webkit-appearance: none; appearance: none; width: 100%; height: 32px; margin: 0; background: transparent; cursor: pointer; --p: 50%; }
.lcb2b-range:focus { outline: none; }
.lcb2b-range::-webkit-slider-runnable-track { height: 3px; background: linear-gradient(90deg, var(--lc-ink) var(--p), var(--lc-line-2) var(--p)); }
.lcb2b-range::-moz-range-track { height: 3px; background: var(--lc-line-2); }
.lcb2b-range::-moz-range-progress { height: 3px; background: var(--lc-ink); }
.lcb2b-range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9.5px; background: #fff; border: 2px solid var(--lc-ink); border-radius: 0; }
.lcb2b-range::-moz-range-thumb { width: 18px; height: 18px; background: #fff; border: 2px solid var(--lc-ink); border-radius: 0; }
.lcb2b-range:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--lc-red); outline-offset: 2px; }
.lcb2b-range:focus-visible::-moz-range-thumb { outline: 2px solid var(--lc-red); outline-offset: 2px; }
.lcb2b-range[tabindex='-1'] { pointer-events: none; opacity: 0.5; }

.lcb2b-switch { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: 14.5px; color: var(--lc-ink-2); cursor: pointer; padding-top: 4px; border-top: 1px solid var(--lc-line); padding-top: 20px; }
.lcb2b-switch input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--lc-ink); }

/* Ergebnis: dunkle Karte wie der MusterCube-Block */
.lcb2b-calc__out { background: var(--lc-ink); color: #fff; padding: clamp(22px, 3.5vw, 40px); }
.lcb2b-out__label { margin: 0 0 6px; font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #bdbab3; }
.lcb2b-out__big { margin: 0 0 22px; font-family: var(--lc-title); font-weight: 200; font-size: clamp(46px, 7vw, 76px); line-height: 1; letter-spacing: 0.005em; white-space: nowrap; }
.lcb2b-calc__out.is-loss .lcb2b-out__big { color: #ff9aa0; }
.lcb2b-out__kpis { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #4a4a46; margin-bottom: 8px; }
.lcb2b-out__kpis > div { padding: 16px 12px 16px 0; }
.lcb2b-out__kpis > div + div { padding-left: 16px; border-left: 1px solid #4a4a46; }
.lcb2b-out__kpis strong { display: block; font-family: var(--lc-title); font-weight: 300; font-size: clamp(26px, 3vw, 34px); line-height: 1.05; white-space: nowrap; }
.lcb2b-out__kpis span { font-size: 13px; color: #bdbab3; }
.lcb2b-out__rows { border-top-color: #4a4a46; margin-bottom: 22px; }
.lcb2b-out__rows > div { border-bottom-color: #4a4a46; }
.lcb2b-out__rows dt { color: #bdbab3; }
.lcb2b-out__rows dd { font-variant-numeric: tabular-nums; }
.lcb2b-out__rows [hidden] { display: none; }
.lcb2b-chart { margin: 0 0 22px; }
.lcb2b-chart figcaption { font-size: 12.5px; color: #bdbab3; margin-bottom: 8px; }
.lcb2b-chart__svg { width: 100%; height: auto; overflow: visible; }
.lcb2b-chart__svg rect.pos { fill: #fff; }
.lcb2b-chart__svg rect.neg { fill: #6f6d68; }
.lcb2b-chart__svg rect { transition: y 0.2s, height 0.2s; }
.lcb2b-chart__svg line { stroke: var(--lc-red); stroke-width: 1.5; }
.lcb2b-chart__svg text { font-family: var(--lc-font); font-size: 12px; fill: #bdbab3; }
.lcb2b-chart__svg text.val { fill: #fff; font-size: 13px; }
.lcb2b-calc__out .lc-btn--primary { background: #fff; color: var(--lc-ink); border-color: #fff; }
.lcb2b-calc__out .lc-btn--primary:hover { background: var(--lc-bg-2); color: var(--lc-ink); }
.lcb2b-disclaimer { margin: 18px 0 0; font-size: 13px; line-height: 1.55; color: var(--lc-ink-2); max-width: 62em; }

/* ---------- Zielgruppen-Seite ---------- */
.lcb2b-pagehead .lc-actions { margin-top: 24px; }
.lcb2b-pl { display: grid; gap: 36px; }
@media (min-width: 900px) { .lcb2b-pl { grid-template-columns: 1fr 1fr; gap: 72px; } }
.lcb2b-pl__col { border-top: 1px solid var(--lc-ink); padding-top: 22px; }
.lcb2b-dash { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lcb2b-dash li { position: relative; padding-left: 30px; color: var(--lc-ink-2); }
.lcb2b-dash li::before { content: ''; position: absolute; left: 0; top: 0.8em; width: 16px; height: 1.5px; background: var(--lc-ink-3); }
.lcb2b-note { margin-top: 28px; max-width: 62em; }
.lcb2b-example-empty { border: 1px dashed var(--lc-line-2); padding: 20px 22px; }
.lcb2b-example-empty .lc-eyebrow { margin-bottom: 8px; }
.lcb2b-example-empty p:last-child { margin: 0; }

/* Ablauf mit vier Schritten statt sieben */
@media (min-width: 900px) { .lcb2b-steps { grid-template-columns: repeat(4, 1fr); } }

/* Formular */
.lcb2b .lc-form__field { align-content: start; }
.lcb2b-calc-chip[hidden] { display: none; }
.lcb2b-calc-chip .lc-konfig-chip { cursor: pointer; }
.lcb2b-calc-chip .lc-konfig-chip input { width: 18px; height: 18px; margin: 0 8px 0 0; vertical-align: -3px; accent-color: var(--lc-ink); }
.lcb2b-calc-chip small { font-size: 12px; color: var(--lc-ink-2); white-space: nowrap; }

@media print { .lcb2b-calc__out { color: #000; background: #fff; border: 1px solid #000; } }