/* =========================================================
   plan b — Subpages (services, förderung, kontakt, jobs)
   ========================================================= */

/* ---------------- Sub hero ---------------- */
.subhero { position: relative; overflow: hidden; padding-top: clamp(118px, 15vh, 170px); padding-bottom: clamp(50px, 7vw, 90px); background: var(--paper); }
.subhero--compact { padding-bottom: clamp(20px,3vw,40px); }
.subhero__bg { position: absolute; inset: 0; pointer-events: none; }
.subhero__inner { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(34px,5vw,70px); align-items: center; }
.subhero__txt { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.crumb { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--slate); }
.crumb a:hover { color: var(--ember); }
.crumb svg { width: 14px; height: 14px; }
.subhero__tag { display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px; border-radius: 100px; font-weight: 700; font-size: 14px; }
.subhero__tag svg { width: 18px; height: 18px; }
.subhero__title { margin: 4px 0 4px; }
.subhero__actions { display: flex; gap: 14px; margin-top: 12px; flex-wrap: wrap; }
@media (max-width: 920px) { .subhero__inner { grid-template-columns: 1fr; } .subhero__media { max-width: 460px; } }

/* hero media visualizations */
.pvviz, .irviz, .wpviz, .evviz { position: relative; aspect-ratio: 4/3.2; border-radius: var(--r-lg); background: linear-gradient(160deg, #11201a, #0c1612); overflow: hidden; display: grid; place-items: center; box-shadow: var(--sh-3); }
.pvviz__sun { position: absolute; top: 14%; left: 50%; transform: translateX(-50%); width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle, var(--amber), rgba(255,178,62,0)); animation: float 5s ease-in-out infinite; }
.pvviz__panel { display: grid; grid-template-columns: repeat(4, 46px); gap: 6px; transform: perspective(500px) rotateX(46deg); margin-top: 40px; }
.pvviz__panel span { height: 46px; background: linear-gradient(145deg, #1f4f73, #0d2742); border: 1px solid rgba(255,255,255,.12); border-radius: 3px; animation: pvglow 2.4s ease-in-out infinite; }
@keyframes pvglow { 0%,100%{box-shadow:inset 0 0 0 rgba(255,178,62,0)} 50%{box-shadow:inset 0 0 12px rgba(255,178,62,.5)} }
.pvviz__chip, .evviz__pct, .wpviz__cop { position: absolute; bottom: 18px; right: 18px; background: rgba(255,255,255,.1); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.18); color: #fff; font-weight: 700; font-size: 13px; padding: 9px 14px; border-radius: 100px; display: inline-flex; align-items: center; gap: 8px; }
.pvviz__chip svg { width: 18px; height: 18px; }

.irviz { background: radial-gradient(circle at 50% 40%, #3a1c14, #0c1612); }
.irviz__panel { width: 56%; aspect-ratio: 3/2; border-radius: 14px; background: linear-gradient(145deg, #5a2418, #2a120c); border: 2px solid rgba(237,90,63,.4); display: grid; align-content: center; gap: 10px; padding: 18px; z-index: 2; box-shadow: 0 0 60px rgba(237,90,63,.4); }
.irviz__panel span { height: 4px; border-radius: 4px; background: rgba(255,178,62,.55); animation: irpulse 2.5s ease-in-out infinite; }
.irviz__panel span:nth-child(2){ animation-delay:.4s } .irviz__panel span:nth-child(3){ animation-delay:.8s }
@keyframes irpulse { 0%,100%{opacity:.4} 50%{opacity:1} }
.irviz__waves { position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, transparent 30%, rgba(237,90,63,.08) 31%, transparent 33%, transparent 45%, rgba(237,90,63,.06) 46%, transparent 48%); animation: irwave 4s ease-in-out infinite; }
@keyframes irwave { 0%,100%{transform:scale(1); opacity:.6} 50%{transform:scale(1.15); opacity:1} }

.wpviz { background: radial-gradient(circle at 50% 50%, #103024, #0c1612); }
.wpviz__ring { position: absolute; width: 200px; height: 200px; border-radius: 50%; border: 2px dashed rgba(21,160,106,.5); animation: spin 14s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.wpviz__core { width: 92px; height: 92px; border-radius: 50%; background: radial-gradient(circle at 40% 30%, #1bd089, var(--leaf-deep)); display: grid; place-items: center; color: #fff; font-size: 40px; box-shadow: 0 0 50px rgba(21,160,106,.6); z-index: 2; }

.evviz { background: radial-gradient(circle at 50% 50%, #122a47, #0c1612); flex-direction: column; gap: 18px; }
.evviz__plug { width: 76px; height: 76px; border-radius: 20px; background: rgba(44,123,229,.18); border: 1px solid rgba(44,123,229,.4); display: grid; place-items: center; color: #5aa0ff; font-size: 36px; }
.evviz__flow { display: flex; gap: 8px; }
.evviz__flow span { width: 10px; height: 10px; border-radius: 50%; background: #2C7BE5; animation: evflow 1.2s ease-in-out infinite; }
.evviz__flow span:nth-child(2){animation-delay:.2s} .evviz__flow span:nth-child(3){animation-delay:.4s}
@keyframes evflow { 0%,100%{opacity:.25; transform:translateY(0)} 50%{opacity:1; transform:translateY(-5px)} }
.evviz__bat { width: 58%; height: 26px; border-radius: 8px; border: 2px solid rgba(255,255,255,.3); padding: 3px; position: relative; }
.evviz__bat i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--leaf), #4fd) ; animation: charge 3s ease-in-out infinite; }
@keyframes charge { 0%{width:20%} 50%{width:82%} 100%{width:20%} }
.evviz__pct { bottom: auto; top: 18px; }

.about-media, .jobs-media { aspect-ratio: 4/3.2; box-shadow: var(--sh-3); }

/* ---------------- Spec band ---------------- */
.specs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.spec { text-align: center; padding: 8px; }
.spec__n { font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 3.4vw, 3rem); letter-spacing: -.03em; line-height: 1; color: var(--ink); }
.on-dark .spec__n { color: #fff; }
.spec__l { color: var(--slate); font-weight: 600; margin-top: 8px; font-size: 14.5px; }
.on-dark .spec__l { color: var(--mist); }
@media (max-width: 620px) { .specs { grid-template-columns: 1fr 1fr; gap: 30px 16px; } }

/* ---------------- Feature rows ---------------- */
.feat-stack { display: flex; flex-direction: column; gap: clamp(40px, 6vw, 90px); }
.feat { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,5vw,64px); align-items: center; }
.feat--flip .feat__media { order: 2; }
.feat__media { aspect-ratio: 4/3; box-shadow: var(--sh-2); }
.feat__txt { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
@media (max-width: 820px) { .feat { grid-template-columns: 1fr; } .feat--flip .feat__media { order: 0; } }

/* ---------------- Benefits ---------------- */
.ben-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ben { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 32px; transition: transform .3s, box-shadow .3s; }
.ben:hover { transform: translateY(-5px); box-shadow: var(--sh-2); }
.ben__ic { font-size: 34px; display: inline-grid; margin-bottom: 16px; }
.ben h3 { margin-bottom: 8px; }
.ben p { font-size: 15.5px; }
@media (max-width: 820px) { .ben-grid { grid-template-columns: 1fr; max-width: 520px; } }

/* ---------------- FAQ ---------------- */
.faq { max-width: 880px; margin-inline: auto; }
.faq__head { text-align: center; margin-bottom: 40px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.faq__list { display: flex; flex-direction: column; gap: 12px; }
.faq__item { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); overflow: hidden; transition: box-shadow .25s; }
.faq__item.open { box-shadow: var(--sh-1); }
.faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 26px; font-family: var(--display); font-weight: 600; font-size: clamp(1.05rem,1.6vw,1.25rem); text-align: left; color: var(--ink); }
.faq__chev { width: 22px; height: 22px; color: var(--ember); transition: transform .3s; flex: none; }
.faq__item.open .faq__chev { transform: rotate(180deg); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height .4s cubic-bezier(.2,.8,.2,1); }
.faq__item.open .faq__a { max-height: 300px; }
.faq__a p { padding: 0 26px 24px; color: var(--slate); line-height: 1.6; }

/* ---------------- Mini CTA ---------------- */
.minicta { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(28px,4vw,48px); }
.minicta__act { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------------- Solar calculator ---------------- */
.calc { display: grid; grid-template-columns: 1.05fr .95fr; gap: 0; overflow: hidden; }
.calc__controls { padding: clamp(28px,3.5vw,44px); display: flex; flex-direction: column; gap: 26px; }
.ctrl { display: flex; flex-direction: column; gap: 12px; }
.ctrl label { font-weight: 700; font-size: 15px; display: flex; justify-content: space-between; align-items: center; }
.ctrl label b { font-family: var(--display); font-size: 18px; color: var(--ember); }
input[type=range] { -webkit-appearance: none; appearance: none; height: 6px; border-radius: 6px; background: var(--line); outline: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--ember); cursor: pointer; box-shadow: var(--sh-ember); border: 3px solid #fff; }
input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border: 3px solid #fff; border-radius: 50%; background: var(--ember); cursor: pointer; }
.seg { display: flex; gap: 8px; flex-wrap: wrap; }
.seg button { padding: 10px 16px; border-radius: 100px; background: var(--paper-2); font-weight: 700; font-size: 14px; color: var(--slate); transition: background .2s, color .2s; }
.seg button.on { background: var(--ink); color: #fff; }
.calc__note { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--slate); font-weight: 600; padding-top: 6px; border-top: 1px dashed var(--line); }
.calc__note svg { width: 20px; height: 20px; }
.calc__note b { color: var(--ink); }
.calc__result { padding: clamp(28px,3.5vw,44px); background: var(--ink); color: #fff; display: flex; flex-direction: column; gap: 22px; }
.calc__big { display: flex; flex-direction: column; gap: 6px; }
.calc__big .muted { color: var(--mist); font-size: 14px; }
.calc__euro { font-family: var(--display); font-weight: 800; font-size: clamp(3rem,6vw,4.6rem); line-height: 1; color: var(--amber); }
.calc__stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.calc__stats div { background: rgba(255,255,255,.06); border-radius: var(--r-sm); padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.calc__stats span { font-size: 12.5px; color: var(--mist); }
.calc__stats b { font-family: var(--display); font-size: 18px; font-weight: 700; }
.calc__disc { font-size: 11.5px; color: var(--mist); line-height: 1.4; }
.calc__result .calc__disc { color: rgba(255,255,255,.45); }
@media (max-width: 760px) { .calc { grid-template-columns: 1fr; } }

/* ---------------- Infrarot compare + calc ---------------- */
.infra-wrap { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(30px,4vw,56px); align-items: start; }
.infra-vs { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.vstable { width: 100%; border-collapse: collapse; margin-top: 8px; }
.vstable td { padding: 14px 12px; border-bottom: 1px solid var(--line); font-size: 15px; }
.vstable td:first-child { font-weight: 700; color: var(--ink); }
.vs-old { color: var(--slate); }
.vs-new { color: var(--leaf-deep); font-weight: 700; }
.infra-calc { padding: 30px; display: flex; flex-direction: column; gap: 20px; }
.infra-calc__h { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.infra-calc__h svg { width: 22px; height: 22px; }
.infra-calc__out { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.infra-calc__out div { background: var(--paper-2); border-radius: var(--r-sm); padding: 16px; }
.infra-calc__out span { display: block; font-size: 13px; color: var(--slate); }
.infra-calc__out b { font-family: var(--display); font-size: 24px; }
@media (max-width: 820px) { .infra-wrap { grid-template-columns: 1fr; } }

/* ---------------- Förder finder ---------------- */
.finder { padding: clamp(26px,3vw,38px); min-height: 360px; display: flex; flex-direction: column; }
.finder__top { margin-bottom: 22px; }
.finder__step { font-size: 13px; font-weight: 700; color: var(--slate); letter-spacing: .04em; }
.finder__bar { height: 6px; border-radius: 6px; background: var(--line); margin-top: 10px; overflow: hidden; }
.finder__bar i { display: block; height: 100%; background: var(--leaf); border-radius: 6px; transition: width .4s; }
.finder__q { margin-bottom: 18px; }
.finder__opts { display: flex; flex-direction: column; gap: 10px; }
.finder__opt { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-radius: var(--r-md); background: var(--paper-2); font-weight: 600; font-size: 15.5px; color: var(--ink); text-align: left; transition: background .2s, transform .2s; }
.finder__opt svg { width: 18px; height: 18px; color: var(--leaf); opacity: 0; transition: opacity .2s, transform .2s; }
.finder__opt:hover { background: var(--leaf-soft); transform: translateX(4px); }
.finder__opt:hover svg { opacity: 1; }
.finder__back { align-self: flex-start; margin-top: 16px; font-weight: 600; color: var(--slate); font-size: 14px; }
.finder__res { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; margin: auto 0; }
.finder__resic { width: 60px; height: 60px; border-radius: 50%; background: var(--leaf); color: #fff; display: grid; place-items: center; font-size: 30px; }
.finder__resact { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }

/* ---------------- Förderung page ---------------- */
.foerder-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.foerder-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(28px,3.5vw,42px); display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.foerder-card__ic { font-size: 38px; }
@media (max-width: 760px) { .foerder-grid { grid-template-columns: 1fr; } }

/* ---------------- Über uns ---------------- */
.values__grid, .perks { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.value, .perk { display: flex; flex-direction: column; gap: 10px; }
.value__ic, .perk__ic { width: 58px; height: 58px; border-radius: 16px; background: var(--ember-soft); color: var(--ember); display: grid; place-items: center; font-size: 28px; margin-bottom: 6px; }
.team-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.team-card { display: flex; flex-direction: column; gap: 4px; }
.team-card__img { aspect-ratio: 1; margin-bottom: 12px; }
.team-card strong { font-family: var(--display); font-size: 18px; }
.partners { display: grid; grid-template-columns: repeat(6,1fr); gap: 16px; }
.partner { height: 90px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--r-md); font-family: var(--display); font-weight: 700; font-size: 20px; color: var(--slate); background: var(--card); transition: color .2s, border-color .2s; }
.partner:hover { color: var(--ink); border-color: var(--ink); }
.engage { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; padding: clamp(28px,4vw,48px); }
.engage__ic { width: 76px; height: 76px; border-radius: 20px; background: var(--ember-soft); color: var(--ember); display: grid; place-items: center; font-size: 38px; }
@media (max-width: 920px) { .values__grid, .perks { grid-template-columns: 1fr; max-width: 520px; } .team-grid { grid-template-columns: 1fr 1fr; } .partners { grid-template-columns: repeat(3,1fr); } .engage { grid-template-columns: 1fr; } }

/* ---------------- Kontakt ---------------- */
.kontakt { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px,3vw,40px); align-items: start; }
.kontakt__form { padding: clamp(26px,3.5vw,40px); display: flex; flex-direction: column; gap: 16px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field span { font-weight: 700; font-size: 14px; }
.field input, .field select, .field textarea { font-family: var(--body); font-size: 15.5px; padding: 13px 16px; border-radius: var(--r-sm); border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); transition: border-color .2s, box-shadow .2s; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ember); box-shadow: 0 0 0 4px var(--ember-soft); }
.check { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--ember); }
.kontakt__success { padding: clamp(34px,5vw,56px); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.kontakt__check { width: 64px; height: 64px; border-radius: 50%; background: var(--leaf); color: #fff; display: grid; place-items: center; font-size: 32px; }
.kontakt__info { display: flex; flex-direction: column; gap: 14px; }
.kontakt__card { display: flex; gap: 16px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px 22px; }
.kontakt__ic { width: 46px; height: 46px; border-radius: 12px; background: var(--ember-soft); color: var(--ember); display: grid; place-items: center; font-size: 22px; flex: none; }
.kontakt__card strong { display: block; font-family: var(--display); font-size: 16px; margin-bottom: 3px; }
.kontakt__card .muted { font-size: 14.5px; line-height: 1.5; }
.kontakt__map { height: 200px; margin-top: 6px; }
@media (max-width: 860px) { .kontakt { grid-template-columns: 1fr; } .field-row { grid-template-columns: 1fr; } }

/* ---------------- WEG card ---------------- */
.weg-card { display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; padding: clamp(28px,4vw,44px); background: linear-gradient(110deg, #DCE9FB, var(--card) 70%); border-color: #c5dbf7; }
.weg-card__badge { display: inline-flex; align-items: center; gap: 8px; background: #2C7BE5; color: #fff; font-weight: 700; font-size: 13px; padding: 9px 15px; border-radius: 100px; }
.weg-card__badge svg { width: 16px; height: 16px; }
@media (max-width: 820px) { .weg-card { grid-template-columns: 1fr; gap: 18px; justify-items: start; } }

/* ---------------- Jobs ---------------- */
.job-list { display: flex; flex-direction: column; gap: 14px; }
.job { display: grid; grid-template-columns: 1fr auto auto; gap: 24px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px 28px; transition: box-shadow .25s, transform .25s; }
.job:hover { box-shadow: var(--sh-2); transform: translateY(-3px); }
.job__main h3 { margin-bottom: 5px; }
.job__main p { font-size: 15px; }
.job__meta { display: flex; gap: 8px; }
.pill svg { flex: none; }
@media (max-width: 820px) { .job { grid-template-columns: 1fr; gap: 16px; align-items: flex-start; } .job__apply { width: 100%; justify-content: center; } }