/* ── PAIN ── */
.pain { background: var(--navy); padding: 80px 5%; position: relative; overflow: hidden }
.pain::before { content: ''; position: absolute; inset: 0; background: url('https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1400&q=60&auto=format&fit=crop') center/cover no-repeat; opacity: .06; pointer-events: none; z-index: 0 }
.pain-in { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto }
.pain-header { margin-bottom: 3.5rem }
.pain-nums { display: grid; grid-template-columns: repeat(3,1fr); gap: 0 }
.pain-num-cell { padding: 3rem 2.5rem; border-right: 1px solid rgba(255,255,255,.06); position: relative; overflow: hidden; transition: background .3s }
.pain-num-cell:last-child { border-right: none }
.pain-num-cell:hover { background: rgba(255,255,255,.03) }
.pain-big { font-size: clamp(3rem,5vw,5rem); font-weight: 900; color: var(--mint); letter-spacing: -.05em; line-height: 1; margin-bottom: .6rem }
.pain-num-cell h3 { font-size: 1rem; font-weight: 700; color: var(--t1); margin-bottom: .5rem }
.pain-num-cell p  { font-size: .84rem; color: var(--t2); line-height: 1.7 }
.pain-accent { position: absolute; bottom: -20px; right: -10px; width: 100px; height: 100px; background: radial-gradient(circle,rgba(42,157,117,.08) 0%,transparent 65%) }

/* ── WHY NOW ── */
.whynow { background: var(--bg); position: relative; overflow: hidden }
.whynow::before { content: ''; position: absolute; inset: 0; background: url('https://images.unsplash.com/photo-1486325212027-8081e485255e?w=1400&q=60&auto=format&fit=crop') center/cover no-repeat; opacity: .05; pointer-events: none; z-index: 0 }
.whynow .si { position: relative; z-index: 1 }
.wn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; margin-top: 3.5rem }
.wn-drivers { display: flex; flex-direction: column; gap: .9rem }
.wn-driver { background: var(--card); border: 1px solid var(--border); border-radius: var(--rl); padding: 1.3rem 1.5rem; display: flex; align-items: flex-start; gap: 1rem; transition: all .25s; position: relative; overflow: hidden }
.wn-driver::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--green); opacity: 0; transition: opacity .25s }
.wn-driver:hover { background: rgba(255,255,255,.06); border-color: var(--border2) }
.wn-driver:hover::before { opacity: 1 }
.wn-driver-icon { width: 38px; height: 38px; border-radius: 9px; background: rgba(42,157,117,.12); border: 1px solid rgba(42,157,117,.2); color: var(--mint); display: flex; align-items: center; justify-content: center; flex-shrink: 0 }
.wn-driver h4 { font-size: .9rem; font-weight: 700; color: var(--t1); margin-bottom: .25rem }
.wn-driver p  { font-size: .8rem; color: var(--t2); line-height: 1.65 }
.wn-quote { background: linear-gradient(135deg,rgba(42,157,117,.1),rgba(26,43,60,.5)); border: 1px solid rgba(42,157,117,.2); border-radius: var(--rl); padding: 2.5rem; position: relative; overflow: hidden }
.wn-quote::before { content: '\201C'; position: absolute; top: 1rem; left: 1.5rem; font-size: 8rem; color: rgba(42,157,117,.1); font-family: Georgia,serif; line-height: 1 }
.wn-quote-text { font-size: 1.15rem; font-weight: 600; line-height: 1.6; letter-spacing: -.01em; color: var(--t1); margin-bottom: 1.2rem; position: relative }
.wn-quote-text em { color: var(--mint); font-style: normal }
.wn-quote-attr { font-size: .78rem; color: var(--t3) }
.wn-quote-stats { display: flex; flex-direction: column; gap: .7rem; margin-top: 1.5rem }
.wn-qs { display: flex; align-items: center; gap: .75rem; font-size: .83rem; color: var(--t2) }
.wn-qs-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex-shrink: 0 }
.wn-qs strong { color: var(--t1) }

/* ── SOLUTION ── */
.solution { background: linear-gradient(160deg,#0F1923 0%,#1A2B3C 100%); position: relative; overflow: hidden }
.solution::before { content: ''; position: absolute; inset: 0; background: url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=1400&q=60&auto=format&fit=crop') center/cover no-repeat; opacity: .04; pointer-events: none; z-index: 0 }
.solution .si { position: relative; z-index: 1 }
.sol-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; margin-top: 3.5rem }
.sol-tabs { display: flex; flex-direction: column; gap: .8rem }
.sol-tab { background: var(--card); border: 1px solid var(--border); border-radius: var(--rl); padding: 1.4rem 1.5rem; cursor: pointer; transition: all .25s }
.sol-tab.act { background: rgba(42,157,117,.1); border-color: rgba(42,157,117,.35) }
.sol-tab-head { display: flex; align-items: center; gap: .85rem }
.sol-tab-icon { width: 38px; height: 38px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: rgba(42,157,117,.12); border: 1px solid rgba(42,157,117,.15); color: var(--mint); transition: all .25s }
.sol-tab.act .sol-tab-icon { background: rgba(42,157,117,.25); border-color: rgba(42,157,117,.4) }
.sol-tab-title { font-size: .93rem; font-weight: 700; color: rgba(255,255,255,.65); transition: color .25s }
.sol-tab.act .sol-tab-title { color: var(--t1) }
.sol-tab-sub  { font-size: .73rem; color: var(--t3); margin-top: 1px }
.sol-tab-body { font-size: .83rem; color: var(--t2); line-height: 1.75; margin-top: 1rem; display: none; padding-top: .2rem }
.sol-tab.act .sol-tab-body { display: block }
.sol-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: .8rem }
.sol-chip { font-size: .69rem; padding: 2px 9px; border-radius: 100px; background: rgba(42,157,117,.12); color: var(--mint); border: 1px solid rgba(42,157,117,.2) }

/* Solution screen / panels */
.sol-screen { background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: var(--rl); padding: 1.8rem; min-height: 400px; position: relative; overflow: hidden }
.sol-screen::before { content: ''; position: absolute; top: -30%; right: -20%; width: 300px; height: 300px; background: radial-gradient(circle,rgba(42,157,117,.1) 0%,transparent 65%); pointer-events: none }
.sol-screen-tag { font-size: .66rem; color: var(--t3); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1.4rem }
.sol-panel { display: none; flex-direction: column; gap: .9rem }
.sol-panel.show { display: flex }
.score-wrap { display: flex; gap: 1.2rem; align-items: center; background: rgba(255,255,255,.04); border: 1px solid var(--border); border-radius: 12px; padding: 1.1rem }
.score-circle { width: 70px; height: 70px; flex-shrink: 0; position: relative }
.score-circle svg { transform: rotate(-90deg) }
.score-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: 800 }
.score-info-title { font-size: .9rem; font-weight: 700; color: var(--t1); margin-bottom: .2rem }
.score-info-sub   { font-size: .75rem; color: var(--t2) }
.score-info-val   { font-size: 1.3rem; font-weight: 800; color: var(--mint); letter-spacing: -.03em; margin-top: .3rem }
.mini-rows { display: flex; flex-direction: column; gap: .45rem }
.mini-r { background: rgba(255,255,255,.04); border: 1px solid var(--border); border-radius: 8px; padding: .65rem .9rem; display: flex; justify-content: space-between; align-items: center; font-size: .8rem }
.mini-r-l { color: var(--t2) }
.mini-r-r { color: var(--mint); font-weight: 600 }
.mini-r.highlight { background: rgba(42,157,117,.08); border-color: rgba(42,157,117,.2) }
.mini-r.highlight .mini-r-l { color: var(--t1) }
.flow-steps2 { display: flex; flex-direction: column; gap: .55rem }
.fs2 { background: rgba(255,255,255,.04); border: 1px solid var(--border); border-radius: 9px; padding: .8rem 1rem; display: flex; align-items: flex-start; gap: .8rem }
.fs2-n { width: 24px; height: 24px; border-radius: 50%; background: rgba(42,157,117,.2); color: var(--mint); font-size: .72rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px }
.fs2-txt { font-size: .8rem; color: var(--t2); line-height: 1.5 }
.fs2-txt strong { color: var(--t1); font-weight: 600 }
.fs2-result { background: rgba(42,157,117,.1); border: 1px solid rgba(42,157,117,.25); border-radius: 10px; padding: 1rem; text-align: center }
.fs2-result-n { font-size: 1.6rem; font-weight: 800; color: var(--mint) }
.fs2-result-l { font-size: .74rem; color: var(--t3); margin-top: .2rem }
.pred-rows { display: flex; flex-direction: column; gap: .55rem }
.pred-r { display: flex; align-items: center; gap: .7rem }
.pred-lbl { font-size: .74rem; color: var(--t3); width: 100px; flex-shrink: 0 }
.pred-bw { flex: 1; height: 20px; background: rgba(255,255,255,.05); border-radius: 4px; overflow: hidden }
.pred-b { height: 100%; border-radius: 4px; display: flex; align-items: center; padding-left: 7px; font-size: .67rem; color: #fff; font-weight: 600 }
.pred-v { font-size: .73rem; color: var(--t3); width: 36px; text-align: right; flex-shrink: 0 }
.pred-alert { background: rgba(42,157,117,.08); border: 1px solid rgba(42,157,117,.15); border-radius: 8px; padding: .7rem .9rem; font-size: .77rem; color: var(--t2) }
.pred-alert strong { color: var(--mint) }
.pred-period { font-size: .74rem; color: var(--t3); margin-bottom: .9rem }
.pred-b-crit { background: linear-gradient(90deg,#1E7A58,#2A9D75) }
.pred-b-high { background: linear-gradient(90deg,#D97706,#F59E0B) }
.pred-b-med  { background: linear-gradient(90deg,#2563EB,#60A5FA) }
.pred-b-low  { background: linear-gradient(90deg,#4B5563,#6B7280) }
.pred-b-rec  { background: linear-gradient(90deg,#6EDBB0,#2A9D75) }

/* ── COMPETITOR ── */
.competitor { background: var(--navy); position: relative; overflow: hidden }
.competitor::before { content: ''; position: absolute; inset: 0; background: url('https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?w=1400&q=60&auto=format&fit=crop') center/cover no-repeat; opacity: .07; pointer-events: none; z-index: 0 }
.competitor .si { position: relative; z-index: 1 }
.comp-line { font-size: clamp(1.1rem,2vw,1.4rem); font-weight: 700; color: var(--t1); line-height: 1.5; margin-bottom: 2.5rem; max-width: 640px }
.comp-line em { color: var(--mint); font-style: normal }
.comp-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; margin-top: 2.5rem }
.comp-tile { background: var(--card); border: 1px solid var(--border); border-radius: var(--rl); padding: 1.5rem; transition: all .25s }
.comp-tile:hover { background: rgba(255,255,255,.06); transform: translateY(-3px) }
.comp-name { font-size: .88rem; font-weight: 700; color: var(--t1); margin-bottom: .2rem }
.comp-type { font-size: .68rem; color: var(--t3); letter-spacing: .05em; text-transform: uppercase; margin-bottom: .9rem }
.comp-body { font-size: .78rem; color: var(--t2); line-height: 1.6; margin-bottom: .9rem }
.comp-weak { font-size: .77rem; color: var(--t2); line-height: 1.6; border-top: 1px solid var(--border); padding-top: .8rem }
.comp-weak strong { color: #F87171 }
.comp-tile.gai { background: rgba(42,157,117,.08); border-color: rgba(42,157,117,.3) }
.comp-tile.gai .comp-name { color: #fff; font-size: .95rem }
.comp-tile.gai .comp-weak strong { color: var(--mint) }
.gai-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: .8rem }
.gai-c { font-size: .66rem; padding: 2px 8px; border-radius: 100px; background: rgba(42,157,117,.18); color: var(--mint); border: 1px solid rgba(42,157,117,.25) }

/* ── HOW IT WORKS ── */
.how { background: linear-gradient(150deg,#1E3D30 0%,#0F1923 100%); position: relative; overflow: hidden }
.how::before { content: ''; position: absolute; inset: 0; background: url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?w=1400&q=60&auto=format&fit=crop') center/cover no-repeat; opacity: .05; pointer-events: none; z-index: 0 }
.how .si { position: relative; z-index: 1 }
.how-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; margin-top: 3.5rem; position: relative }
.how-steps::before { content: ''; position: absolute; top: 26px; left: 12%; right: 12%; height: 1px; background: rgba(42,157,117,.2); z-index: 0 }
.how-step { text-align: center; padding: 0 .8rem; position: relative; z-index: 1 }
.how-n { width: 52px; height: 52px; border-radius: 50%; background: rgba(42,157,117,.12); border: 2px solid rgba(42,157,117,.5); color: var(--mint); font-size: .95rem; font-weight: 700; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; box-shadow: 0 0 0 5px rgba(20,50,38,.5) }
.how-step h4 { font-size: .9rem; font-weight: 700; margin-bottom: .4rem; color: var(--t1) }
.how-step p  { font-size: .79rem; color: var(--t2); line-height: 1.65 }

/* ── LIVE UPDATES ── */
.updates { background: var(--bg); border-top: 1px solid var(--border) }
.updates-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin-top: 2.5rem }
.news-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--rl); padding: 1.4rem; display: flex; flex-direction: column; gap: .65rem; transition: all .25s }
.news-card:hover { background: rgba(255,255,255,.06); border-color: var(--border2); transform: translateY(-2px) }
.news-cat { font-size: .63rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 2px 10px; border-radius: 100px; display: inline-block }
.nc-kfw      { background: rgba(42,157,117,.12); color: var(--mint); border: 1px solid rgba(42,157,117,.2) }
.nc-bafa     { background: rgba(99,102,241,.12); color: #A5B4FC; border: 1px solid rgba(99,102,241,.2) }
.nc-gesetz   { background: rgba(234,163,35,.1); color: #FCD34D; border: 1px solid rgba(234,163,35,.2) }
.nc-co2      { background: rgba(248,113,113,.1); color: #FCA5A5; border: 1px solid rgba(248,113,113,.2) }
.nc-allgemein { background: rgba(255,255,255,.06); color: var(--t3); border: 1px solid var(--border) }
.news-title   { font-size: .87rem; font-weight: 700; color: var(--t1); line-height: 1.4 }
.news-summary { font-size: .77rem; color: var(--t2); line-height: 1.65; flex: 1 }
.news-footer  { display: flex; justify-content: space-between; align-items: center; font-size: .69rem; color: var(--t3); border-top: 1px solid var(--border); padding-top: .6rem; margin-top: auto }
.news-src { font-weight: 600; color: var(--mint) }
.news-link { color: var(--t3); text-decoration: underline; text-underline-offset: 2px; transition: color .2s }
.news-link:hover { color: var(--mint) }
.updates-foot { display: flex; align-items: center; margin-top: 1.8rem; flex-wrap: wrap; gap: .6rem }
.news-placeholder { text-align: center; padding: 3rem 1rem; color: var(--t3); font-size: .84rem; grid-column: 1/-1 }

/* ── FAQ ── */
.faq { background: var(--navy) }
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 3rem }
.faq-item { background: var(--card); border: 1px solid var(--border); border-radius: var(--rl); padding: 1.5rem 1.7rem; transition: border-color .2s, background .2s }
.faq-item:hover { border-color: rgba(42,157,117,.3); background: rgba(42,157,117,.04) }
.faq-q { font-size: .9rem; font-weight: 700; color: var(--t1); margin-bottom: .6rem; line-height: 1.4 }
.faq-a { font-size: .81rem; color: var(--t2); line-height: 1.8 }