<!-- KFZ Rothmund Energiekosten-Rechner Einbau-Version für eine bestehende Website. SEO-Titel für die Seiteneinstellungen: Energiekosten-Rechner E-Auto | KFZ Rothmund SEO-Beschreibung für die Seiteneinstellungen: Vergleichen Sie Strom- und Kraftstoffkosten: Mit dem Energiekosten-Rechner von KFZ Rothmund berechnen Sie Ihre mögliche E-Auto-Ersparnis pro Jahr.--><style> /* KFZ Rothmund Energiekosten-Rechner Supermodernes Website-Modul im KFZ-Rothmund-/1a-Farbsystem. Keine externen Bibliotheken, Cookies oder Tracker. */ :root { --kfz-bg: #f3f5f7; --kfz-surface: #ffffff; --kfz-surface-soft: #f8fafc; --kfz-text: #151c20; --kfz-muted: #667177; --kfz-border: #dfe5e8; --kfz-primary: #394448; --kfz-primary-2: #222b2f; --kfz-primary-3: #101619; --kfz-yellow: #ffcc00; --kfz-yellow-soft: #fff4bf; --kfz-yellow-glow: rgba(255, 204, 0, 0.38); --kfz-orange: #f8a600; --kfz-orange-soft: #fff0d1; --kfz-container-gray: #667177; --kfz-secondary-gray: #e0e3e5; --kfz-success: #0f7a57; --kfz-warning: #a96500; --kfz-danger: #b42318; --kfz-focus: #394448; --kfz-shadow: 0 24px 70px rgba(17, 24, 39, 0.12); --kfz-shadow-soft: 0 14px 36px rgba(17, 24, 39, 0.08); --kfz-shadow-card: 0 10px 28px rgba(17, 24, 39, 0.06); --kfz-radius-xl: 34px; --kfz-radius-lg: 28px; --kfz-radius-md: 22px; --kfz-radius-sm: 15px; --kfz-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--kfz-font); background: radial-gradient(circle at 18% 2%, rgba(255, 204, 0, 0.2), transparent 28%), radial-gradient(circle at 86% 6%, rgba(248, 166, 0, 0.12), transparent 25%), linear-gradient(135deg, #eef2f5 0%, #ffffff 42%, #f4f6f8 100%); color: var(--kfz-text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .kfz-energy-calculator { width: min(1180px, calc(100% - 32px)); margin: clamp(18px, 4vw, 44px) auto; padding: 0; } .kfz-calculator-shell { position: relative; overflow: hidden; border: 1px solid rgba(102, 113, 119, 0.16); border-radius: var(--kfz-radius-xl); background: rgba(255, 255, 255, 0.82); box-shadow: var(--kfz-shadow); backdrop-filter: blur(18px); isolation: isolate; } .kfz-calculator-shell::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: linear-gradient(90deg, var(--kfz-yellow), var(--kfz-orange)); z-index: 3; } .kfz-calculator-shell::after { content: ""; position: absolute; top: -140px; right: -160px; width: 360px; height: 360px; border-radius: 999px; background: radial-gradient(circle, rgba(255, 204, 0, 0.26), transparent 68%); pointer-events: none; z-index: -1; } .kfz-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr); gap: clamp(18px, 3vw, 30px); align-items: end; padding: clamp(26px, 4.2vw, 48px); color: var(--kfz-text); background: linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(248, 250, 252, 0.94) 54%, rgba(255, 246, 199, 0.72) 100%); border-bottom: 1px solid rgba(102, 113, 119, 0.12); } .kfz-hero::before { content: ""; position: absolute; left: clamp(24px, 4vw, 48px); top: 0; width: 92px; height: 5px; border-radius: 0 0 999px 999px; background: var(--kfz-yellow); } .kfz-hero::after { content: ""; position: absolute; right: clamp(24px, 5vw, 72px); top: 28px; width: 180px; height: 80px; border-radius: 999px; background: rgba(255, 204, 0, 0.15); filter: blur(26px); pointer-events: none; } .kfz-eyebrow { display: inline-flex; align-items: center; gap: 8px; width: fit-content; margin-bottom: 14px; padding: 8px 12px; border: 1px solid rgba(255, 204, 0, 0.62); border-radius: 999px; background: rgba(255, 204, 0, 0.16); color: var(--kfz-primary); font-size: 0.82rem; font-weight: 850;
letter-spacing: 0.01em;
box-shadow: 0 8px 20px rgba(255, 204, 0, 0.12);
}
.kfz-hero h1 {
max-width: 780px;
margin: 0 0 14px;
font-size: clamp(2rem, 4vw, 3.4rem);
line-height: 1.02;
letter-spacing: -0.055em;
text-wrap: balance;
}
.kfz-hero p {
max-width: 760px;
margin: 0;
color: var(--kfz-muted);
font-size: clamp(0.98rem, 1.3vw, 1.08rem);
line-height: 1.65;
}
.kfz-brand-note {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
margin-top: 20px;
}
.kfz-brand-pill {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 9px 13px;
border-radius: 999px;
background: var(--kfz-primary);
color: #ffffff;
font-size: 0.82rem;
font-weight: 850;
letter-spacing: 0.01em;
box-shadow: inset 0 -3px 0 var(--kfz-yellow), 0 10px 24px rgba(57, 68, 72, 0.16);
}
.kfz-brand-subline {
color: var(--kfz-muted);
font-size: 0.92rem;
font-weight: 750;
}
.kfz-logo-container,
.kfz-logo-img,
.kfz-logo-fallback {
display: none;
}
.kfz-trust-card {
position: relative;
display: grid;
gap: 12px;
padding: 16px;
border: 1px solid rgba(255, 255, 255, 0.74);
border-radius: 26px;
background: rgba(255, 255, 255, 0.66);
box-shadow: 0 18px 40px rgba(17, 24, 39, 0.08);
backdrop-filter: blur(18px);
}
.kfz-trust-card::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg, rgba(255, 204, 0, 0.55), rgba(255, 255, 255, 0.3), rgba(102, 113, 119, 0.18));
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
pointer-events: none;
}
.kfz-trust-item {
display: grid;
grid-template-columns: 34px 1fr;
gap: 11px;
align-items: start;
padding: 14px;
border: 1px solid rgba(102, 113, 119, 0.1);
border-radius: 18px;
background: rgba(255, 255, 255, 0.78);
color: var(--kfz-text);
font-size: 0.9rem;
line-height: 1.4;
box-shadow: 0 10px 24px rgba(17, 24, 39, 0.04);
}
.kfz-icon-bubble {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 999px;
background: linear-gradient(135deg, var(--kfz-yellow), #ffe783);
color: var(--kfz-primary);
font-size: 0.95rem;
font-weight: 950;
box-shadow: 0 8px 18px rgba(255, 204, 0, 0.24);
}
.kfz-content {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(320px, 392px);
gap: clamp(16px, 2.4vw, 24px);
padding: clamp(18px, 2.5vw, 30px);
background:
linear-gradient(180deg, rgba(248, 250, 252, 0.92), rgba(243, 245, 247, 0.98));
}
.kfz-panel,
.kfz-results {
border: 1px solid rgba(102, 113, 119, 0.12);
border-radius: var(--kfz-radius-lg);
background: rgba(255, 255, 255, 0.88);
box-shadow: var(--kfz-shadow-soft);
backdrop-filter: blur(14px);
}
.kfz-panel {
padding: clamp(18px, 2.4vw, 26px);
}
.kfz-results {
position: sticky;
top: 18px;
align-self: start;
overflow: hidden;
}
.kfz-section-title {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 18px;
}
.kfz-section-title h2,
.kfz-results h2 {
margin: 0;
font-size: 1.22rem;
letter-spacing: -0.035em;
}
.kfz-section-title p,
.kfz-results-subline {
margin: 5px 0 0;
color: var(--kfz-muted);
font-size: 0.94rem;
line-height: 1.5;
}
.kfz-profile-row {
display: flex;
flex-wrap: wrap;
gap: 9px;
margin: 18px 0 22px;
}
.kfz-chip,
.kfz-reset {
appearance: none;
border: 1px solid rgba(102, 113, 119, 0.16);
border-radius: 999px;
background: rgba(255, 255, 255, 0.88);
color: var(--kfz-text);
cursor: pointer;
font: inherit;
font-size: 0.9rem;
font-weight: 820;
line-height: 1;
box-shadow: 0 6px 16px rgba(17, 24, 39, 0.035);
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.kfz-chip {
padding: 10px 14px;
}
.kfz-reset {
padding: 10px 13px;
color: var(--kfz-muted);
white-space: nowrap;
}
.kfz-chip:hover,
.kfz-reset:hover {
transform: translateY(-2px);
border-color: rgba(255, 204, 0, 0.78);
box-shadow: 0 12px 24px rgba(17, 24, 39, 0.08);
}
.kfz-chip.is-active {
border-color: rgba(57, 68, 72, 0.18);
background:
linear-gradient(135deg, var(--kfz-primary), var(--kfz-primary-2));
color: #ffffff;
box-shadow: inset 0 -4px 0 var(--kfz-yellow), 0 12px 26px rgba(57, 68, 72, 0.16);
}
.kfz-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.kfz-card {
position: relative;
overflow: hidden;
border: 1px solid rgba(102, 113, 119, 0.13);
border-radius: var(--kfz-radius-md);
background: rgba(255, 255, 255, 0.86);
padding: 20px;
box-shadow: var(--kfz-shadow-card);
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.kfz-card:hover {
transform: translateY(-2px);
box-shadow: 0 16px 34px rgba(17, 24, 39, 0.08);
}
.kfz-card::after {
content: "";
position: absolute;
inset: auto -40px -60px auto;
width: 150px;
height: 150px;
border-radius: 999px;
background: rgba(255, 204, 0, 0.08);
pointer-events: none;
}
.kfz-card--wide {
grid-column: 1 / -1;
background:
radial-gradient(circle at 96% 18%, rgba(255, 204, 0, 0.12), transparent 28%),
rgba(255, 255, 255, 0.9);
}
.kfz-card--electric {
border-color: rgba(255, 204, 0, 0.45);
background:
radial-gradient(circle at 92% 8%, rgba(255, 204, 0, 0.18), transparent 30%),
linear-gradient(180deg, #ffffff 0%, #fffaf0 100%);
}
.kfz-card--fuel {
border-color: rgba(248, 166, 0, 0.3);
background:
radial-gradient(circle at 92% 8%, rgba(248, 166, 0, 0.14), transparent 30%),
linear-gradient(180deg, #ffffff 0%, #fff8ed 100%);
}
.kfz-card-head {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
}
.kfz-card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 16px;
color: #ffffff;
font-size: 1.15rem;
box-shadow: 0 12px 24px rgba(17, 24, 39, 0.12);
}
.kfz-card--electric .kfz-card-icon {
background: linear-gradient(135deg, var(--kfz-yellow), #ffe783);
color: var(--kfz-primary);
}
.kfz-card--fuel .kfz-card-icon {
background: linear-gradient(135deg, var(--kfz-orange), #ffc15c);
color: var(--kfz-primary);
}
.kfz-card-head h3 {
margin: 0;
font-size: 1.06rem;
letter-spacing: -0.025em;
}
.kfz-card-head p {
margin: 2px 0 0;
color: var(--kfz-muted);
font-size: 0.88rem;
}
.kfz-field-stack {
display: grid;
gap: 14px;
}
.kfz-field {
display: grid;
gap: 8px;
}
.kfz-label-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
label {
font-size: 0.92rem;
font-weight: 850;
color: var(--kfz-text);
}
.kfz-help {
color: var(--kfz-muted);
font-size: 0.84rem;
line-height: 1.45;
}
.kfz-input-wrap {
position: relative;
}
.kfz-input-wrap input[type="text"] {
width: 100%;
min-height: 54px;
padding: 13px 78px 13px 15px;
border: 1px solid rgba(102, 113, 119, 0.18);
border-radius: var(--kfz-radius-sm);
background: rgba(255, 255, 255, 0.92);
color: var(--kfz-text);
font: inherit;
font-size: 1.02rem;
font-weight: 850;
outline: none;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 8px 18px rgba(17, 24, 39, 0.035);
transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, transform 0.16s ease;
}
.kfz-input-wrap input[type="text"]:focus,
.kfz-range:focus-visible,
.kfz-chip:focus-visible,
.kfz-reset:focus-visible,
.kfz-cta:focus-visible,
.kfz-secondary-cta:focus-visible {
border-color: var(--kfz-focus);
box-shadow: 0 0 0 4px rgba(255, 204, 0, 0.32), 0 12px 24px rgba(17, 24, 39, 0.08);
outline: none;
}
.kfz-input-wrap input[type="text"]:focus {
transform: translateY(-1px);
background: #ffffff;
}
.kfz-input-wrap input[aria-invalid="true"] {
border-color: var(--kfz-danger);
background: #fff8f7;
}
.kfz-unit {
position: absolute;
top: 50%;
right: 14px;
transform: translateY(-50%);
color: var(--kfz-muted);
font-size: 0.82rem;
font-weight: 850;
pointer-events: none;
}
.kfz-error {
min-height: 18px;
color: var(--kfz-danger);
font-size: 0.82rem;
font-weight: 750;
}
.kfz-range-wrap {
display: grid;
gap: 8px;
margin-top: 4px;
}
.kfz-range {
width: 100%;
height: 24px;
accent-color: var(--kfz-yellow);
cursor: pointer;
}
.kfz-range-scale {
display: flex;
justify-content: space-between;
color: var(--kfz-muted);
font-size: 0.78rem;
font-weight: 750;
}
.kfz-results-header {
position: relative;
padding: 24px 24px 18px;
background:
radial-gradient(circle at 92% 0%, rgba(255, 204, 0, 0.2), transparent 34%),
#ffffff;
}
.kfz-badge {
display: inline-flex;
align-items: center;
gap: 8px;
width: fit-content;
margin: 0 0 14px;
padding: 8px 11px;
border: 1px solid rgba(255, 204, 0, 0.5);
border-radius: 999px;
background: rgba(255, 204, 0, 0.16);
color: var(--kfz-success);
font-size: 0.84rem;
font-weight: 900;
}
.kfz-badge.is-warning {
border-color: rgba(248, 166, 0, 0.44);
background: rgba(248, 166, 0, 0.14);
color: var(--kfz-warning);
}
.kfz-badge.is-neutral {
border-color: rgba(102, 113, 119, 0.22);
background: #eef2f7;
color: var(--kfz-muted);
}
.kfz-main-result {
position: relative;
overflow: hidden;
margin-top: 16px;
padding: 20px;
border: 1px solid rgba(255, 204, 0, 0.28);
border-radius: 24px;
background:
radial-gradient(circle at 84% 18%, rgba(255, 204, 0, 0.28), transparent 30%),
linear-gradient(135deg, var(--kfz-primary) 0%, var(--kfz-primary-3) 100%);
color: #ffffff;
box-shadow: 0 18px 34px rgba(57, 68, 72, 0.2);
}
.kfz-main-result::before {
content: "";
position: absolute;
left: 0;
top: 18px;
bottom: 18px;
width: 6px;
border-radius: 0 999px 999px 0;
background: linear-gradient(180deg, var(--kfz-yellow), var(--kfz-orange));
}
.kfz-main-result span {
display: block;
color: rgba(255, 255, 255, 0.72);
font-size: 0.9rem;
font-weight: 820;
}
.kfz-main-result strong {
display: block;
margin-top: 6px;
font-size: clamp(2.18rem, 5vw, 3.05rem);
line-height: 1;
letter-spacing: -0.06em;
}
.kfz-result-list {
display: grid;
gap: 0;
padding: 0 24px 22px;
background: #ffffff;
}
.kfz-result-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 14px 0;
border-bottom: 1px solid rgba(102, 113, 119, 0.13);
}
.kfz-result-row:last-child {
border-bottom: 0;
}
.kfz-result-row span {
color: var(--kfz-muted);
font-size: 0.91rem;
font-weight: 750;
}
.kfz-result-row strong {
text-align: right;
font-size: 1.06rem;
letter-spacing: -0.025em;
}
.kfz-bars {
display: grid;
gap: 14px;
padding: 20px 24px;
background: linear-gradient(180deg, #f8fafc, #ffffff);
border-top: 1px solid rgba(102, 113, 119, 0.12);
border-bottom: 1px solid rgba(102, 113, 119, 0.12);
}
.kfz-bar-line {
display: grid;
gap: 8px;
}
.kfz-bar-label {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
color: var(--kfz-muted);
font-size: 0.86rem;
font-weight: 820;
}
.kfz-bar-track {
width: 100%;
height: 12px;
overflow: hidden;
border-radius: 999px;
background: #e6ecf0;
box-shadow: inset 0 1px 2px rgba(17, 24, 39, 0.08);
}
.kfz-bar-fill {
width: 0%;
height: 100%;
border-radius: inherit;
transition: width 0.25s ease;
}
.kfz-bar-fill--electric {
background: linear-gradient(90deg, var(--kfz-yellow), #ffe783);
}
.kfz-bar-fill--fuel {
background: linear-gradient(90deg, var(--kfz-orange), #ffc15c);
}
.kfz-actions {
display: grid;
gap: 10px;
padding: 22px 24px 24px;
background: #ffffff;
}
.kfz-cta,
.kfz-secondary-cta {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 52px;
padding: 13px 18px;
border-radius: 17px;
text-decoration: none;
font-size: 0.96rem;
font-weight: 920;
transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.kfz-cta {
border: 1px solid rgba(255, 204, 0, 0.7);
background: linear-gradient(135deg, var(--kfz-yellow), #ffe783);
color: var(--kfz-primary);
box-shadow: 0 14px 26px rgba(255, 204, 0, 0.28);
}
.kfz-cta:hover,
.kfz-secondary-cta:hover {
transform: translateY(-2px);
}
.kfz-secondary-cta {
border: 1px solid rgba(57, 68, 72, 0.2);
background: #ffffff;
color: var(--kfz-text);
box-shadow: 0 8px 18px rgba(17, 24, 39, 0.04);
}
.kfz-secondary-cta:hover {
border-color: rgba(255, 204, 0, 0.72);
box-shadow: 0 12px 24px rgba(17, 24, 39, 0.08);
}
.kfz-info-box {
margin-top: 18px;
padding: 18px;
border: 1px solid rgba(102, 113, 119, 0.14);
border-radius: var(--kfz-radius-sm);
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(248, 250, 252, 0.9));
box-shadow: 0 8px 20px rgba(17, 24, 39, 0.035);
}
.kfz-info-box h3 {
margin: 0 0 8px;
font-size: 1rem;
letter-spacing: -0.02em;
}
.kfz-info-box p {
margin: 0;
color: var(--kfz-muted);
font-size: 0.9rem;
line-height: 1.55;
}
.kfz-disclaimer {
margin: 0;
padding: 16px 24px 22px;
color: var(--kfz-muted);
background: #ffffff;
font-size: 0.78rem;
line-height: 1.55;
}
.kfz-invalid-note {
display: none;
margin: 14px 0 0;
padding: 12px 14px;
border: 1px solid rgba(180, 35, 24, 0.22);
border-radius: var(--kfz-radius-sm);
background: #fff8f7;
color: var(--kfz-danger);
font-size: 0.88rem;
font-weight: 820;
line-height: 1.45;
}
.kfz-invalid-note.is-visible {
display: block;
}
.kfz-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
@media (max-width: 1100px) {
.kfz-content {
grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
}
}
@media (max-width: 980px) {
.kfz-hero,
.kfz-content {
grid-template-columns: 1fr;
}
.kfz-results {
position: static;
}
.kfz-trust-card {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 780px) {
.kfz-trust-card {
grid-template-columns: 1fr;
}
}
@media (max-width: 720px) {
body {
background: #f4f6f8;
}
.kfz-energy-calculator {
width: min(100% - 20px, 1180px);
margin: 14px auto;
}
.kfz-calculator-shell {
border-radius: 22px;
box-shadow: 0 14px 34px rgba(17, 24, 39, 0.1);
}
.kfz-hero,
.kfz-content,
.kfz-panel {
padding: 18px;
}
.kfz-hero {
gap: 16px;
}
.kfz-hero::before {
left: 18px;
width: 70px;
}
.kfz-eyebrow {
font-size: 0.78rem;
padding: 7px 10px;
}
.kfz-hero h1 {
font-size: clamp(1.8rem, 7vw, 2.35rem);
line-height: 1.08;
letter-spacing: -0.04em;
}
.kfz-hero p {
font-size: 0.96rem;
line-height: 1.55;
}
.kfz-brand-note {
align-items: flex-start;
flex-direction: column;
gap: 8px;
}
.kfz-section-title {
align-items: flex-start;
flex-direction: column;
}
.kfz-profile-row {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
}
.kfz-chip,
.kfz-reset {
width: 100%;
min-height: 46px;
white-space: normal;
line-height: 1.25;
}
.kfz-grid {
grid-template-columns: 1fr;
gap: 14px;
}
.kfz-card {
padding: 16px;
}
.kfz-results-header,
.kfz-result-list,
.kfz-bars,
.kfz-actions,
.kfz-disclaimer {
padding-left: 18px;
padding-right: 18px;
}
.kfz-main-result strong {
font-size: clamp(2rem, 11vw, 2.45rem);
}
.kfz-cta,
.kfz-secondary-cta {
width: 100%;
min-height: 52px;
text-align: center;
}
}
@media (max-width: 520px) {
.kfz-energy-calculator {
width: 100%;
margin: 0;
}
.kfz-calculator-shell {
border-left: 0;
border-right: 0;
border-radius: 0;
}
.kfz-hero,
.kfz-content,
.kfz-panel {
padding: 16px;
}
.kfz-panel,
.kfz-results,
.kfz-card,
.kfz-info-box {
border-radius: 16px;
}
.kfz-label-row {
align-items: flex-start;
flex-direction: column;
gap: 4px;
}
.kfz-input-wrap input[type="text"] {
min-height: 54px;
padding-right: 96px;
font-size: 1.03rem;
}
.kfz-unit {
right: 12px;
max-width: 86px;
text-align: right;
font-size: 0.78rem;
line-height: 1.1;
}
.kfz-result-row {
align-items: flex-start;
flex-direction: column;
gap: 4px;
}
.kfz-result-row strong {
text-align: left;
font-size: 1.18rem;
}
.kfz-bar-label {
align-items: flex-start;
flex-direction: column;
gap: 3px;
}
.kfz-badge {
align-items: flex-start;
white-space: normal;
line-height: 1.35;
}
}
@media (max-width: 380px) {
.kfz-hero,
.kfz-content,
.kfz-panel {
padding: 14px;
}
.kfz-hero h1 {
font-size: 1.65rem;
}
.kfz-trust-item {
grid-template-columns: 30px 1fr;
font-size: 0.88rem;
}
.kfz-icon-bubble {
width: 30px;
height: 30px;
}
.kfz-input-wrap input[type="text"] {
padding-right: 86px;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
}
</style>
<main class="kfz-energy-calculator" aria-labelledby="kfz-calculator-title">
<section class="kfz-calculator-shell">
<header class="kfz-hero">
<div>
<div class="kfz-eyebrow">⚡ KFZ Rothmund Energiekosten-Rechner</div>
<h1 id="kfz-calculator-title">Was kostet Sie Ihr Auto pro Jahr wirklich?</h1>
<p>
Vergleichen Sie die jährlichen Energiekosten eines Elektroautos mit einem Benzin- oder Diesel-Fahrzeug. Der Rechner aktualisiert sich sofort und zeigt Ihnen die mögliche Ersparnis transparent an.
</p>
<div class="kfz-brand-note" aria-label="1a autoservice Corporate Design Hinweis">
<span class="kfz-brand-pill">Ihre Autowerkstatt in Riedlingen/Neufra</span>
<span class="kfz-brand-subline">modern gerechnet · persönlich beraten</span>
</div>
</div>
<aside class="kfz-trust-card" aria-label="Vorteile des Rechners">
<div class="kfz-trust-item">
<span class="kfz-icon-bubble" aria-hidden="true">✓</span>
<span>Unverbindliche Orientierung auf Basis Ihrer eigenen Fahrleistung.</span>
</div>
<div class="kfz-trust-item">
<span class="kfz-icon-bubble" aria-hidden="true">↻</span>
<span>Live-Berechnung ohne Cookies, Tracking oder externe Skripte.</span>
</div>
<div class="kfz-trust-item">
<span class="kfz-icon-bubble" aria-hidden="true">€</span>
<span>Jahreskosten, Monatsersparnis und prozentuale Differenz auf einen Blick.</span>
</div>
</aside>
</header>
<div class="kfz-content">
<section class="kfz-panel" aria-label="Eingabewerte für den Energiekostenvergleich">
<div class="kfz-section-title">
<div>
<h2>Ihre Fahrdaten</h2>
<p>Nutzen Sie die Vorschläge oder tragen Sie Ihre eigenen Werte ein.</p>
</div>
<button class="kfz-reset" type="button" id="kfz-reset">Standardwerte wiederherstellen</button>
</div>
<div class="kfz-profile-row" aria-label="Typische Fahrprofile">
<button class="kfz-chip" type="button" data-profile="8000">Wenigfahrer · 8.000 km</button>
<button class="kfz-chip is-active" type="button" data-profile="15000">Durchschnitt · 15.000 km</button>
<button class="kfz-chip" type="button" data-profile="30000">Vielfahrer · 30.000 km</button>
</div>
<div class="kfz-grid">
<article class="kfz-card kfz-card--wide">
<div class="kfz-field">
<div class="kfz-label-row">
<label for="kfz-km">Jährliche Fahrleistung</label>
<span class="kfz-help">1.000 bis 100.000 km</span>
</div>
<div class="kfz-input-wrap">
<input id="kfz-km" type="text" inputmode="numeric" autocomplete="off" value="15.000" aria-describedby="kfz-km-help kfz-km-error">
<span class="kfz-unit">km/Jahr</span>
</div>
<div class="kfz-range-wrap">
<input class="kfz-range" id="kfz-km-range" type="range" min="1000" max="100000" step="500" value="15000" aria-label="Jährliche Fahrleistung per Slider einstellen">
<div class="kfz-range-scale" aria-hidden="true">
<span>1.000 km</span>
<span>100.000 km</span>
</div>
</div>
<span class="kfz-help" id="kfz-km-help">Tipp: Der deutsche Durchschnitt liegt häufig im Bereich von etwa 10.000 bis 15.000 km pro Jahr.</span>
<span class="kfz-error" id="kfz-km-error" aria-live="polite"></span>
</div>
</article>
<article class="kfz-card kfz-card--electric">
<div class="kfz-card-head">
<span class="kfz-card-icon" aria-hidden="true">⚡</span>
<div>
<h3>Elektroauto</h3>
<p>Verbrauch und Strompreis</p>
</div>
</div>
<div class="kfz-field-stack">
<div class="kfz-field">
<label for="kfz-ev-consumption">Verbrauch</label>
<div class="kfz-input-wrap">
<input id="kfz-ev-consumption" type="text" inputmode="decimal" autocomplete="off" value="18" aria-describedby="kfz-ev-consumption-help kfz-ev-consumption-error">
<span class="kfz-unit">kWh/100 km</span>
</div>
<span class="kfz-help" id="kfz-ev-consumption-help">Typische Praxiswerte liegen je nach Modell und Fahrprofil oft zwischen 15 und 25 kWh.</span>
<span class="kfz-error" id="kfz-ev-consumption-error" aria-live="polite"></span>
</div>
<div class="kfz-field">
<label for="kfz-electricity-price">Strompreis</label>
<div class="kfz-input-wrap">
<input id="kfz-electricity-price" type="text" inputmode="decimal" autocomplete="off" value="0,35" aria-describedby="kfz-electricity-price-help kfz-electricity-price-error">
<span class="kfz-unit">€/kWh</span>
</div>
<span class="kfz-help" id="kfz-electricity-price-help">Tragen Sie Ihren Haushalts-, Lade- oder Mischpreis ein.</span>
<span class="kfz-error" id="kfz-electricity-price-error" aria-live="polite"></span>
</div>
</div>
</article>
<article class="kfz-card kfz-card--fuel">
<div class="kfz-card-head">
<span class="kfz-card-icon" aria-hidden="true">⛽</span>
<div>
<h3>Benzin/Diesel</h3>
<p>Verbrauch und Kraftstoffpreis</p>
</div>
</div>
<div class="kfz-field-stack">
<div class="kfz-field">
<label for="kfz-fuel-consumption">Verbrauch</label>
<div class="kfz-input-wrap">
<input id="kfz-fuel-consumption" type="text" inputmode="decimal" autocomplete="off" value="7,0" aria-describedby="kfz-fuel-consumption-help kfz-fuel-consumption-error">
<span class="kfz-unit">l/100 km</span>
</div>
<span class="kfz-help" id="kfz-fuel-consumption-help">Nutzen Sie den realistischen Praxisverbrauch Ihres Fahrzeugs.</span>
<span class="kfz-error" id="kfz-fuel-consumption-error" aria-live="polite"></span>
</div>
<div class="kfz-field">
<label for="kfz-fuel-price">Kraftstoffpreis</label>
<div class="kfz-input-wrap">
<input id="kfz-fuel-price" type="text" inputmode="decimal" autocomplete="off" value="1,80" aria-describedby="kfz-fuel-price-help kfz-fuel-price-error">
<span class="kfz-unit">€/Liter</span>
</div>
<span class="kfz-help" id="kfz-fuel-price-help">Benzin- oder Dieselpreis pro Liter, passend zu Ihrem Vergleichsfahrzeug.</span>
<span class="kfz-error" id="kfz-fuel-price-error" aria-live="polite"></span>
</div>
</div>
</article>
</div>
<p class="kfz-invalid-note" id="kfz-invalid-note" role="status">
Bitte prüfen Sie die markierten Eingaben. Die Berechnung wird angezeigt, sobald alle Werte gültig sind.
</p>
<div class="kfz-info-box">
<h3>So wird gerechnet</h3>
<p>
Jahreskosten = Jahreskilometer ÷ 100 × Verbrauch × Energiepreis. Die Differenz zwischen Verbrenner und Elektroauto ergibt die mögliche Ersparnis.
</p>
</div>
</section>
<aside class="kfz-results" aria-label="Berechnetes Ergebnis" aria-live="polite">
<div class="kfz-results-header">
<div class="kfz-badge" id="kfz-result-badge">⚡ Elektro spart aktuell 945,00 € pro Jahr</div>
<h2>Ihr Ergebnis</h2>
<p class="kfz-results-subline" id="kfz-result-message">Bei den aktuellen Werten ist das Elektroauto günstiger.</p>
<div class="kfz-main-result">
<span id="kfz-main-label">Mögliche Ersparnis pro Jahr</span>
<strong id="kfz-saving-year">945,00 €</strong>
</div>
</div>
<div class="kfz-result-list">
<div class="kfz-result-row">
<span>Elektroauto pro Jahr</span>
<strong id="kfz-ev-year">945,00 €</strong>
</div>
<div class="kfz-result-row">
<span>Benzin/Diesel pro Jahr</span>
<strong id="kfz-fuel-year">1.890,00 €</strong>
</div>
<div class="kfz-result-row">
<span>Ersparnis pro Monat</span>
<strong id="kfz-saving-month">78,75 €</strong>
</div>
<div class="kfz-result-row">
<span>Prozentuale Ersparnis</span>
<strong id="kfz-saving-percent">50,00 %</strong>
</div>
</div>
<div class="kfz-bars" aria-label="Balkenvergleich der Jahreskosten">
<div class="kfz-bar-line">
<div class="kfz-bar-label">
<span>Elektro</span>
<span id="kfz-ev-bar-value">945,00 €</span>
</div>
<div class="kfz-bar-track" aria-hidden="true">
<div class="kfz-bar-fill kfz-bar-fill--electric" id="kfz-ev-bar"></div>
</div>
</div>
<div class="kfz-bar-line">
<div class="kfz-bar-label">
<span>Benzin/Diesel</span>
<span id="kfz-fuel-bar-value">1.890,00 €</span>
</div>
<div class="kfz-bar-track" aria-hidden="true">
<div class="kfz-bar-fill kfz-bar-fill--fuel" id="kfz-fuel-bar"></div>
</div>
</div>
</div>
<div class="kfz-actions">
<a class="kfz-cta" id="kfz-primary-cta" href="mailto:info@kfz-rothmund.de">E-Auto-Angebot online anfragen</a>
<a class="kfz-secondary-cta" id="kfz-secondary-cta" href="mailto:info@kfz-rothmund.de">Beratung vereinbaren</a>
</div>
<p class="kfz-disclaimer">
Die Berechnung dient als unverbindliche Orientierung. Berücksichtigt werden ausschließlich verbrauchsabhängige Energiekosten. Anschaffungskosten, Versicherung, Steuer, Wartung, Ladeverluste, Fahrprofil, Witterung und individuelle Tarife können das Ergebnis beeinflussen.
</p>
</aside>
</div>
</section>
</main>
<script>
(function () {
'use strict';
const CONFIG = {
defaults: {
km: 15000,
evConsumption: 18,
electricityPrice: 0.35,
fuelConsumption: 7.0,
fuelPrice: 1.80
},
limits: {
km: { min: 1000, max: 100000, label: 'Jährliche Fahrleistung' },
evConsumption: { min: 0.1, max: 80, label: 'Verbrauch Elektroauto' },
electricityPrice: { min: 0.01, max: 5, label: 'Strompreis' },
fuelConsumption: { min: 0.1, max: 50, label: 'Verbrauch Benzin/Diesel' },
fuelPrice: { min: 0.01, max: 10, label: 'Kraftstoffpreis' }
},
mail: {
recipient: 'info@kfz-rothmund.de',
primarySubject: 'Anfrage E-Auto-Angebot über Energiekosten-Rechner',
secondarySubject: 'Beratungswunsch über Energiekosten-Rechner'
}
};
const state = { ...CONFIG.defaults };
const els = {
km: document.getElementById('kfz-km'),
kmRange: document.getElementById('kfz-km-range'),
evConsumption: document.getElementById('kfz-ev-consumption'),
electricityPrice: document.getElementById('kfz-electricity-price'),
fuelConsumption: document.getElementById('kfz-fuel-consumption'),
fuelPrice: document.getElementById('kfz-fuel-price'),
reset: document.getElementById('kfz-reset'),
chips: Array.from(document.querySelectorAll('[data-profile]')),
invalidNote: document.getElementById('kfz-invalid-note'),
badge: document.getElementById('kfz-result-badge'),
resultMessage: document.getElementById('kfz-result-message'),
mainLabel: document.getElementById('kfz-main-label'),
savingYear: document.getElementById('kfz-saving-year'),
evYear: document.getElementById('kfz-ev-year'),
fuelYear: document.getElementById('kfz-fuel-year'),
savingMonth: document.getElementById('kfz-saving-month'),
savingPercent: document.getElementById('kfz-saving-percent'),
evBar: document.getElementById('kfz-ev-bar'),
fuelBar: document.getElementById('kfz-fuel-bar'),
evBarValue: document.getElementById('kfz-ev-bar-value'),
fuelBarValue: document.getElementById('kfz-fuel-bar-value'),
primaryCta: document.getElementById('kfz-primary-cta'),
secondaryCta: document.getElementById('kfz-secondary-cta')
};
const fields = [
{ key: 'km', input: els.km, errorId: 'kfz-km-error', decimals: 0 },
{ key: 'evConsumption', input: els.evConsumption, errorId: 'kfz-ev-consumption-error', decimals: 1 },
{ key: 'electricityPrice', input: els.electricityPrice, errorId: 'kfz-electricity-price-error', decimals: 2 },
{ key: 'fuelConsumption', input: els.fuelConsumption, errorId: 'kfz-fuel-consumption-error', decimals: 1 },
{ key: 'fuelPrice', input: els.fuelPrice, errorId: 'kfz-fuel-price-error', decimals: 2 }
];
const eurFormatter = new Intl.NumberFormat('de-DE', {
style: 'currency',
currency: 'EUR',
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
const numberFormatter = new Intl.NumberFormat('de-DE', {
minimumFractionDigits: 0,
maximumFractionDigits: 0
});
const percentFormatter = new Intl.NumberFormat('de-DE', {
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
function parseGermanNumber(value) {
let raw = String(value || '').trim();
if (!raw) return NaN;
raw = raw
.replace(/\s/g, '')
.replace(/€/g, '')
.replace(/km|kwh|liter|l/gi, '')
.replace(/[^0-9,.-]/g, '');
if (!raw || raw === '-' || raw === ',' || raw === '.') return NaN;
if ((raw.match(/-/g) || []).length > 0) return NaN;
const thousandsOnly = /^\d{1,3}([.,]\d{3})+$/.test(raw);
if (thousandsOnly) {
raw = raw.replace(/[.,]/g, '');
} else {
const lastComma = raw.lastIndexOf(',');
const lastDot = raw.lastIndexOf('.');
if (lastComma !== -1 && lastDot !== -1) {
const decimalSeparator = lastComma > lastDot ? ',' : '.';
const thousandsSeparator = decimalSeparator === ',' ? '.' : ',';
raw = raw.split(thousandsSeparator).join('');
raw = raw.replace(decimalSeparator, '.');
} else if (lastComma !== -1) {
raw = raw.replace(',', '.');
}
}
const parsed = Number(raw);
return Number.isFinite(parsed) ? parsed : NaN;
}
function formatDecimal(value, decimals) {
return new Intl.NumberFormat('de-DE', {
minimumFractionDigits: decimals,
maximumFractionDigits: decimals
}).format(value);
}
function formatKm(value) {
return numberFormatter.format(Math.round(value));
}
function roundMoney(value) {
return Math.round((value + Number.EPSILON) * 100) / 100;
}
function validateField(field) {
const value = parseGermanNumber(field.input.value);
const limits = CONFIG.limits[field.key];
const errorEl = document.getElementById(field.errorId);
let message = '';
if (!Number.isFinite(value)) {
message = 'Bitte einen gültigen Wert eintragen.';
} else if (value < limits.min) {
message = `${limits.label} muss mindestens ${formatDecimal(limits.min, field.decimals)} betragen.`;
} else if (value > limits.max) {
message = `${limits.label} darf maximal ${formatDecimal(limits.max, field.decimals)} betragen.`;
}
field.input.setAttribute('aria-invalid', message ? 'true' : 'false');
errorEl.textContent = message;
return { key: field.key, value, valid: !message };
}
function validateAll() {
const result = {};
let allValid = true;
fields.forEach((field) => {
const validation = validateField(field);
result[validation.key] = validation.value;
if (!validation.valid) allValid = false;
});
els.invalidNote.classList.toggle('is-visible', !allValid);
return { allValid, values: result };
}
function calculate(values) {
const evYear = roundMoney((values.km / 100) * values.evConsumption * values.electricityPrice);
const fuelYear = roundMoney((values.km / 100) * values.fuelConsumption * values.fuelPrice);
const savingYear = roundMoney(fuelYear - evYear);
const savingMonth = roundMoney(savingYear / 12);
const savingPercent = fuelYear > 0 ? roundMoney((savingYear / fuelYear) * 100) : 0;
return { evYear, fuelYear, savingYear, savingMonth, savingPercent };
}
function updateResultCopy(result) {
els.badge.classList.remove('is-warning', 'is-neutral');
if (result.savingYear > 0) {
els.badge.textContent = `⚡ Elektro spart aktuell ${eurFormatter.format(result.savingYear)} pro Jahr`;
els.resultMessage.textContent = 'Bei den aktuellen Werten ist das Elektroauto günstiger.';
els.mainLabel.textContent = 'Mögliche Ersparnis pro Jahr';
} else if (result.savingYear < 0) {
const extraCost = Math.abs(result.savingYear);
els.badge.classList.add('is-warning');
els.badge.textContent = `Hinweis: Elektro kostet aktuell ${eurFormatter.format(extraCost)} mehr pro Jahr`;
els.resultMessage.textContent = 'Bei den aktuellen Werten ist der Verbrenner günstiger. Prüfen Sie Strompreis, Verbrauch und Fahrprofil.';
els.mainLabel.textContent = 'Mehrkosten pro Jahr';
} else {
els.badge.classList.add('is-neutral');
els.badge.textContent = 'Beide Varianten liegen aktuell gleichauf';
els.resultMessage.textContent = 'Bei den aktuellen Werten entstehen rechnerisch gleiche Energiekosten.';
els.mainLabel.textContent = 'Differenz pro Jahr';
}
}
function updateMailLinks(result) {
const bodyLines = [
'Hallo KFZ Rothmund,',
'',
'ich interessiere mich für ein E-Auto-Angebot bzw. eine Beratung.',
'Meine Vergleichswerte aus dem Energiekosten-Rechner:',
'',
`Jährliche Fahrleistung: ${formatKm(state.km)} km`,
`E-Auto-Verbrauch: ${formatDecimal(state.evConsumption, 1)} kWh/100 km`,
`Strompreis: ${formatDecimal(state.electricityPrice, 2)} €/kWh`,
`Verbrenner-Verbrauch: ${formatDecimal(state.fuelConsumption, 1)} l/100 km`,
`Kraftstoffpreis: ${formatDecimal(state.fuelPrice, 2)} €/Liter`,
'',
`Elektroauto pro Jahr: ${eurFormatter.format(result.evYear)}`,
`Benzin/Diesel pro Jahr: ${eurFormatter.format(result.fuelYear)}`,
`Differenz pro Jahr: ${eurFormatter.format(result.savingYear)}`,
`Differenz pro Monat: ${eurFormatter.format(result.savingMonth)}`,
'',
'Bitte nehmen Sie Kontakt mit mir auf.',
'',
'Viele Grüße'
];
const body = encodeURIComponent(bodyLines.join(String.fromCharCode(10)));
const primarySubject = encodeURIComponent(CONFIG.mail.primarySubject);
const secondarySubject = encodeURIComponent(CONFIG.mail.secondarySubject);
const recipient = CONFIG.mail.recipient;
els.primaryCta.href = `mailto:${recipient}?subject=${primarySubject}&body=${body}`;
els.secondaryCta.href = `mailto:${recipient}?subject=${secondarySubject}&body=${body}`;
}
function updateBars(result) {
const max = Math.max(result.evYear, result.fuelYear, 1);
const evWidth = Math.max((result.evYear / max) * 100, 2);
const fuelWidth = Math.max((result.fuelYear / max) * 100, 2);
els.evBar.style.width = `${evWidth}%`;
els.fuelBar.style.width = `${fuelWidth}%`;
els.evBarValue.textContent = eurFormatter.format(result.evYear);
els.fuelBarValue.textContent = eurFormatter.format(result.fuelYear);
}
function render() {
const validation = validateAll();
if (!validation.allValid) return;
Object.assign(state, validation.values);
const result = calculate(state);
updateResultCopy(result);
els.evYear.textContent = eurFormatter.format(result.evYear);
els.fuelYear.textContent = eurFormatter.format(result.fuelYear);
els.savingYear.textContent = eurFormatter.format(Math.abs(result.savingYear));
els.savingMonth.textContent = eurFormatter.format(Math.abs(result.savingMonth));
els.savingPercent.textContent = `${percentFormatter.format(Math.abs(result.savingPercent))} %`;
updateBars(result);
updateMailLinks(result);
updateActiveProfile();
}
function updateActiveProfile() {
const currentKm = Math.round(parseGermanNumber(els.km.value));
els.chips.forEach((chip) => {
const chipKm = Number(chip.getAttribute('data-profile'));
chip.classList.toggle('is-active', currentKm === chipKm);
});
}
function syncKmRangeFromInput() {
const km = parseGermanNumber(els.km.value);
if (Number.isFinite(km)) {
const clamped = Math.min(Math.max(km, CONFIG.limits.km.min), CONFIG.limits.km.max);
els.kmRange.value = String(Math.round(clamped));
}
}
function setInputValue(key, value) {
const field = fields.find((item) => item.key === key);
if (!field) return;
if (key === 'km') {
field.input.value = formatKm(value);
els.kmRange.value = String(value);
} else {
field.input.value = formatDecimal(value, field.decimals);
}
}
function setProfile(km) {
setInputValue('km', km);
render();
}
function resetDefaults() {
Object.entries(CONFIG.defaults).forEach(([key, value]) => setInputValue(key, value));
render();
}
function setupEvents() {
fields.forEach((field) => {
field.input.addEventListener('input', () => {
if (field.key === 'km') syncKmRangeFromInput();
render();
});
field.input.addEventListener('blur', () => {
const parsed = parseGermanNumber(field.input.value);
const limits = CONFIG.limits[field.key];
if (Number.isFinite(parsed) && parsed >= limits.min && parsed <= limits.max) {
setInputValue(field.key, field.key === 'km' ? Math.round(parsed) : parsed);
}
render();
});
});
els.kmRange.addEventListener('input', () => {
setInputValue('km', Number(els.kmRange.value));
render();
});
els.chips.forEach((chip) => {
chip.addEventListener('click', () => {
setProfile(Number(chip.getAttribute('data-profile')));
});
});
els.reset.addEventListener('click', resetDefaults);
}
function runQualityChecks() {
const checks = [
{ km: 15000, evConsumption: 18, electricityPrice: 0.35, fuelConsumption: 7, fuelPrice: 1.80 },
{ km: 8000, evConsumption: 16, electricityPrice: 0.30, fuelConsumption: 6, fuelPrice: 1.75 },
{ km: 30000, evConsumption: 22, electricityPrice: 0.45, fuelConsumption: 8, fuelPrice: 1.95 }
];
checks.forEach((check) => calculate(check));
}
setupEvents();
resetDefaults();
runQualityChecks();
})();
</script>
