/* index.html : page-specific components */
:where(body.page-home) .eo-top {display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}
:where(body.page-home) .eo-logo {display:flex;align-items:flex-end;gap:3px}
:where(body.page-home) .eo-stack {display:flex;flex-direction:column;line-height:1}
:where(body.page-home) .eo-mini {font-size:8px;font-weight:700;letter-spacing:1.5px}
:where(body.page-home) .eo-opt {font-size:21px;font-weight:700;color:var(--eo-blue);line-height:21px}
:where(body.page-home) .eo-pro {height:21px;font-size:8px;font-weight:700;letter-spacing:1px;color:var(--eo-blue);writing-mode:vertical-rl;transform:rotate(180deg);display:flex;justify-content:center}
:where(body.page-home) {background:var(--eo-bg);color:var(--eo-dark);font-family:Arial,sans-serif}
:where(body.page-home) .eo-shell {min-height:100vh}
:where(body.page-home) .eo-topbar {background:#fff;border-bottom:1px solid #e8edf5;position:sticky;top:0;z-index:50}
:where(body.page-home) .eo-nav {max-width:1440px;margin:auto;padding:18px 32px;display:flex;align-items:center;justify-content:space-between;gap:30px}
:where(body.page-home) .eo-brand {font-size:21px;font-weight:800;letter-spacing:-.6px;color:var(--eo-dark);text-decoration:none}
:where(body.page-home) .eo-brand span {color:var(--eo-blue);font-weight:500}
:where(body.page-home) .eo-menu {display:flex;align-items:center;gap:28px}
:where(body.page-home) .eo-menu a {color:#667085;text-decoration:none;font-weight:600;font-size:14px}
:where(body.page-home) .eo-menu a:hover {color:var(--eo-blue)}
:where(body.page-home) .eo-login {padding:10px 18px!important;border:1px solid #d9e1ef;border-radius:10px;color:var(--eo-dark)!important}
:where(body.page-home) .eo-main {max-width:1440px;margin:auto;padding:38px 32px 60px}
:where(body.page-home) .eo-hero {background:linear-gradient(125deg,#17233c 0%,#23497f 58%,#2c68ca 100%);border-radius:24px;overflow:hidden;position:relative;padding:68px 60px;color:#fff;box-shadow:0 20px 50px rgba(28,51,91,.12)}
:where(body.page-home) .eo-hero:after {content:"";position:absolute;width:520px;height:520px;border-radius:50%;right:-130px;top:-210px;background:rgba(255,255,255,.06)}
:where(body.page-home) .eo-eyebrow {display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.15);padding:8px 13px;border-radius:30px;font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase}
:where(body.page-home) .eo-hero h1 {font-size:58px;line-height:1.05;letter-spacing:-2.5px;max-width:780px;margin:24px 0 20px;color:#fff}
:where(body.page-home) .eo-hero p {font-size:19px;line-height:1.7;max-width:700px;color:rgba(255,255,255,.78);margin:0}
:where(body.page-home) .eo-hero strong {color:#fff}
:where(body.page-home) .eo-jump {display:inline-flex;margin-top:30px;padding:14px 22px;border-radius:12px;background:#fff;color:#1f57bd;text-decoration:none;font-weight:700}
:where(body.page-home) .eo-section-head {margin:54px 0 24px;display:flex;align-items:end;justify-content:space-between;gap:20px}
:where(body.page-home) .eo-section-head h2 {font-size:32px;letter-spacing:-1px;margin:0 0 7px}
:where(body.page-home) .eo-section-head p {margin:0;color:var(--eo-muted);font-size:16px}
:where(body.page-home) .eo-tools {display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
:where(body.page-home) .eo-tool {background:#fff;border:1px solid #e7ebf2;border-radius:18px;padding:27px;min-height:330px;display:flex;flex-direction:column;transition:.2s;box-shadow:0 8px 28px rgba(32,50,85,.04);position:relative;overflow:hidden}
:where(body.page-home) .eo-tool:hover {transform:translateY(-5px);box-shadow:0 18px 40px rgba(32,50,85,.11);border-color:#cfdbef}
:where(body.page-home) .eo-tool.featured {background:var(--eo-blue);border-color:var(--eo-blue);color:#fff}
:where(body.page-home) .eo-badge {font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:var(--eo-blue);margin-bottom:28px}
:where(body.page-home) .featured .eo-badge {color:#cfe0ff}
:where(body.page-home) .eo-icon {width:56px;height:56px;border-radius:15px;background:#edf3ff;color:var(--eo-blue);display:flex;align-items:center;justify-content:center;font-size:27px;margin-bottom:22px}
:where(body.page-home) .featured .eo-icon {background:rgba(255,255,255,.14);color:#fff}
:where(body.page-home) .eo-tool h3 {font-size:22px;margin:0 0 12px;line-height:1.25}
:where(body.page-home) .featured h3 {color:#fff}
:where(body.page-home) .eo-tool p {color:var(--eo-muted);font-size:14px;line-height:1.65;margin-bottom:24px}
:where(body.page-home) .featured p {color:rgba(255,255,255,.75)}
:where(body.page-home) .eo-tool a {margin-top:auto;text-decoration:none;font-weight:800;color:var(--eo-blue);display:flex;align-items:center;justify-content:space-between}
:where(body.page-home) .featured a {color:#fff}
:where(body.page-home) .eo-info {margin-top:56px;display:grid;grid-template-columns:1.05fr .95fr;gap:22px}
:where(body.page-home) .eo-panel {background:#fff;border:1px solid #e7ebf2;border-radius:20px;padding:38px}
:where(body.page-home) .eo-panel h2 {font-size:31px;line-height:1.15;letter-spacing:-1px;margin:0 0 16px}
:where(body.page-home) .eo-panel p {color:var(--eo-muted);font-size:16px;line-height:1.75}
:where(body.page-home) .eo-steps {display:grid;gap:12px}
:where(body.page-home) .eo-step {display:flex;gap:17px;align-items:flex-start;padding:17px;border-radius:14px;background:#f7f9fc}
:where(body.page-home) .eo-num {flex:0 0 38px;height:38px;border-radius:11px;background:#e9f0ff;color:var(--eo-blue);display:flex;align-items:center;justify-content:center;font-weight:800}
:where(body.page-home) .eo-step h4 {font-size:16px;margin:1px 0 4px}
:where(body.page-home) .eo-step p {font-size:13px;line-height:1.5;margin:0}
:where(body.page-home) .eo-cta {margin-top:22px;background:#eaf1ff;border-radius:20px;padding:38px;display:flex;align-items:center;justify-content:space-between;gap:30px}
:where(body.page-home) .eo-cta h2 {margin:0 0 8px;font-size:27px}
:where(body.page-home) .eo-cta p {margin:0;color:#65728b}
:where(body.page-home) .eo-cta a {white-space:nowrap;background:var(--eo-blue);color:#fff;padding:14px 22px;border-radius:11px;text-decoration:none;font-weight:800}
:where(body.page-home) .eo-footer {max-width:1440px;margin:auto;padding:10px 32px 38px;color:#8993a7;font-size:13px;display:flex;justify-content:space-between}
:where(body.page-home) .eo-footer a {color:#667085;text-decoration:none;margin-left:18px}
@media(max-width:1050px) {
:where(body.page-home) .eo-tools {grid-template-columns:repeat(2,1fr)}
:where(body.page-home) .eo-hero h1 {font-size:48px}}
@media(max-width:720px) {
:where(body.page-home) .eo-nav {padding:16px 18px}
:where(body.page-home) .eo-menu a:not(.eo-login) {display:none}
:where(body.page-home) .eo-main {padding:22px 16px 40px}
:where(body.page-home) .eo-hero {padding:44px 26px;border-radius:18px}
:where(body.page-home) .eo-hero h1 {font-size:39px;letter-spacing:-1.5px}
:where(body.page-home) .eo-hero p {font-size:16px}
:where(body.page-home) .eo-tools, :where(body.page-home) .eo-info {grid-template-columns:1fr}
:where(body.page-home) .eo-section-head {margin-top:38px}
:where(body.page-home) .eo-section-head h2 {font-size:27px}
:where(body.page-home) .eo-tool {min-height:285px}
:where(body.page-home) .eo-panel {padding:27px}
:where(body.page-home) .eo-cta {align-items:flex-start;flex-direction:column}
:where(body.page-home) .eo-footer {padding:0 18px 30px;flex-direction:column;gap:10px}
:where(body.page-home) .eo-footer a {margin:0 16px 0 0}}
:where(body.page-home) .logo {display:inline-block;font-family:Arial,Helvetica,sans-serif}
:where(body.page-home) .logo-main {display:flex;align-items:flex-end;gap:3px}
:where(body.page-home) .logo-stack {display:flex;flex-direction:column;line-height:1}
:where(body.page-home) .logo-mini {font-size:8px;font-weight:700;letter-spacing:1.5px;color:#0c2340;margin-bottom:2px}
:where(body.page-home) .logo-optimierer {font-size:21px;font-weight:700;color:#1f5cff;line-height:21px}
:where(body.page-home) .logo-pro {height:21px;font-size:8px;font-weight:700;letter-spacing:1px;color:#1f5cff;writing-mode:vertical-rl;transform:rotate(180deg);display:flex;align-items:center;justify-content:center;line-height:1}
:where(body.page-home) .eo-brand {text-decoration:none!important}
/* e-auto.html : page-specific components */
:where(body.page-eauto) {margin:0;background:var(--eo-bg);color:var(--eo-navy);font-family:"Poppins",Arial,sans-serif}
:where(body.page-eauto) .topbar {background:#fff;border-bottom:1px solid var(--eo-border)}
:where(body.page-eauto) .nav {width:min(1240px,calc(100% - 40px));height:82px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:30px}
:where(body.page-eauto) .logo {display:flex;align-items:flex-end;gap:3px;text-decoration:none;color:var(--eo-navy);line-height:1}
:where(body.page-eauto) .logo-stack {display:flex;flex-direction:column}
:where(body.page-eauto) .logo-mini {font-size:8px;font-weight:700;letter-spacing:1.5px}
:where(body.page-eauto) .logo-optimierer {font-size:21px;font-weight:700;color:var(--eo-blue);line-height:21px}
:where(body.page-eauto) .logo-pro {height:21px;font-size:8px;font-weight:700;letter-spacing:1px;color:var(--eo-blue);writing-mode:vertical-rl;transform:rotate(180deg);display:flex;justify-content:center}
:where(body.page-eauto) .menu {display:flex;align-items:center;gap:30px}
:where(body.page-eauto) .menu a {color:#536176;text-decoration:none;font-size:14px;font-weight:500}
:where(body.page-eauto) .menu a:hover {color:var(--eo-blue)}
:where(body.page-eauto) .menu .login {border:1px solid var(--eo-border);padding:10px 18px;border-radius:9px;background:#fff}
:where(body.page-eauto) .eo-wrap {max-width:1440px;margin:auto;padding:32px}
:where(body.page-eauto) .eo-hero {background:linear-gradient(135deg,#0c2340,#173e71);color:white;border-radius:24px;padding:42px;margin-bottom:24px;position:relative;overflow:hidden}
:where(body.page-eauto) .eo-hero:after {content:"";position:absolute;width:330px;height:330px;border-radius:50%;background:rgba(31,92,255,.35);right:-90px;top:-130px}
:where(body.page-eauto) .eo-kicker {font-size:13px;letter-spacing:2px;text-transform:uppercase;opacity:.7;margin-bottom:10px}
:where(body.page-eauto) .eo-hero h1 {font-size:42px;line-height:1.1;color:white;margin:0 0 14px;max-width:700px}
:where(body.page-eauto) .eo-hero p {max-width:760px;font-size:17px;line-height:1.6;color:#d9e4f4;margin:0}
:where(body.page-eauto) .eo-grid {display:grid;grid-template-columns:1.15fr .85fr;gap:24px}
:where(body.page-eauto) .eo-card {background:white;border-radius:20px;padding:28px;box-shadow:0 10px 35px rgba(24,47,83,.06);margin-bottom:24px}
:where(body.page-eauto) .eo-title {font-size:22px;margin:0 0 6px}
:where(body.page-eauto) .eo-sub {color:var(--eo-muted);margin:0 0 22px;line-height:1.5}
:where(body.page-eauto) .eo-fields {display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
:where(body.page-eauto) .eo-field label {display:block;font-size:13px;font-weight:700;margin-bottom:7px}
:where(body.page-eauto) .eo-field input, :where(body.page-eauto) .eo-field select {width:100%;height:48px;border:1px solid #dbe1eb;border-radius:10px;background:#fff;padding:0 13px;color:#263b59;font-size:14px}
:where(body.page-eauto) .eo-field small {display:block;color:#95a1b3;margin-top:6px}
:where(body.page-eauto) .eo-filter {display:grid;grid-template-columns:1fr 1fr;gap:18px}
:where(body.page-eauto) .eo-full {grid-column:1/-1}
:where(body.page-eauto) .eo-range {display:flex;gap:8px}
:where(body.page-eauto) .eo-chip {border:1px solid #dbe1eb;background:#fff;border-radius:10px;padding:11px 12px;cursor:pointer;flex:1;text-align:center;font-size:13px}
:where(body.page-eauto) .eo-chip.active {border-color:var(--eo-blue);background:#eef3ff;color:var(--eo-blue);font-weight:700}
:where(body.page-eauto) .eo-btn {border:0;background:var(--eo-blue);color:white;border-radius:11px;padding:14px 20px;font-weight:700;cursor:pointer;width:100%;font-size:15px}
:where(body.page-eauto) .eo-btn:hover {filter:brightness(.96)}
:where(body.page-eauto) .eo-summary {display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
:where(body.page-eauto) .eo-stat {padding:18px;background:#f7f9fc;border-radius:14px}
:where(body.page-eauto) .eo-stat b {display:block;font-size:22px;color:var(--eo-navy)}
:where(body.page-eauto) .eo-stat span {font-size:12px;color:var(--eo-muted)}
:where(body.page-eauto) .eo-results-head {margin:12px 0 18px}
:where(body.page-eauto) .eo-results-head h2 {margin:0;font-size:26px}
:where(body.page-eauto) .eo-match-count {display:inline-block;margin-top:8px;color:var(--eo-muted);font-size:14px}
:where(body.page-eauto) .eo-cars {display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
:where(body.page-eauto) .eo-car {background:#fff;border-radius:20px;padding:24px;box-shadow:0 10px 35px rgba(24,47,83,.06);border:1px solid transparent}
:where(body.page-eauto) .eo-car:first-child {border-color:#bfd0ff}
:where(body.page-eauto) .eo-rank {display:inline-flex;padding:6px 10px;border-radius:20px;background:#eef3ff;color:var(--eo-blue);font-size:11px;font-weight:700}
:where(body.page-eauto) .eo-car h3 {font-size:20px;margin:15px 0 4px}
:where(body.page-eauto) .eo-car .type {color:var(--eo-muted);font-size:13px;margin-bottom:18px}
:where(body.page-eauto) .eo-specs {display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}
:where(body.page-eauto) .eo-spec {border-top:1px solid #edf0f5;padding-top:10px}
:where(body.page-eauto) .eo-spec b {display:block;font-size:15px}
:where(body.page-eauto) .eo-spec span {font-size:11px;color:var(--eo-muted)}
:where(body.page-eauto) .eo-saving-grid {display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
:where(body.page-eauto) .eo-saving {background:#eef3ff;border-radius:12px;padding:13px;color:#174a9e}
:where(body.page-eauto) .eo-saving.green {background:#eefaf5;color:#117451}
:where(body.page-eauto) .eo-saving strong {font-size:21px;display:block;line-height:1.1}
:where(body.page-eauto) .eo-saving span {font-size:11px;display:block;margin-top:4px}
:where(body.page-eauto) .eo-amortisation {margin-top:14px;border-top:1px solid #edf0f5;padding-top:12px;font-size:12px;line-height:1.55;color:#41546d}
:where(body.page-eauto) .eo-amortisation b {color:var(--eo-navy)}
:where(body.page-eauto) .eo-production {margin-top:13px;padding:11px 12px;background:#f7f9fc;border-radius:10px;font-size:11px;color:#536176;line-height:1.5}
:where(body.page-eauto) .eo-fit {font-size:12px;color:var(--eo-muted);margin-top:13px;line-height:1.45}
:where(body.page-eauto) .eo-note {font-size:12px;color:#8b98aa;line-height:1.5;margin-top:18px}
:where(body.page-eauto) .eo-more {margin-top:18px}
:where(body.page-eauto) .eo-more summary {cursor:pointer;color:var(--eo-blue);font-weight:700;list-style:none}
:where(body.page-eauto) .eo-more summary::-webkit-details-marker {display:none}
:where(body.page-eauto) .eo-more summary:after {content:"+";display:inline-flex;align-items:center;justify-content:center;margin-left:9px;width:20px;height:20px;border-radius:50%;background:#eaf1ff}
:where(body.page-eauto) .eo-more[open] summary {margin-bottom:18px}
:where(body.page-eauto) .eo-more[open] summary:after {content:"–"}
:where(body.page-eauto) .eo-calculation {margin-top:26px;background:#fff;border:1px solid var(--eo-border);border-radius:16px;padding:0 22px}
:where(body.page-eauto) .eo-calculation summary {padding:20px 0;cursor:pointer;font-weight:700;color:var(--eo-navy)}
:where(body.page-eauto) .eo-calculation-body {padding:0 0 22px;color:#536176;font-size:13px;line-height:1.65}
:where(body.page-eauto) .eo-calculation-body h3 {color:var(--eo-navy);font-size:16px;margin:16px 0 6px}
:where(body.page-eauto) .eo-calculation-body p {margin:5px 0}
:where(body.page-eauto) .eo-formula {padding:12px 14px;background:#f5f8fc;border-radius:10px;margin:10px 0;color:#263b59}
@media(max-width:1000px) {
:where(body.page-eauto) .eo-grid, :where(body.page-eauto) .eo-cars {grid-template-columns:1fr}
:where(body.page-eauto) .eo-fields, :where(body.page-eauto) .eo-filter {grid-template-columns:1fr}
:where(body.page-eauto) .eo-full {grid-column:auto}
:where(body.page-eauto) .eo-summary {grid-template-columns:1fr}
:where(body.page-eauto) .eo-hero h1 {font-size:34px}}
@media(max-width:800px) {
:where(body.page-eauto) .menu a:not(.login) {display:none}}
@media(max-width:600px) {
:where(body.page-eauto) .nav {width:min(100% - 28px,1240px)}
:where(body.page-eauto) .logo-optimierer {font-size:18px}
:where(body.page-eauto) .menu .login {padding:9px 12px}
:where(body.page-eauto) .eo-wrap {padding:16px}
:where(body.page-eauto) .eo-hero {padding:28px}
:where(body.page-eauto) .eo-car {padding:20px}
:where(body.page-eauto) .eo-compare-grid {grid-template-columns:1fr}}
/* photovoltaik.html : page-specific components */
:where(body.page-pv) * {
box-sizing: border-box
}
:where(body.page-pv) {
margin: 0;
background: var(--bg);
font-family: Arial, sans-serif;
color: #23304b
}
:where(body.page-pv) .top {
background: #fff;
border-bottom: 1px solid #e8edf5
}
:where(body.page-pv) .nav, :where(body.page-pv) main, :where(body.page-pv) .foot {
max-width: 1180px;
margin: auto
}
:where(body.page-pv) .nav {
height: 73px;
padding: 14px 30px;
display: flex;
align-items: center;
justify-content: space-between
}
:where(body.page-pv) .logo {
font-size: 20px;
color: var(--b);
font-weight: bold;
text-decoration: none
}
:where(body.page-pv) .logo small {
font-size: 8px;
color: var(--n);
display: block;
letter-spacing: 1px
}
:where(body.page-pv) .menu {
display: flex;
gap: 25px;
align-items: center
}
:where(body.page-pv) .menu a {
font-size: 14px;
color: #667085;
text-decoration: none;
font-weight: 600
}
:where(body.page-pv) .menu .login {
padding: 10px 17px;
border: 1px solid #d9e1ef;
border-radius: 10px;
color: var(--n)
}
:where(body.page-pv) main {
padding: 36px 30px 65px
}
:where(body.page-pv) .back {
font-size: 14px;
text-decoration: none;
font-weight: bold;
color: var(--m);
display: inline-block;
margin-bottom: 20px
}
:where(body.page-pv) .hero {
border-radius: 24px;
padding: 45px 52px;
background: linear-gradient(125deg, #17233c, #23497f 57%, #2c68ca);
color: #fff
}
:where(body.page-pv) .tag {
display: inline-block;
padding: 7px 12px;
border-radius: 20px;
border: 1px solid #fff3;
background: #fff2;
font-weight: bold;
font-size: 11px;
letter-spacing: 1.2px
}
:where(body.page-pv) .hero h1 {
font-size: 43px;
line-height: 1.06;
letter-spacing: -1.5px;
margin: 17px 0 12px
}
:where(body.page-pv) .hero p {
max-width: 700px;
line-height: 1.6;
color: #fffd;
font-size: 16px
}
:where(body.page-pv) .intro {
color: var(--m);
font-size: 14px;
margin: 26px 2px 17px
}
:where(body.page-pv) .card {
background: #fff;
border: 1px solid var(--l);
border-radius: 19px;
margin: 16px 0;
box-shadow: 0 12px 34px #1e305312;
overflow: hidden
}
:where(body.page-pv) .head {
display: flex;
gap: 14px;
padding: 25px 29px 11px
}
:where(body.page-pv) .num {
width: 32px;
height: 32px;
display: grid;
place-items: center;
flex: none;
border-radius: 10px;
background: var(--b);
color: #fff;
font-size: 14px;
font-weight: bold
}
:where(body.page-pv) .head h2 {
font-size: 21px;
margin: 3px 0 4px;
color: var(--n)
}
:where(body.page-pv) .head p {
margin: 0;
color: var(--m);
font-size: 13px;
line-height: 1.4
}
:where(body.page-pv) .body {
padding: 13px 29px 29px
}
:where(body.page-pv) .grid {
display: grid;
grid-template-columns:repeat(2, 1fr);
gap: 17px
}
:where(body.page-pv) .grid3 {
display: grid;
grid-template-columns:repeat(3, 1fr);
gap: 17px
}
:where(body.page-pv) label {
display: block;
font-size: 13px;
font-weight: bold;
color: #33415b;
margin-bottom: 7px
}
:where(body.page-pv) small {
display: block;
color: #8793a6;
font-size: 11px;
margin-top: 5px
}
:where(body.page-pv) .in {
position: relative
}
:where(body.page-pv) input, :where(body.page-pv) select {
width: 100%;
height: 47px;
border: 1px solid #dbe2ee;
border-radius: 10px;
background: #fff;
padding: 0 12px;
font-size: 14px;
color: #23304b
}
:where(body.page-pv) .unit {
position: absolute;
right: 12px;
top: 15px;
color: #7d899d;
font-weight: bold;
font-size: 12px
}
:where(body.page-pv) .in input {
padding-right: 62px
}
:where(body.page-pv) details {
border-top: 1px solid var(--l);
margin: 0 29px 25px;
padding-top: 16px
}
:where(body.page-pv) summary {
list-style: none;
cursor: pointer;
color: var(--b);
font-weight: bold;
font-size: 14px
}
:where(body.page-pv) summary::-webkit-details-marker {
display: none
}
:where(body.page-pv) summary:before {
content: '+';
font-size: 20px;
font-weight: normal;
margin-right: 8px
}
:where(body.page-pv) details[open] summary:before {
content: '–'
}
:where(body.page-pv) .copy {
font-size: 13px;
line-height: 1.5;
color: var(--m);
margin: 10px 0 16px
}
:where(body.page-pv) .hours {
display: grid;
grid-template-columns:repeat(12, 1fr);
gap: 7px
}
:where(body.page-pv) .hour label {
font-size: 10px;
text-align: center;
color: var(--m);
margin: 0 0 4px
}
:where(body.page-pv) .hour input {
height: 39px;
padding: 3px;
text-align: center;
font-size: 12px
}
:where(body.page-pv) .device-add {
display: grid;
grid-template-columns:2fr 1fr 1fr 1fr auto;
gap: 9px;
align-items: end
}
:where(body.page-pv) .device {
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid var(--l);
padding: 11px 0;
font-size: 13px
}
:where(body.page-pv) .device span {
color: var(--m)
}
:where(body.page-pv) .link-btn {
border: 0;
background: none;
color: #d53545;
font-weight: bold;
cursor: pointer;
padding: 5px
}
:where(body.page-pv) .result {
background: #eaf1ff;
border-radius: 16px;
padding: 18px 21px;
margin-top: 19px;
display: flex;
gap: 28px;
align-items: center;
justify-content: space-between
}
:where(body.page-pv) .result b {
font-size: 21px;
color: var(--n)
}
:where(body.page-pv) .btn {
background: var(--b);
color: #fff;
border: 0;
border-radius: 11px;
padding: 15px 21px;
font-size: 15px;
font-weight: bold;
cursor: pointer;
white-space: nowrap
}
:where(body.page-pv) .btn.small {
padding: 13px 16px;
font-size: 13px
}
:where(body.page-pv) .output {
display: none
}
:where(body.page-pv) .quick, :where(body.page-pv) .scenarios {
display: grid;
grid-template-columns:repeat(4, 1fr);
gap: 12px;
margin-top: 22px
}
:where(body.page-pv) .stat {
background: #f7f9fc;
border-radius: 12px;
padding: 15px
}
:where(body.page-pv) .stat b {
display: block;
color: var(--n);
font-size: 20px
}
:where(body.page-pv) .stat span {
font-size: 11px;
color: var(--m);
line-height: 1.35
}
:where(body.page-pv) .scenario-title {
margin: 28px 0 12px;
color: var(--n);
font-size: 17px
}
:where(body.page-pv) .scenarios {
grid-template-columns:repeat(3, 1fr);
margin-top: 0
}
:where(body.page-pv) .scenario {
border: 1px solid var(--l);
border-radius: 15px;
padding: 19px
}
:where(body.page-pv) .scenario.pv {
border-color: #b9d6ff;
background: #f8fbff
}
:where(body.page-pv) .scenario.bat {
border-color: #ade4d5;
background: #f5fdf9
}
:where(body.page-pv) .scenario h3 {
font-size: 15px;
margin: 0 0 6px;
color: var(--n)
}
:where(body.page-pv) .scenario p {
font-size: 11px;
color: var(--m);
margin: 0 0 18px;
line-height: 1.35
}
:where(body.page-pv) .costs {
display: grid;
grid-template-columns:repeat(3, 1fr);
gap: 8px
}
:where(body.page-pv) .costs span {
font-size: 10px;
color: var(--m)
}
:where(body.page-pv) .costs b {
display: block;
color: var(--n);
font-size: 15px;
margin-top: 3px
}
:where(body.page-pv) .chartbox {
border: 1px solid var(--l);
border-radius: 15px;
padding: 18px;
margin-top: 24px
}
:where(body.page-pv) .chartbox h3 {
margin: 0 0 5px;
font-size: 16px;
color: var(--n)
}
:where(body.page-pv) .chartbox p {
font-size: 12px;
color: var(--m);
margin: 0 0 15px
}
:where(body.page-pv) .legend {
display: flex;
gap: 14px;
font-size: 11px;
color: var(--m);
flex-wrap: wrap
}
:where(body.page-pv) .legend i {
display: inline-block;
width: 9px;
height: 9px;
border-radius: 50%;
margin-right: 5px
}
:where(body.page-pv) .chart {
width: 100%;
height: 285px;
display: block
}
:where(body.page-pv) .formula {
font: 12px/1.55 Consolas, monospace;
background: #101d33;
color: #d8e6ff;
padding: 16px;
border-radius: 11px;
white-space: pre-wrap;
overflow: auto
}
:where(body.page-pv) .foot {
padding: 0 30px 30px;
color: #8993a7;
font-size: 13px
}
@media (max-width: 750px) {
:where(body.page-pv) .nav, :where(body.page-pv) main {
padding-left: 16px;
padding-right: 16px
}
:where(body.page-pv) .menu a:not(.login) {
display: none
}
:where(body.page-pv) .hero {
padding: 34px 25px
}
:where(body.page-pv) .hero h1 {
font-size: 34px
}
:where(body.page-pv) .grid, :where(body.page-pv) .grid3, :where(body.page-pv) .quick, :where(body.page-pv) .scenarios, :where(body.page-pv) .costs, :where(body.page-pv) .device-add {
grid-template-columns:1fr
}
:where(body.page-pv) .head, :where(body.page-pv) .body {
padding-left: 20px;
padding-right: 20px
}
:where(body.page-pv) details {
margin-left: 20px;
margin-right: 20px
}
:where(body.page-pv) .hours {
grid-template-columns:repeat(6, 1fr)
}
:where(body.page-pv) .result {
align-items: flex-start;
flex-direction: column
}
:where(body.page-pv) .chart {
height: 260px
}
}
/* Shared design: edit colors, widths and spacing here for all three pages. */
:root {
--eo-blue: #2463eb;
--eo-dark: #17233c;
--eo-navy: var(--eo-dark);
--eo-green: #078b69;
--eo-bg: #f5f7fb;
--eo-muted: #6d7890;
--eo-border: #e4eaf3;
--eo-surface: #fff;
--eo-width: 1440px;
--eo-gutter: 32px;
--b: var(--eo-blue);
--n: var(--eo-dark);
--m: var(--eo-muted);
--bg: var(--eo-bg);
--l: var(--eo-border);
--g: var(--eo-green);
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--eo-bg); color: var(--eo-dark); font-family: Arial, Helvetica, sans-serif; line-height: 1.5; }
.eo-site-header { background: var(--eo-surface); border-bottom: 1px solid var(--eo-border); position: sticky; top: 0; z-index: 50; }
.eo-site-nav, .eo-main, .eo-wrap, body.page-pv main, .eo-site-footer { width: 100%; max-width: var(--eo-width); margin-inline: auto; padding-inline: var(--eo-gutter); }
.eo-site-nav { min-height: 82px; padding-block: 18px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.eo-site-logo { display: flex; align-items: flex-end; gap: 3px; line-height: 1; text-decoration: none; flex-shrink: 0; }
.eo-site-stack { display: flex; flex-direction: column; }
.eo-site-mini { font-size: 8px; font-weight: 700; letter-spacing: 1.5px; color: var(--eo-dark); margin-bottom: 2px; }
.eo-site-name { font-size: 21px; font-weight: 700; line-height: 21px; color: var(--eo-blue); }
.eo-site-pro { height: 21px; font-size: 8px; font-weight: 700; letter-spacing: 1px; color: var(--eo-blue); writing-mode: vertical-rl; transform: rotate(180deg); display: flex; justify-content: center; }
.eo-site-menu { display: flex; align-items: center; gap: 28px; }
.eo-site-menu a { color: var(--eo-muted); text-decoration: none; font-size: 14px; font-weight: 600; }
.eo-site-menu a:hover { color: var(--eo-blue); }
.eo-site-menu .eo-site-login { padding: 10px 18px; border: 1px solid var(--eo-border); border-radius: 10px; color: var(--eo-dark); }
.eo-main, .eo-wrap, body.page-pv main { padding-top: 32px; padding-bottom: 60px; }
.eo-site-footer { padding-top: 10px; padding-bottom: 32px; display: flex; justify-content: space-between; gap: 16px; color: var(--eo-muted); font-size: 13px; }
.eo-site-footer a { margin-left: 18px; color: var(--eo-muted); text-decoration: none; }
.back { display: inline-block; margin-bottom: 20px; color: var(--eo-muted); font-size: 14px; font-weight: 700; text-decoration: none; }
.back:hover { color: var(--eo-blue); }
.eo-hero, body.page-pv .hero { background: linear-gradient(125deg, var(--eo-dark), #23497f 57%, #2c68ca); border-radius: 24px; padding: 44px 48px; color: #fff; margin-bottom: 24px; box-shadow: 0 12px 34px #1e305312; }
.eo-hero h1, body.page-pv .hero h1 { color: #fff; font-size: 42px; line-height: 1.1; letter-spacing: -1.5px; margin: 16px 0 14px; max-width: 780px; }
.eo-hero p, body.page-pv .hero p { color: #d9e4f4; font-size: 17px; line-height: 1.65; max-width: 760px; margin: 0; }
.eo-kicker, .eo-eyebrow, body.page-pv .tag { font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; }
.eo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.eo-grid > *, .eo-field, body.page-pv .grid > *, body.page-pv .grid3 > * { min-width: 0; }
.eo-card, body.page-pv .card { background: var(--eo-surface); border: 1px solid var(--eo-border); border-radius: 20px; box-shadow: 0 12px 34px #1e305312; margin: 0 0 24px; }
.eo-card { padding: 28px; }
.eo-question-head, body.page-pv .head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 22px; }
body.page-pv .head { padding: 28px 28px 0; }
.eo-question-num, body.page-pv .num { width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center; border-radius: 10px; background: var(--eo-blue); color: #fff; font-size: 14px; font-weight: 700; }
.eo-title, body.page-pv .head h2 { font-size: 22px; line-height: 1.3; color: var(--eo-dark); margin: 2px 0 6px; }
.eo-question-head .eo-sub, body.page-pv .head p { color: var(--eo-muted); font-size: 14px; line-height: 1.5; margin: 0; }
body.page-pv .body { padding: 0 28px 28px; }
.eo-fields, .eo-filter, body.page-pv .grid, body.page-pv .grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.eo-field label, body.page-pv label { color: var(--eo-dark); font-size: 13px; font-weight: 700; margin-bottom: 7px; }
.eo-field input, .eo-field select, body.page-pv input, body.page-pv select { height: 48px; border: 1px solid var(--eo-border); border-radius: 10px; background: var(--eo-surface); color: var(--eo-dark); font-family: inherit; font-size: 14px; padding: 0 13px; }
.eo-field small, body.page-pv small { font-size: 12px; line-height: 1.5; color: var(--eo-muted); margin-top: 6px; }
.eo-btn, body.page-pv .btn { background: var(--eo-blue); color: #fff; border: 0; border-radius: 11px; padding: 14px 20px; font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.eo-btn:hover, body.page-pv .btn:hover { filter: brightness(.94); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid var(--eo-blue); outline-offset: 3px; }
body.page-pv .in input { padding-right: 62px; }
body.page-pv .hour input { height: 39px; padding: 3px; font-size: 12px; }
body.page-pv .hour label { font-size: 10px; text-align: center; }
body.page-pv .result { flex-wrap: wrap; }
body.page-pv .device { gap: 12px; flex-wrap: wrap; }
.eo-results-head .eo-kicker { color: var(--eo-muted); }
.eo-empty-result { grid-column: 1 / -1; }
@media (max-width: 1000px) {
.eo-grid, .eo-cars { grid-template-columns: 1fr; }
}
@media (max-width: 750px) {
:root { --eo-gutter: 16px; }
.eo-site-menu a:not(.eo-site-login) { display: none; }
.eo-site-nav { gap: 12px; min-height: 73px; }
.eo-site-menu .eo-site-login { padding: 9px 12px; }
.eo-main, .eo-wrap, body.page-pv main { padding-top: 22px; padding-bottom: 40px; }
.eo-hero, body.page-pv .hero { padding: 30px 24px; border-radius: 18px; }
.eo-hero h1, body.page-pv .hero h1 { font-size: 34px; }
.eo-hero p, body.page-pv .hero p { font-size: 16px; }
.eo-fields, .eo-filter, body.page-pv .grid, body.page-pv .grid3 { grid-template-columns: 1fr; }
.eo-full { grid-column: 1 / -1; }
.eo-card { padding: 20px; }
body.page-pv .head { padding: 20px 20px 0; }
body.page-pv .body { padding: 0 20px 20px; }
.eo-site-footer { flex-direction: column; }
.eo-site-footer a { margin: 0 16px 0 0; }
body.page-pv .btn { white-space: normal; }
}
/* PV chart legend and savings summary */
body.page-pv .pv-detail-style-1 { background:#5f718e }
body.page-pv .pv-detail-style-2 { background:#2463eb }
body.page-pv .pv-detail-style-3 { background:#08a878 }
body.page-pv .pv-detail-style-4 { margin:0 0 18px;padding:22px 24px;border-radius:16px;background:linear-gradient(120deg,#087b63,#12aa7e);color:#fff;box-shadow:0 12px 24px #078b6940 }
body.page-pv .pv-detail-style-5 { display:block;font-size:11px;font-weight:bold;letter-spacing:1px;opacity:.8 }
body.page-pv .pv-detail-style-6 { display:block;font-size:34px;line-height:1.15;margin:5px 0 }
body.page-pv .pv-detail-style-7 { font-size:13px }
body :is(h1,h2,h3,h4,input,select,button) { font-family: inherit; }
/* E-auto: costs first, combustion reference beside results. */
.eo-sort { max-width: 420px; margin: 20px 0; }
.eo-comparison { display: grid; grid-template-columns: minmax(240px, .8fr) minmax(0, 2.2fr); gap: 24px; align-items: start; }
.eo-comparison .eo-cars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.eo-current { background: #f7f9fc; border-color: var(--eo-border); }
.eo-cost-focus { background: #eaf1ff; border-radius: 14px; padding: 18px; margin: 18px 0; }
.eo-cost-focus strong { display: block; font-size: 28px; color: var(--eo-dark); line-height: 1.2; }
.eo-cost-focus span { font-size: 13px; color: var(--eo-muted); }
body.page-eauto .eo-saving strong { font-size: 17px; }
@media (max-width: 1000px) { .eo-comparison { grid-template-columns: 1fr; } }
@media (max-width: 750px) { .eo-comparison .eo-cars { grid-template-columns: 1fr; } }
/* Equal comparison cards and optional purchase costs. */
body.page-eauto .eo-sort { float: right; width: min(100%, 300px); margin: 0 0 14px 20px; }
body.page-eauto .eo-sort label { font-size: 12px; }
body.page-eauto .eo-sort select { height: 38px; font-size: 12px; }
.eo-comparison-note { clear: both; }
body.page-eauto .eo-cost-toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; }
body.page-eauto .eo-cost-toggle input { width: 18px; height: 18px; padding: 0; flex: 0 0 18px; accent-color: var(--eo-blue); }
body.page-eauto .eo-comparison { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 18px; }
body.page-eauto .eo-comparison .eo-cars { gap: 18px; }
body.page-eauto .eo-current { background: #eeeeef; border-color: #d7d9dd; }
body.page-eauto .eo-cost-lower { background: #edf9ef; border-color: #bedfc5; }
body.page-eauto .eo-cost-higher { background: #fff0f0; border-color: #efc8c8; }
body.page-eauto .eo-cost-focus { background: rgba(255,255,255,.65); }
body.page-eauto .eo-spec { border-color: rgba(23,35,60,.12); }
body.page-eauto .eo-car .type { min-height: 20px; }
body.page-eauto .eo-car h3 { min-height: 50px; }
@media (max-width: 1100px) { body.page-eauto .eo-comparison { grid-template-columns: 1fr; } }
@media (max-width: 750px) { body.page-eauto .eo-sort { float: none; margin: 0 0 14px; width: 100%; } }
/* Fahrprofil and compact comparison controls. */
body.page-eauto .eo-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
body.page-eauto .eo-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.page-eauto .eo-result-controls { display: flex; justify-content: flex-end; align-items: center; gap: 24px; flex-wrap: wrap; margin-bottom: 22px; }
body.page-eauto .eo-result-controls .eo-sort { float: none; margin: 0; }
body.page-eauto .eo-result-controls .eo-full { font-size: 13px; }
body.page-eauto .eo-current, body.page-eauto .eo-cost-lower, body.page-eauto .eo-cost-higher { background: #fff; border-color: var(--eo-border); }
body.page-eauto .eo-cost-lower .eo-cost-focus { background: #edf9ef; }
body.page-eauto .eo-cost-higher .eo-cost-focus { background: #fff0f0; }
body.page-eauto .eo-current .eo-cost-focus { background: #fff; border: 1px solid var(--eo-border); }
body.page-eauto .eo-specs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.page-eauto .eo-spec b { overflow-wrap: anywhere; }
.eo-info-button { display: inline-grid; place-items: center; width: 21px; height: 21px; border: 1px solid var(--eo-muted); border-radius: 50%; color: var(--eo-dark); background: #fff; font: bold 12px Arial; cursor: pointer; }
.eo-cost-dialog { width: min(560px, calc(100% - 32px)); max-height: 85vh; border: 1px solid var(--eo-border); border-radius: 20px; padding: 30px; color: var(--eo-dark); background: #fff; box-shadow: 0 20px 70px #17233c40; }
.eo-cost-dialog::backdrop { background: #17233c88; }
.eo-cost-dialog h2 { margin: 0 30px 18px 0; font-size: 23px; }
.eo-cost-dialog p { font-size: 14px; line-height: 1.6; }
.eo-modal-close { float: right; border: 0; background: #fff; font-size: 28px; cursor: pointer; color: var(--eo-dark); }
@media (max-width: 1100px) { body.page-eauto .eo-grid { grid-template-columns: 1fr; } }
@media (max-width: 750px) { body.page-eauto .eo-fields, body.page-eauto .eo-specs { grid-template-columns: repeat(3, minmax(0, 1fr)); } body.page-eauto .eo-result-controls { justify-content: flex-start; gap: 12px; } }
@media (max-width: 480px) { body.page-eauto .eo-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.page-eauto .eo-field label { font-size: 11px; } body.page-eauto .eo-field input, body.page-eauto .eo-field select { padding-inline: 6px; font-size: 12px; } }
/* Compact results toolbar and optional profile fields. */
body.page-eauto .eo-result-controls { display: flex; align-items: center; justify-content: flex-end; gap: 20px; }
body.page-eauto .eo-result-controls #matchInfo { margin: 0 auto 0 0; font-size: 13px; }
body.page-eauto .eo-result-controls .eo-cost-toggle { margin: 0; }
body.page-eauto .eo-result-controls .eo-sort { width: 270px; flex: 0 0 270px; }
.eo-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.eo-profile-extra { margin-top: 22px; border-top: 1px solid var(--eo-border); padding-top: 16px; }
.eo-profile-extra summary { color: var(--eo-blue); font-size: 14px; font-weight: 700; cursor: pointer; }
.eo-profile-extra .eo-fields { margin-top: 18px; }
.eo-estimate { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
body.page-eauto .eo-cost-focus > span { display: block; }
body.page-eauto .eo-info-button { float: right; margin-left: 8px; }
@media (max-width: 900px) { body.page-eauto .eo-result-controls #matchInfo { flex-basis: 100%; } }
@media (max-width: 480px) { body.page-eauto .eo-result-controls .eo-sort { flex: 1 1 100%; width: 100%; } }
/* PV system and technical fields: four columns on desktop, three on medium screens. */
body.page-pv #pvForm > .card:nth-child(2) .grid3 { grid-template-columns: repeat(4,minmax(0,1fr)); }
body.page-pv .pv-detail-style-1 { background: #2463eb; }
body.page-pv .pv-detail-style-2 { background: #f5c400; }
@media (max-width: 1200px) { body.page-pv #pvForm > .card:nth-child(2) .grid3 { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width: 650px) { body.page-pv #pvForm > .card:nth-child(2) .grid3 { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 400px) { body.page-pv #pvForm > .card:nth-child(2) .grid3 { grid-template-columns: 1fr; } }
/* PV device presets, sizing and prominent investments. */
.pv-device-presets { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 18px; }
.pv-device-presets button { border: 1px solid var(--eo-border); border-radius: 20px; background: #eef3ff; color: var(--eo-blue); padding: 8px 12px; font-size: 12px; cursor: pointer; }
.pv-device-presets button:hover { background: #dce7ff; }
.pv-sizing { padding: 18px; margin-top: 22px; border: 1px solid var(--eo-border); border-radius: 14px; font-size: 14px; line-height: 1.6; }
.pv-sizing.fit { background: #edf9ef; border-color: #bedfc5; }
.pv-sizing.low, .pv-sizing.high { background: #fff7e5; border-color: #efdaa9; }
body.page-pv .pv-coverage-key { background: #078b69; }
body.page-pv :is(#pvInvestment,#batInvestment) { display: block; font-size: 28px; color: var(--eo-dark); line-height: 1.3; margin: 8px 0; }
body.page-pv .scenario > p:has(#pvInvestment), body.page-pv .scenario > p:has(#batInvestment) { background: #fff; border: 1px solid var(--eo-border); border-radius: 12px; padding: 16px; margin-top: 20px; font-size: 14px; }
/* PV overview and aligned scenario cards. */
.pv-result-overview { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 20px; margin: 20px 0; align-items: stretch; }
body.page-pv .pv-result-overview #savingHero { margin: 0; display: flex; flex-direction: column; justify-content: center; padding: 30px; }
body.page-pv .pv-result-overview #bestSavingYear { font-size: clamp(28px,3vw,42px); margin: 14px 0; }
body.page-pv .pv-result-overview .chartbox { margin: 0; background: #fff; }
body.page-pv .pv-result-overview .chart { height: auto; }
body.page-pv .scenarios { gap: 18px; align-items: stretch; }
body.page-pv .scenario { display: flex; flex-direction: column; background: #fff; border-top: 4px solid var(--eo-blue); padding: 24px; box-shadow: 0 8px 24px #17233c08; }
body.page-pv .scenario.pv { border-top-color: #f5c400; }
body.page-pv .scenario.bat { border-top-color: #078b69; }
body.page-pv .scenario h3 { font-size: 21px; }
body.page-pv .scenario > p:first-of-type { min-height: 38px; font-size: 13px; }
body.page-pv .scenario .costs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); padding: 18px; gap: 14px; border-radius: 14px; background: #f5f7fb; margin: 6px 0 20px; }
body.page-pv .scenario .costs > span:last-child { grid-column: 1 / -1; grid-row: 1; font-size: 12px; border-bottom: 1px solid var(--eo-border); padding-bottom: 14px; }
body.page-pv .scenario .costs > span:last-child b { font-size: 30px; }
body.page-pv .scenario > p:has(#pvInvestment), body.page-pv .scenario > p:has(#batInvestment), body.page-pv .scenario .pv-investment-none { margin-top: auto; padding: 18px; border: 1px solid var(--eo-border); border-radius: 12px; font-size: 14px; background: #fff; }
body.page-pv .pv-charge-key { background: #078b69; }
body.page-pv .pv-discharge-key { background: #df4545; }
@media(max-width:850px) { .pv-result-overview { grid-template-columns: 1fr; } }
/* Annual costs and sizing verdict. */
body.page-pv .scenario.pv .costs > span:last-child { background: #fff7ce; border-radius: 10px; padding: 16px; }
body.page-pv .scenario.bat .costs > span:last-child { background: #e5f5e9; border-radius: 10px; padding: 16px; }
.pv-year-saving { display: block; margin: 12px 0; color: #078b69; font-size: 15px; }
body.page-pv .pv-sizing { font-size: 16px; font-weight: 600; padding: 24px; border-left-width: 6px; }
body.page-pv .pv-sizing.fit { color: #086c45; border-left-color: #078b69; }
body.page-pv .pv-sizing.low, body.page-pv .pv-sizing.high { color: #78510a; border-left-color: #d79d22; }
/* Heizungsrechner */
body.page-heizung .eo-fields {grid-template-columns:repeat(2,minmax(0,1fr))}
body.page-heizung .heat-results {grid-template-columns:repeat(3,minmax(0,1fr))}
body.page-heizung .eo-specs {grid-template-columns:repeat(3,minmax(0,1fr))}
body.page-heizung .heat-good {background:#edf9ef;color:#14633a}
body.page-heizung .heat-bad {background:#fff0f0;color:#a32e32}
body.page-heizung .heat-neutral {background:#f3f5f8;color:#536176}
body.page-heizung .eo-cost-focus strong {color:inherit}
.heat-choice {display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--eo-border);border-radius:10px;cursor:pointer;font-size:14px}
.heat-choice input {width:18px;height:18px;accent-color:var(--eo-blue)}
.heat-distribution {display:block;grid-column:1/-1;width:100%;min-width:0;border:0;padding:0;margin:0 0 18px}
.heat-distribution legend {float:none;display:block;width:100%;font-size:13px;font-weight:700;margin-bottom:8px}
.heat-distribution-options {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;clear:both;width:100%}
.heat-distribution label:has(input:checked) {background:#eef3ff;border-color:var(--eo-blue);color:var(--eo-blue)}
.heat-prices {margin:18px 0 24px}
.heat-prices summary,.heat-support summary {cursor:pointer;font-weight:700;padding:12px 0;color:var(--eo-blue)}
.heat-error {color:#a32e32;background:#fff0f0;border-radius:12px;padding:14px;margin-bottom:20px}
body.page-heizung [hidden] {display:none!important}
body.page-heizung .eo-car h3 {min-height:56px}
body.page-heizung .eo-current .eo-specs {grid-template-columns:repeat(3,minmax(0,1fr))}
.heat-assumptions {overflow-x:auto}
.heat-assumptions table {width:100%;border-collapse:collapse;font-size:12px}
.heat-assumptions th,.heat-assumptions td {text-align:left;padding:9px;border-bottom:1px solid var(--eo-border)}
@media(max-width:750px) {body.page-heizung .eo-fields {grid-template-columns:1fr}body.page-heizung .eo-current .eo-specs,body.page-heizung .eo-specs {grid-template-columns:repeat(2,minmax(0,1fr))}}
body.page-heizung #priceFields {grid-template-columns:repeat(4,minmax(0,1fr))}
body.page-heizung .heat-comparison {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}
body.page-heizung #bestHeating {display:grid}
body.page-heizung .heat-comparison > *,body.page-heizung .heat-results > * {min-width:0}
body.page-heizung #currentHeating {display:block}
body.page-heizung .heat-comparison .eo-car {display:flex;flex-direction:column}
body.page-heizung .heat-comparison .eo-rank {align-self:flex-start}
body.page-heizung .heat-comparison .eo-fit {margin-top:auto;padding-top:14px}
body.page-heizung .heat-comparison .type {min-height:40px}
body.page-heizung .heat-empty {grid-column:1/-1;margin-bottom:0}
body.page-heizung .eo-result-controls .eo-sort {width:340px;flex-basis:340px}
@media(max-width:1100px) {body.page-heizung #priceFields {grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:750px) {body.page-heizung .eo-current .eo-specs {grid-template-columns:repeat(2,minmax(0,1fr))}body.page-heizung .eo-result-controls .eo-sort {width:100%;flex-basis:100%}}
@media(max-width:480px) {body.page-heizung #priceFields {grid-template-columns:1fr}}
body.page-heizung .heat-annual {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
body.page-heizung .heat-annual .eo-cost-focus {padding:12px;min-width:0}
body.page-heizung .heat-annual strong {font-size:22px;overflow-wrap:anywhere}
body.page-heizung .heat-annual span {font-size:11px}
body.page-heizung .heat-distribution .heat-choice {padding:10px 6px;font-size:12px;gap:6px;min-width:0}
body.page-heizung .heat-distribution input {flex-shrink:0}
@media(max-width:1000px) {
body.page-heizung #bestHeating,body.page-heizung #otherHeating {grid-template-columns:repeat(3,minmax(270px,1fr));overflow-x:auto;padding-bottom:12px}
}
body.page-heizung .heat-results .eo-car {display:flex;flex-direction:column;min-width:0}
body.page-heizung .heat-results .eo-rank {align-self:flex-start}
body.page-heizung .heat-results .eo-fit {margin-top:auto;padding-top:14px}
body.page-heizung .heat-overview {margin-top:24px}
body.page-heizung .heat-overview h2 {font-size:26px;margin-bottom:8px}
body.page-heizung .heat-overview-grid {display:grid;grid-template-columns:minmax(0,1.7fr) minmax(260px,1fr);gap:36px;align-items:center}
body.page-heizung .heat-overview .heat-annual {margin-top:0}
body.page-heizung .heat-overview .heat-annual strong {font-size:28px}
body.page-heizung .heat-overview-specs {gap:16px}
body.page-heizung .heat-balance {margin:0;min-width:0}
body.page-heizung .heat-donut {display:block;width:240px;max-width:100%;margin:0 auto 20px}
body.page-heizung .heat-donut-arcs {transform:rotate(-90deg);transform-origin:100px 100px}
body.page-heizung .heat-donut circle {fill:none;stroke-width:25}
body.page-heizung .heat-donut-space {stroke:#2463eb}
body.page-heizung .heat-donut-water {stroke:#08a878}
body.page-heizung .heat-donut-loss {stroke:#ed9a38}
body.page-heizung .heat-donut text {text-anchor:middle;fill:var(--eo-dark)}
body.page-heizung .heat-donut-total {font-size:23px;font-weight:800}
body.page-heizung .heat-donut-caption {font-size:11px}
body.page-heizung .heat-balance-legend {list-style:none;padding:0;margin:0;display:grid;gap:14px}
body.page-heizung .heat-balance-legend li {display:flex;gap:10px;align-items:center;font-size:13px;color:var(--eo-muted)}
body.page-heizung .heat-balance-legend b {display:block;color:var(--eo-dark);margin-top:3px}
body.page-heizung .heat-dot {width:12px;height:12px;border-radius:50%;flex:0 0 12px}
body.page-heizung .heat-dot-space {background:#2463eb}
body.page-heizung .heat-dot-water {background:#08a878}
body.page-heizung .heat-dot-loss {background:#ed9a38}
@media(max-width:850px) {body.page-heizung .heat-overview-grid {grid-template-columns:1fr}body.page-heizung .heat-balance {max-width:360px;width:100%;margin:auto}}