/* OptimalPortal – Bausteine (alle Regeln auf .opp begrenzt, damit OptimizePress-Layouts unberührt bleiben) */
.opp{
  --ink:255,255,255;
  --text:#eaf0ff; --muted:#b8c3e6; --accent:#5eead4;
  --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.16);
  --brand:#5eead4; --brand2:#60a5fa; --warn:#fbbf24; --ok:#34d399; --bad:#fb7185;
  --shadow:0 16px 60px rgba(0,0,0,.45); --radius:18px; --radius2:26px;
  --panel-grad:linear-gradient(180deg, rgba(12,18,32,.92), rgba(10,16,32,.78));
  --field-bg:#0f172a; --toolbar-bg:rgba(6,9,19,.92); --modal-bg:linear-gradient(180deg,#0f1729,#0b1222);
  --opp-bg:radial-gradient(900px 500px at 10% -10%, rgba(96,165,250,.20), transparent 60%), radial-gradient(800px 480px at 90% 0%, rgba(94,234,212,.16), transparent 55%), linear-gradient(180deg,#070b14,#05070f);
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --sans: inherit;
  color-scheme:dark;
  container:opp / inline-size;
  color:var(--text); background:var(--opp-bg); border-radius:var(--radius2);
  padding:clamp(16px,3vw,32px); font-size:15px; line-height:1.55; text-align:left; box-sizing:border-box;
}
.opp.opp-light{
  --ink:15,23,42;
  --text:#0f172a; --muted:#475569; --accent:#0f766e;
  --line:rgba(15,23,42,.12); --line2:rgba(15,23,42,.20);
  --shadow:0 12px 40px rgba(15,23,42,.10);
  --panel-grad:linear-gradient(180deg,#ffffff,#f8fafc);
  --field-bg:#ffffff; --toolbar-bg:rgba(255,255,255,.94); --modal-bg:#ffffff;
  --opp-bg:transparent;
  color-scheme:light; padding:clamp(8px,2vw,16px) 0;
}
.opp.opp-light .btn.primary{color:#062026}
.opp.opp-light .panel, .opp.opp-light .card, .opp.opp-light .stat, .opp.opp-light details, .opp.opp-light .kpi .box, .opp.opp-light .cl-section{background:#fff}
.opp.opp-light .hcard{background:linear-gradient(180deg,#ffffff,#f1f5f9)}
.opp.opp-light .hcard:before, .opp.opp-light .aside:before, .opp.opp-light .card:before{opacity:.35}
.opp.opp-plain, .opp.opp-inline, .opp.opp-portal{background:none; padding:0; border-radius:0}
.opp.opp-inline, .opp.opp-portal{container-type:normal}
.opp.opp-inline{display:inline-block}
.opp h1, .opp h2, .opp h3, .opp h4{color:var(--text); font-family:inherit; text-transform:none; letter-spacing:normal}
.opp h2{font-size:24px; line-height:1.2; margin:0 0 6px}
.opp h3{font-size:17px; line-height:1.3}
.opp p{margin:0 0 8px}
.opp a{color:inherit}
.opp .note a, .opp .content a, .opp .check a, .opp .step span a{color:var(--accent)}
.opp .small{font-size:13.5px}
.opp .lead.small{font-size:14px}
.opp .mt{margin-top:16px}
.opp .admin-note{margin:10px 0 0; font-size:12px; color:#92400e; background:#fef3c7; padding:8px 12px; border-radius:10px}
.opp .opp-hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:22px; align-items:stretch}
@container opp (max-width:980px){ .opp .opp-hero-grid{grid-template-columns:1fr} }
.opp .faq-cols.one{grid-template-columns:1fr}
.opp .result-panel h2{margin-bottom:10px}
.opp .hp{position:absolute !important; left:-10000px !important; width:1px; height:1px; overflow:hidden}
.opp .chips.invalid{border-color:rgba(251,113,133,.65)}
.opp .calc-cta.show{display:block}
.opp .opp-checklist{margin-top:4px}
/* Popup */
.opp .opp-modal{position:fixed; inset:0; z-index:99990; display:grid; place-items:center; padding:18px}
.opp .opp-modal[hidden]{display:none}
.opp .opp-modal-backdrop{position:absolute; inset:0; background:rgba(2,4,10,.72); backdrop-filter:blur(4px)}
.opp .opp-modal-box{position:relative; width:min(560px,100%); max-height:calc(100vh - 36px); overflow:auto; background:var(--modal-bg); color:var(--text); border:1px solid var(--line2); border-radius:24px; box-shadow:var(--shadow); padding:24px}
.opp .opp-modal-box h3{margin:0 34px 8px 0; font-size:19px}
.opp .opp-modal-x{position:absolute; right:14px; top:14px; width:34px; height:34px; border-radius:12px; border:1px solid var(--line); background:rgba(var(--ink),.04); display:grid; place-items:center; cursor:pointer; padding:0}
.opp .opp-modal-x svg{width:16px; height:16px; fill:var(--muted)}
body.opp-modal-open{overflow:hidden}
.opp .opp-toast{position:fixed; left:50%; bottom:16px; transform:translateX(-50%); z-index:99991; min-width:min(520px,calc(100% - 28px)); background:var(--modal-bg); color:var(--text); border:1px solid var(--line2); border-radius:16px; box-shadow:var(--shadow); padding:12px 16px; display:none}
.opp .opp-toast b{display:block; font-size:13px}
.opp .opp-toast span{display:block; color:var(--muted); font-size:12px}
.opp, .opp *{box-sizing:border-box}
.opp a{color:inherit}
.opp a:focus-visible, .opp button:focus-visible, .opp summary:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
.opp .wrap{max-width:var(--max); margin:0 auto; padding:0 22px}
.opp .muted{color:var(--muted)}
.opp .req{color:var(--accent)}
.opp .btn{border:1px solid var(--line2); background: rgba(var(--ink),.04); color:var(--text); padding:10px 14px; border-radius:14px; text-decoration:none; font: inherit; font-size:13px; display:inline-flex; align-items:center; justify-content:center; gap:10px; cursor:pointer; transition: transform .12s ease, background .12s ease, border-color .12s ease; user-select:none; white-space:nowrap}
.opp .btn:hover{transform: translateY(-1px); background: rgba(var(--ink),.07); border-color: rgba(var(--ink),.22)}
.opp .btn.primary{border:0; background: linear-gradient(135deg, rgba(94,234,212,.95), rgba(96,165,250,.95)); color:#071022; font-weight:700; box-shadow: 0 16px 40px rgba(96,165,250,.14)}
.opp .btn.primary:hover{filter:saturate(1.05) brightness(1.02)}
.opp .btn.big{padding:13px 18px; font-size:14px}
.opp .btn[disabled]{opacity:.6; cursor:wait; transform:none}
.opp .btn svg{width:16px; height:16px; fill: currentColor; flex:0 0 auto}
.opp .hero{padding:56px 0 20px}
.opp .opp-hero-grid{display:grid; grid-template-columns: 1.1fr .9fr; gap:26px; align-items:stretch}
@container opp (max-width: 980px){
  .opp .opp-hero-grid{grid-template-columns:1fr; gap:18px}
}
.opp .hcard{border:1px solid var(--line); background: linear-gradient(180deg, rgba(var(--ink),.05), rgba(var(--ink),.02)); border-radius: var(--radius2); box-shadow: var(--shadow); padding:28px; position:relative; overflow:hidden}
.opp .hcard:before{content:""; position:absolute; inset:-2px; background: radial-gradient(520px 240px at 20% 15%, rgba(94,234,212,.20), transparent 60%), radial-gradient(460px 240px at 80% 25%, rgba(96,165,250,.20), transparent 55%); pointer-events:none}
.opp .hcard > *{position:relative}
.opp .kicker{display:inline-flex; align-items:center; gap:8px; font-size:12px; color: rgba(234,240,255,.92); padding:6px 10px; border-radius:999px; background: rgba(var(--ink),.06); border:1px solid var(--line)}
.opp .kdot{width:8px; height:8px; border-radius:999px; background: var(--brand)}
.opp h1{margin:14px 0 10px; font-size: clamp(26px, 4.2cqi, 44px); letter-spacing:-.6px; line-height:1.08}
.opp .lead{margin:0; color: var(--muted); font-size: 15px; line-height: 1.65; max-width: 64ch}
.opp .lead + .lead{margin-top:10px}
.opp .hero-actions{margin-top:20px; display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.opp .mini{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; color: var(--muted); font-size: 12px}
.opp .mini .pill{display:inline-flex; align-items:center; gap:8px; padding:7px 10px; border-radius:999px; border:1px solid var(--line); background: rgba(var(--ink),.03)}
.opp .mini .pill svg{width:14px; height:14px; fill: rgba(94,234,212,.95)}
.opp .aside{border:1px solid var(--line); border-radius: var(--radius2); background: var(--panel-grad); box-shadow: var(--shadow); padding: 22px; overflow:hidden; position:relative}
.opp .aside:before{content:""; position:absolute; inset:-2px; background: radial-gradient(380px 260px at 75% 5%, rgba(251,191,36,.18), transparent 60%), radial-gradient(520px 300px at 30% 90%, rgba(94,234,212,.12), transparent 60%); pointer-events:none}
.opp .aside > *{position:relative}
.opp .aside h3{margin:0 0 12px; font-size: 15px; letter-spacing: .2px}
.opp .grid2{display:grid; grid-template-columns: 1fr 1fr; gap:12px}
.opp .grid3{display:grid; grid-template-columns: repeat(3, 1fr); gap:12px}
@container opp (max-width: 720px){
  .opp .grid3{grid-template-columns:1fr 1fr}
}
@container opp (max-width: 520px){
  .opp .grid2, .opp .grid3{grid-template-columns:1fr}
}
.opp .stat{border:1px solid var(--line); background: rgba(var(--ink),.03); border-radius: 16px; padding: 12px}
.opp .stat b{display:block; font-size:15px}
.opp .stat span{display:block; font-size:12px; color:var(--muted); margin-top:4px; line-height:1.4}
.opp .illus{margin-top:14px; border-radius: 20px; border:1px solid var(--line); background: rgba(var(--ink),.02); padding: 14px; overflow:hidden}
.opp .illus svg{width:100%; height:auto; display:block}
.opp .hotline-box{margin-top:14px; display:flex; align-items:center; gap:12px; border:1px solid rgba(94,234,212,.25); background:rgba(94,234,212,.07); border-radius:18px; padding:12px 14px}
.opp .hotline-box svg{width:28px; height:28px; fill:var(--brand); flex:0 0 auto}
.opp .hotline-box b{display:block; font-size:12px; color:var(--muted); font-weight:400}
.opp .hotline-box a{font-size:20px; font-weight:800; text-decoration:none; font-family:var(--mono)}
.opp section{padding:26px 0}
.opp .section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:14px}
.opp .section-head h2{margin:0 0 6px; font-size: 24px; letter-spacing:-.3px}
.opp .section-head p{margin:0; color:var(--muted); font-size:14px; max-width:78ch; line-height:1.55}
.opp .eyebrow{display:block; font-size:12px; text-transform:uppercase; letter-spacing:1.4px; color:var(--accent); margin-bottom:6px}
.opp .cards{display:grid; grid-template-columns: repeat(12, 1fr); gap:12px}
.opp .card{grid-column: span 4; border:1px solid var(--line); background: rgba(var(--ink),.03); border-radius: var(--radius); padding:16px; min-height: 110px; position:relative; overflow:hidden}
.opp .card:before{content:""; position:absolute; inset:-2px; background: radial-gradient(220px 140px at 20% 10%, rgba(96,165,250,.14), transparent 60%); pointer-events:none; opacity:.8}
.opp .card > *{position:relative}
.opp .card h4{margin:0 0 8px; font-size:15px}
.opp .card p{margin:0; color:var(--muted); font-size:13px; line-height:1.55}
.opp .num{display:inline-grid; place-items:center; min-width:34px; height:34px; padding:0 8px; border-radius:12px; background:rgba(94,234,212,.12); border:1px solid rgba(94,234,212,.22); font-family:var(--mono); font-weight:700; font-size:13px; margin-bottom:10px}
.opp .icon{width:34px; height:34px; border-radius: 14px; display:grid; place-items:center; background: rgba(var(--ink),.05); border:1px solid var(--line); margin-bottom:10px}
.opp .icon svg{width:18px; height:18px; fill: rgba(94,234,212,.95)}
@container opp (max-width: 980px){
  .opp .card{grid-column: span 6}
}
@container opp (max-width: 560px){
  .opp .card{grid-column: span 12}
}
.opp .split{display:grid; grid-template-columns: 1fr 1fr; gap:12px}
.opp .split.wide-left{grid-template-columns: 1.25fr .75fr}
@container opp (max-width: 980px){
  .opp .split, .opp .split.wide-left{grid-template-columns:1fr}
}
.opp .panel{border:1px solid var(--line); border-radius: var(--radius2); background: rgba(var(--ink),.03); padding: 18px; overflow:hidden}
.opp .panel h3{margin:0 0 10px; font-size:16px}
.opp .panel.good{border-color: rgba(52,211,153,.30); background: rgba(52,211,153,.05)}
.opp .panel.bad{border-color: rgba(251,113,133,.28); background: rgba(251,113,133,.04)}
.opp .tag{display:inline-block; font-size:11px; padding:4px 8px; border-radius:999px; margin-bottom:8px; border:1px solid var(--line)}
.opp .tag.good{color:var(--ok); border-color:rgba(52,211,153,.35)}
.opp .tag.bad{color:var(--bad); border-color:rgba(251,113,133,.35)}
.opp .list{margin:0; padding-left: 18px; color:var(--muted); font-size:13.5px; line-height:1.65}
.opp .list li{margin:6px 0}
.opp .list b{color:var(--text)}
.opp .ticks{list-style:none; padding:0; margin:0; color:var(--muted); font-size:13.5px; line-height:1.6}
.opp .ticks li{position:relative; padding-left:26px; margin:8px 0}
.opp .ticks li:before{content:""; position:absolute; left:0; top:3px; width:16px; height:16px; border-radius:6px; background:rgba(52,211,153,.18); border:1px solid rgba(52,211,153,.45)}
.opp .ticks li:after{content:""; position:absolute; left:5px; top:6px; width:5px; height:8px; border:solid var(--ok); border-width:0 2px 2px 0; transform:rotate(45deg)}
.opp .crosses li:before{background:rgba(251,113,133,.14); border-color:rgba(251,113,133,.45)}
.opp .crosses li:after{content:"×"; border:0; transform:none; left:4px; top:-1px; color:var(--bad); font-weight:700; width:auto; height:auto}
.opp .note{margin-top:12px; border-left:3px solid var(--warn); background:rgba(251,191,36,.07); border-radius:0 14px 14px 0; padding:10px 14px; font-size:13px; color:var(--muted); line-height:1.55}
.opp .note b{color:var(--text)}
.opp .timeline{display:grid; gap:10px; margin-top:10px}
.opp .step{display:flex; gap:12px; border:1px solid var(--line); background: rgba(var(--ink),.02); border-radius: 18px; padding: 12px}
.opp .badge{width:34px; height:34px; border-radius:14px; background: rgba(94,234,212,.14); border:1px solid rgba(94,234,212,.22); display:grid; place-items:center; font-weight:800; color: rgba(234,240,255,.95); flex: 0 0 auto}
.opp .step b{display:block; font-size:14px; margin-top:1px}
.opp .step span{display:block; color:var(--muted); font-size:12.5px; line-height:1.55; margin-top:4px}
.opp .hint{font-size:12px; color:var(--muted); line-height:1.5; margin-top:10px}
.opp .band{border:1px solid rgba(94,234,212,.25); border-radius:var(--radius2); padding:22px; display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; background: linear-gradient(135deg, rgba(94,234,212,.12), rgba(96,165,250,.10))}
.opp .band h3{margin:0 0 6px; font-size:19px}
.opp .band p{margin:0; color:var(--muted); font-size:14px; max-width:70ch; line-height:1.55}
.opp .band .hero-actions{margin-top:0}
.opp .field{display:flex; flex-direction:column; gap:6px; margin-bottom:12px}
.opp label{font-size:12.5px; color:var(--muted)}
.opp input, .opp select, .opp textarea{font: inherit; font-size:14px; color: var(--text); background: rgba(var(--ink),.04); border: 1px solid var(--line2); border-radius: 14px; padding: 10px 12px; outline: none; width:100%}
.opp input::placeholder, .opp textarea::placeholder{color:rgba(184,195,230,.55)}
.opp select{appearance:none; -webkit-appearance:none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size:5px 5px, 5px 5px; background-repeat:no-repeat; padding-right:34px; background-color:var(--field-bg)}
.opp select option, .opp select optgroup{background-color:var(--field-bg); color:var(--text)}
.opp input:focus, .opp select:focus, .opp textarea:focus{border-color: rgba(94,234,212,.45); box-shadow: 0 0 0 4px rgba(94,234,212,.10)}
.opp input.invalid, .opp select.invalid, .opp textarea.invalid{border-color: rgba(251,113,133,.65)}
.opp textarea{min-height: 96px; resize: vertical}
.opp .radio-row{display:flex; gap:10px; flex-wrap:wrap}
.opp .radio-row label{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line2); border-radius:14px; padding:9px 14px; cursor:pointer; font-size:14px; color:var(--text); background:rgba(var(--ink),.03)}
.opp .radio-row input{width:auto; accent-color: var(--brand)}
.opp .radio-row label:has(input:checked){border-color:rgba(94,234,212,.55); background:rgba(94,234,212,.08)}
.opp .check{display:flex; gap:10px; align-items:flex-start; font-size:12.5px; line-height:1.5; color:var(--muted); margin:10px 0; cursor:pointer}
.opp .check input{width:18px; height:18px; flex:0 0 auto; margin-top:1px; accent-color: var(--brand)}
.opp .check a{color:var(--accent)}
.opp .info{display:block; font-size:11.5px; color:var(--muted); line-height:1.45}
.opp .info:before{content:"ⓘ "; color:var(--brand2)}
.opp .form-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
.opp .form-status{margin-top:12px; font-size:13px; line-height:1.5; border-radius:14px}
.opp .form-status:empty{display:none}
.opp .form-status.ok{padding:12px 14px; border:1px solid rgba(52,211,153,.4); background:rgba(52,211,153,.08); color:var(--text)}
.opp .form-status.err{padding:12px 14px; border:1px solid rgba(251,113,133,.45); background:rgba(251,113,133,.08); color:var(--text)}
.opp .hp{position:absolute !important; left:-10000px !important; width:1px; height:1px; overflow:hidden}
.opp fieldset{border:1px solid var(--line); border-radius:18px; padding:14px 14px 4px; margin:0 0 14px}
.opp legend{padding:0 8px; font-size:13px; font-weight:700}
.opp .row2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.opp .row3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px}
.opp .row-zip{display:grid; grid-template-columns:.4fr 1fr; gap:12px}
@container opp (max-width:640px){
  .opp .row2, .opp .row3, .opp .row-zip{grid-template-columns:1fr}
}
.opp .chips{display:flex; flex-wrap:wrap; gap:6px; align-items:center; border:1px solid var(--line2); border-radius:14px; padding:6px; background:rgba(var(--ink),.04)}
.opp .chips:focus-within{border-color: rgba(94,234,212,.45); box-shadow: 0 0 0 4px rgba(94,234,212,.10)}
.opp .chips input{border:0; background:transparent; box-shadow:none !important; flex:1 1 160px; min-width:120px; padding:6px 8px; width:auto}
.opp .chip{display:inline-flex; align-items:center; gap:6px; background:rgba(94,234,212,.14); border:1px solid rgba(94,234,212,.35); border-radius:999px; padding:4px 6px 4px 10px; font-size:13px}
.opp .chip button{border:0; background:rgba(var(--ink),.08); color:var(--text); width:20px; height:20px; border-radius:999px; cursor:pointer; line-height:1; padding:0}
.opp .chip-add{padding:6px 10px; font-size:12px}
.opp .calc{display:grid; grid-template-columns: 1.1fr .9fr; gap:16px}
@container opp (max-width: 980px){
  .opp .calc{grid-template-columns:1fr}
}
.opp .kpi{display:grid; gap:10px; align-content:start}
.opp .kpi .box{border:1px solid var(--line); background: rgba(var(--ink),.03); border-radius: 18px; padding: 14px}
.opp .kpi .box b{display:block; font-size:12px; color:var(--muted); font-weight:400}
.opp .kpi .box strong{display:block; font-family: var(--mono); font-size: 22px; margin-top:6px}
.opp .kpi .box em{display:block; font-style:normal; color:var(--muted); font-size:12px; margin-top:6px; line-height:1.45}
.opp .kpi .box.highlight{border-color:rgba(94,234,212,.4); background:rgba(94,234,212,.07)}
.opp .demo-flag{display:inline-block; font-size:11px; color:#071022; background:var(--warn); border-radius:999px; padding:2px 8px; margin-left:6px; font-family:var(--sans); vertical-align:middle}
.opp .calc-cta{display:none; border:1px dashed rgba(94,234,212,.5); border-radius:18px; padding:14px; text-align:center}
.opp .calc-cta.show{display:block}
.opp .calc-cta p{margin:0 0 10px; color:var(--muted); font-size:13px}
.opp .accordion{display:grid; gap:10px}
.opp details{border:1px solid var(--line); border-radius: 18px; background: rgba(var(--ink),.03); overflow:hidden}
.opp summary{list-style:none; cursor:pointer; padding: 14px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; font-size: 14px; font-weight:600}
.opp summary::-webkit-details-marker{display:none}
.opp details[open]{border-color: rgba(var(--ink),.18)}
.opp .chev{width:26px; height:26px; border-radius: 12px; border:1px solid var(--line); display:grid; place-items:center; background: rgba(var(--ink),.02); flex: 0 0 auto}
.opp .chev svg{width:16px; height:16px; fill: var(--muted); transition: transform .15s ease}
.opp details[open] .chev svg{transform: rotate(180deg)}
.opp details .content{padding: 0 16px 16px; color: var(--muted); font-size: 13.5px; line-height: 1.65}
.opp details .content p{margin:0 0 8px}
.opp details .content ul{margin:6px 0 8px; padding-left:18px}
.opp details .content a{color:var(--accent)}
.opp .faq-cols{display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:start}
@container opp (max-width:980px){
  .opp .faq-cols{grid-template-columns:1fr}
}
.opp .contact-list{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.opp .contact-list li{display:flex; gap:12px; align-items:flex-start; border:1px solid var(--line); border-radius:16px; padding:12px; background:rgba(var(--ink),.02)}
.opp .contact-list svg{width:20px; height:20px; fill:var(--brand); flex:0 0 auto; margin-top:2px}
.opp .contact-list b{display:block; font-size:12px; color:var(--muted); font-weight:400}
.opp .contact-list a, .opp .contact-list span.v{font-size:15px; font-weight:600; text-decoration:none}
.opp .result-panel{padding:28px}
.opp .result-panel.is-ok{border-color:rgba(52,211,153,.35)}
.opp .result-panel.is-err{border-color:rgba(251,113,133,.35)}
.opp .dl-list{list-style:none; padding:0; margin:16px 0 0; display:grid; gap:10px}
.opp .dl-list a{display:flex; align-items:center; gap:12px; border:1px solid var(--line2); border-radius:16px; padding:12px 14px; text-decoration:none; background:rgba(var(--ink),.03)}
.opp .dl-list a:hover{border-color:rgba(94,234,212,.5)}
.opp .dl-list svg{width:20px; height:20px; fill:var(--brand); flex:0 0 auto}
.opp .summary-box{border:1px solid rgba(94,234,212,.3); background:rgba(94,234,212,.06); border-radius:18px; padding:14px; font-size:13px; color:var(--muted); line-height:1.6; margin-bottom:14px}
.opp .summary-box b{color:var(--text)}
.opp .cl-toolbar{position:sticky; top:var(--opp-sticky-top,0px); z-index:30; display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 0; background:var(--toolbar-bg); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); margin-bottom:16px}
.opp .progress{flex:1 1 220px; height:10px; border-radius:999px; background:rgba(var(--ink),.07); overflow:hidden; border:1px solid var(--line)}
.opp .progress span{display:block; height:100%; width:0; background:linear-gradient(90deg, var(--brand), var(--brand2)); transition:width .2s ease}
.opp .progress-label{font-family:var(--mono); font-size:13px; min-width:90px}
.opp .cl-section{border:1px solid var(--line); border-radius:var(--radius2); background:rgba(var(--ink),.03); padding:18px; margin-bottom:12px; break-inside:avoid}
.opp .cl-section h2{display:flex; align-items:center; gap:12px; margin:0 0 4px; font-size:18px}
.opp .cl-section h2 .badge{width:36px; height:36px}
.opp .cl-section > p{margin:0 0 10px 48px; color:var(--muted); font-size:13px; line-height:1.55}
.opp .cl-items{list-style:none; margin:0; padding:0 0 0 48px; display:grid; gap:4px}
@container opp (max-width:560px){
  .opp .cl-items, .opp .cl-section > p{padding-left:0; margin-left:0}
}
.opp .cl-items label{display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--text); line-height:1.5; padding:7px 8px; border-radius:12px; cursor:pointer}
.opp .cl-items label:hover{background:rgba(var(--ink),.04)}
.opp .cl-items input{width:18px; height:18px; flex:0 0 auto; margin-top:2px; accent-color:var(--accent)}
.opp .cl-items small{display:block; color:var(--muted); font-size:12.5px}
.opp .cl-items input:checked + span{color:var(--muted); text-decoration:line-through; text-decoration-color:rgba(94,234,212,.6)}
.opp .cl-items input:checked + span small{text-decoration:none}
@media print{
  .opp :root{color-scheme:light}
  .opp .cl-toolbar, .opp .no-print{display:none !important}
  .opp .cl-section, .opp .panel{border:1px solid #bbb; background:#fff; box-shadow:none}
  .opp .cl-section > p, .opp .cl-items small, .opp .lead, .opp .muted{color:#333}
  .opp .cl-items label{color:#000}
  .opp .cl-items input:checked + span{color:#000; text-decoration:none}
  .opp .badge{background:#eee; border-color:#999; color:#000}
  .opp a{text-decoration:none}
}
.opp.opp-light .contact-list svg, .opp.opp-light .icon svg, .opp.opp-light .hotline-box svg, .opp.opp-light .dl-list svg, .opp.opp-light .mini .pill svg{fill:var(--accent)}
.opp.opp-light .eyebrow, .opp.opp-light .req, .opp.opp-light .topline-tel{color:var(--accent)}