/* ── SOVP Benchmark Pages ────────────────────────────────────── */

/* from: de/sovp-benchmark/basic/index.html */
/* Map legacy variables to Litzki design tokens */
        :root {
            --text-color:   var(--color-navy);
            --accent-color: var(--color-accent);
            --bg-color:     var(--color-off-white);
            --border-color: var(--color-gray-200);
            --muted-color:  var(--color-gray-500);
        }
        .br-crumb { font-size: var(--text-xs); color: var(--color-gray-500); margin: 1rem 0 0; }
        .br-crumb a { color: var(--color-gray-500); text-decoration: none; }
        .br-crumb a:hover { color: var(--color-accent); }
        .br-crumb span { margin: 0 0.4rem; }
        .br-hero { padding: 2rem 0 2rem; border-bottom: 1px solid var(--color-gray-200); display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: start; }
        .br-hero-label { font-size: var(--text-xs); letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 0.6rem; }
        .br-hero-title { font-size: 2rem; font-weight: bold; color: var(--color-navy); text-transform: uppercase; margin-bottom: 0.75rem; }
        .br-hero-sub { font-size: 1.1rem; color: var(--color-navy); line-height: 1.6; }
        .br-price-val { font-size: 3rem; font-weight: bold; color: var(--color-navy); line-height: 1; }
        .br-price-note { font-size: var(--text-xs); color: var(--color-gray-500); margin-top: 0.25rem; text-align: right; }
        .br-section { margin: 2rem 0; }
        .br-section-title { font-size: var(--text-xs); font-weight: bold; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 1.25rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--color-gray-200); }
        .feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
        .feature-item { display: flex; gap: 0.75rem; align-items: flex-start; }
        .feature-icon { color: var(--color-accent); font-size: var(--text-xs); font-weight: bold; flex-shrink: 0; margin-top: 0.15rem; line-height: 1.6; }
        .feature-text { font-size: 1rem; color: var(--color-navy); line-height: 1.5; }
        .feature-sub { font-size: var(--text-xs); color: var(--color-gray-500); margin-top: 0.2rem; }
        .sector-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
        .sector-pill { background: transparent; border: 1px solid var(--color-gray-200); color: var(--color-navy); padding: 0.5rem 1rem; font-size: 1rem; font-family: inherit; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
        .sector-pill:hover { border-color: var(--color-accent); color: var(--color-accent); }
        .sector-pill.active { border-color: var(--color-accent); background: var(--color-navy); color: var(--color-accent); font-weight: bold; }
        .purchase-box { border: 1px solid var(--color-accent-muted); background: var(--color-navy); padding: 1.75rem; margin-top: 1.5rem; }
        .purchase-box-selected { font-size: var(--text-xs); color: var(--color-gray-400); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.5rem; }
        .purchase-box-label { font-size: 1.54rem; font-weight: bold; color: var(--color-off-white); margin-bottom: 0.25rem; }
        .purchase-box-meta { font-size: 1rem; color: var(--color-gray-400); margin-bottom: 1.25rem; }
        .purchase-btn { display: inline-block; background: var(--color-accent); color: var(--color-navy); border: none; padding: 0.85rem 2rem; font-size: 1rem; font-weight: bold; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; cursor: pointer; font-family: inherit; transition: opacity 0.15s; }
        .purchase-btn:hover { opacity: 0.85; }
        .purchase-btn.disabled { background: var(--color-gray-200); color: var(--color-gray-500); cursor: not-allowed; opacity: 1; }
        .purchase-hint { font-size: var(--text-xs); color: var(--color-gray-400); margin-top: 0.75rem; }
        .compare-table { width: 100%; border-collapse: collapse; }
        .compare-table th { font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-gray-500); padding: 0.5rem 0.75rem; text-align: left; border-bottom: 1px solid var(--color-gray-200); }
        .compare-table th:last-child { color: var(--color-accent); }
        .compare-table td { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--color-gray-200); font-size: 1rem; color: var(--color-navy); }
        .check { color: var(--color-accent); font-weight: bold; }
        .cross { color: var(--color-gray-400); }
        .check-gold { color: var(--color-accent); font-weight: bold; }
        @media (max-width: 700px) { .br-hero { grid-template-columns: 1fr; } .feature-grid { grid-template-columns: 1fr; } }

/* from: de/sovp-benchmark/bestaetigung/index.html */
.conf-wrap { max-width: 680px; margin: 3rem var(--content-padding); }
        .conf-icon { font-size: 2rem; color: var(--accent-color); font-weight: bold; letter-spacing: 0.1em; margin-bottom: 1.25rem; }
        .conf-title { font-size: 1.75rem; font-weight: bold; color: var(--text-color); text-transform: uppercase; margin-bottom: 0.75rem; }
        .conf-sub { font-size: 1.21rem; color: var(--text-color); line-height: 1.6; margin-bottom: 2rem; }
        .conf-steps { border: 1px solid var(--border-color); }
        .conf-step { display: flex; gap: 1.25rem; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--border-color); align-items: flex-start; }
        .conf-step:last-child { border-bottom: none; }
        .conf-step-num { font-size: 1rem; font-weight: bold; color: var(--accent-color); min-width: 1.75rem; flex-shrink: 0; margin-top: 0.1rem; }
        .conf-step-text { font-size: 1.21rem; color: var(--text-color); line-height: 1.5; }
        .conf-step-sub { font-size: 1rem; color: var(--muted-color); margin-top: 0.2rem; }
        .conf-back { margin-top: 2rem; }
        .conf-back a { color: var(--accent-color); font-size: 1.21rem; text-decoration: none; border-bottom: 1px solid var(--color-accent-bg); padding-bottom: 0.1rem; }
        .conf-back a:hover { border-color: var(--accent-color); }
        .conf-product { display: inline-block; border: 1px solid var(--color-accent-bg); padding: 0.2rem 0.7rem; font-size: 1rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-color); margin-bottom: 0.5rem; }
        .conf-product.gold { border-color: var(--color-accent); color: #ffab00; }

/* from: de/sovp-benchmark/deep-dive/index.html */
/* Map legacy variables to Litzki design tokens */
        :root {
            --text-color:   var(--color-navy);
            --accent-color: var(--color-accent);
            --bg-color:     var(--color-off-white);
            --border-color: var(--color-gray-200);
            --muted-color:  var(--color-gray-500);
        }
        .dd-crumb { font-size: var(--text-xs); color: var(--color-gray-500); margin: 1rem 0 0; }
        .dd-crumb a { color: var(--color-gray-500); text-decoration: none; }
        .dd-crumb a:hover { color: var(--color-accent); }
        .dd-crumb span { margin: 0 0.4rem; }
        .dd-hero { padding: 2rem 0 2rem; border-bottom: 1px solid var(--color-gray-200); display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: start; }
        .dd-hero-label { font-size: var(--text-xs); letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 0.6rem; }
        .dd-hero-title { font-size: 2rem; font-weight: bold; color: var(--color-navy); text-transform: uppercase; margin-bottom: 0.75rem; }
        .dd-hero-sub { font-size: 1.1rem; color: var(--color-navy); line-height: 1.6; }
        .dd-price-val { font-size: 3rem; font-weight: bold; color: var(--color-accent); line-height: 1; }
        .dd-price-note { font-size: var(--text-xs); color: var(--color-gray-500); margin-top: 0.25rem; text-align: right; }
        .dd-section { margin: 2rem 0; }
        .dd-section-title { font-size: var(--text-xs); font-weight: bold; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 1.25rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--color-gray-200); }
        .signal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
        .signal-item { border: 1px solid var(--color-gray-200); padding: 1rem 1.15rem; background: var(--color-navy); transition: border-color 0.15s; }
        .signal-item:hover { border-color: var(--color-accent); }
        .signal-code { font-size: var(--text-xs); letter-spacing: 0.12em; color: var(--color-accent); font-weight: bold; margin-bottom: 0.3rem; }
        .signal-name { font-size: 1rem; color: var(--color-off-white); font-weight: bold; margin-bottom: 0.2rem; }
        .signal-desc { font-size: var(--text-xs); color: var(--color-gray-400); line-height: 1.4; }
        .feature-highlight { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
        .fh-item { border: 1px solid var(--color-accent-muted); background: var(--color-navy); padding: 1.25rem; }
        .fh-icon { font-size: var(--text-xs); color: var(--color-accent); font-weight: bold; letter-spacing: 0.1em; margin-bottom: 0.5rem; }
        .fh-title { font-size: 1rem; font-weight: bold; color: var(--color-off-white); margin-bottom: 0.3rem; }
        .fh-desc { font-size: var(--text-xs); color: var(--color-gray-400); line-height: 1.45; }
        .sector-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
        .sector-pill { background: transparent; border: 1px solid var(--color-gray-200); color: var(--color-navy); padding: 0.5rem 1rem; font-size: 1rem; font-family: inherit; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
        .sector-pill:hover { border-color: var(--color-accent); color: var(--color-accent); }
        .sector-pill.active { border-color: var(--color-accent); background: var(--color-navy); color: var(--color-accent); font-weight: bold; }
        .purchase-box { border: 1px solid var(--color-accent-muted); background: var(--color-navy); padding: 1.75rem; margin-top: 1.5rem; }
        .purchase-box-selected { font-size: var(--text-xs); color: var(--color-gray-400); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.5rem; }
        .purchase-box-label { font-size: 1.54rem; font-weight: bold; color: var(--color-off-white); margin-bottom: 0.25rem; }
        .purchase-box-meta { font-size: 1rem; color: var(--color-gray-400); margin-bottom: 1.25rem; }
        .purchase-btn { display: inline-block; background: var(--color-accent); color: var(--color-navy); border: none; padding: 0.85rem 2rem; font-size: 1rem; font-weight: bold; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; cursor: pointer; font-family: inherit; transition: opacity 0.15s; }
        .purchase-btn:hover { opacity: 0.85; }
        .purchase-btn.disabled { background: var(--color-gray-200); color: var(--color-gray-500); cursor: not-allowed; opacity: 1; }
        .purchase-hint { font-size: var(--text-xs); color: var(--color-gray-400); margin-top: 0.75rem; }
        .compare-table { width: 100%; border-collapse: collapse; }
        .compare-table th { font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-gray-500); padding: 0.5rem 0.75rem; text-align: left; border-bottom: 1px solid var(--color-gray-200); }
        .compare-table th:nth-child(3) { color: var(--color-accent); }
        .compare-table td { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--color-gray-200); font-size: 1rem; color: var(--color-navy); }
        .check { color: var(--color-accent); font-weight: bold; }
        .cross { color: var(--color-gray-400); }
        .check-gold { color: var(--color-accent); font-weight: bold; }
        @media (max-width: 900px) { .signal-grid,.feature-highlight { grid-template-columns: 1fr; } }
        @media (max-width: 700px) { .dd-hero { grid-template-columns: 1fr; } }

/* from: de/sovp-benchmark/index.html */
/* Map legacy variables to Litzki design tokens */
        :root {
            --text-color:   var(--color-navy);
            --accent-color: var(--color-accent);
            --bg-color:     var(--color-off-white);
            --border-color: var(--color-gray-200);
            --muted-color:  var(--color-gray-500);
            --color-danger: #DC2626;
        }
        .bm-hero { padding: 2.5rem 0 2rem; border-bottom: 1px solid var(--color-gray-200); }
        .bm-hero-label { font-size: var(--text-xs); letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 0.75rem; }
        .bm-hero-title { font-size: 2.2rem; font-weight: bold; color: var(--color-navy); text-transform: uppercase; line-height: 1.15; margin-bottom: 1rem; }
        .bm-hero-title span { color: var(--color-accent); }
        .bm-hero-sub { font-size: 1.1rem; color: var(--color-navy); line-height: 1.6; max-width: 680px; }
        .bm-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--color-gray-200); border: 1px solid var(--color-gray-200); margin: 2rem 0; }
        /* Design-Regel: eine Kachel-Sektion mit genau 4 Kacheln wird auf Desktop automatisch als 2x2-Grid dargestellt */
        @media (min-width: 901px) { .bm-kpis:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); } }
        .bm-kpi { background: var(--color-off-white); padding: 1.5rem 1.25rem; }
        .bm-kpi-val { font-size: 2.4rem; font-weight: bold; color: var(--color-accent); line-height: 1; margin-bottom: 0.3rem; letter-spacing: -0.02em; }
        .bm-kpi-val.danger { color: #DC2626; }
        .bm-kpi-val.warn { color: #D97706; }
        .bm-kpi-label { font-size: var(--text-xs); color: var(--color-gray-500); letter-spacing: 0.08em; text-transform: uppercase; }
        .bm-section { margin: 0 0 2.5rem; }
        .bm-section-title { font-size: var(--text-xs); font-weight: bold; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 1.25rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--color-gray-200); }
        .maturity-row { display: flex; align-items: center; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--color-gray-200); }
        .maturity-badge { font-size: var(--text-xs); font-weight: bold; letter-spacing: 0.12em; min-width: 2rem; color: var(--color-gray-500); }
        .maturity-badge.l4 { color: var(--color-accent); }
        .maturity-label { font-size: 1rem; color: var(--color-navy); min-width: 160px; }
        .maturity-bar-wrap { flex: 1; height: 6px; background: var(--color-gray-200); border-radius: 3px; overflow: hidden; }
        .maturity-bar { height: 100%; border-radius: 3px; }
        .maturity-pct { font-size: 1rem; color: var(--color-navy); min-width: 52px; text-align: right; font-variant-numeric: tabular-nums; }
        .maturity-n { font-size: var(--text-xs); color: var(--color-gray-500); min-width: 80px; text-align: right; }
        .gap-box { border: 1px solid #DC2626; background: #1A0A0A; padding: 1.5rem 1.75rem; margin-bottom: 1.5rem; }
        .gap-box-title { font-size: var(--text-xs); letter-spacing: 0.15em; text-transform: uppercase; color: #e0e0e0; margin-bottom: 0.75rem; font-weight: bold; }
        .gap-box p { color: var(--color-off-white); }
        .gap-clusters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1rem; }
        .gap-cluster { text-align: center; }
        .gap-cluster-val { font-size: 1.75rem; font-weight: bold; color: var(--color-off-white); line-height: 1; }
        .gap-cluster-val.low { color: #F87171; }
        .gap-cluster-val.mid { color: #FBBF24; }
        .gap-cluster-val.ok  { color: var(--color-accent); }
        .gap-cluster-label { font-size: var(--text-xs); color: var(--color-gray-400); margin-top: 0.25rem; letter-spacing: 0.05em; }
        .sector-table { width: 100%; border-collapse: collapse; font-size: 1rem; }
        .sector-table th { font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-gray-500); padding: 0.5rem 0.75rem; text-align: left; border-bottom: 1px solid var(--color-gray-200); }
        .sector-table td { padding: 0.65rem 0.75rem; border-bottom: 1px solid var(--color-gray-200); color: var(--color-navy); }
        .sector-table tr:hover td { background: var(--color-gray-200); }
        .srs-val { font-weight: bold; color: var(--color-navy); font-variant-numeric: tabular-nums; }
        .ai-val { color: #DC2626; font-variant-numeric: tabular-nums; }
        .mini-bar { display: inline-block; height: 4px; background: var(--color-gray-200); border-radius: 2px; vertical-align: middle; position: relative; width: 80px; }
        .mini-bar-fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: 2px; }
        .cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--color-gray-200); border: 1px solid var(--color-gray-200); margin: 2rem 0; }
        .cta-card { background: var(--color-off-white); padding: 2rem 1.75rem; }
        .cta-card--featured { background: var(--color-navy); outline: 1px solid var(--color-accent-muted); }
        .cta-card--featured .cta-price,
        .cta-card--featured .cta-features li { color: var(--color-off-white); }
        .cta-card--featured .cta-price-note,
        .cta-card--featured .cta-features li::before { color: var(--color-gray-400); }
        .cta-tag { font-size: var(--text-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-accent); border: 1px solid var(--color-accent-muted); padding: 0.15rem 0.6rem; display: inline-block; margin-bottom: 1rem; }
        .cta-tag.gold { color: var(--color-accent); border-color: var(--color-accent); }
        .cta-price { font-size: 2.75rem; font-weight: bold; color: var(--color-navy); line-height: 1; margin-bottom: 0.25rem; }
        .cta-price-note { font-size: var(--text-xs); color: var(--color-gray-500); margin-bottom: 1.25rem; }
        .cta-features { list-style: none; padding: 0; margin: 0 0 1.75rem; }
        .cta-features li { padding: 0.35rem 0; font-size: 1rem; color: var(--color-navy); display: flex; gap: 0.75rem; }
        .cta-features li::before { content: '///'; color: var(--color-gray-500); flex-shrink: 0; }
        .cta-features li.hi::before { color: var(--color-accent); }
        .cta-features li.hi { font-weight: bold; }
        .cta-btn { display: inline-block; background: transparent; border: 1px solid var(--color-accent); color: var(--color-accent); padding: 0.75rem 1.5rem; font-size: 1rem; font-weight: bold; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background 0.15s, color 0.15s; }
        .cta-btn:hover { background: var(--color-accent); color: var(--color-navy); }
        .cta-btn.gold { border-color: var(--color-accent); color: var(--color-accent); }
        .cta-btn.gold:hover { background: var(--color-accent); color: var(--color-navy); }
        @media (max-width: 900px) { .bm-kpis { grid-template-columns: repeat(2, 1fr); } .gap-clusters { grid-template-columns: 1fr 1fr; } }
        @media (max-width: 700px) { .bm-hero-title { font-size: 1.6rem; } .cta-grid { grid-template-columns: 1fr; } .sector-table th:nth-child(4),.sector-table td:nth-child(4) { display: none; } }