Was wäre wenn…
Ab morgen alle Autos elektrisch sind?

/* CSS spezifisch für den Simulator, um Konflikte mit Avada zu vermeiden */
.ev-sim-container {
font-family: inherit; /* Übernimmt die Schriftart deines Avada-Themes */
max-width: 800px;
margin: 0 auto;
padding: 20px;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
color: #333;
}
.ev-sim-container h3 {
text-align: center;
margin-top: 0;
margin-bottom: 20px;
color: #2c3e50;
}
.ev-sim-chart-wrapper {
position: relative;
height: 350px;
width: 100%;
margin-bottom: 30px;
}
.ev-sim-controls {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
margin-bottom: 20px;
padding: 20px;
background: #f8f9fa;
border-radius: 8px;
}
@media (min-width: 600px) {
.ev-sim-controls {
grid-template-columns: 1fr 1fr;
}
}
.ev-sim-control-group {
display: flex;
flex-direction: column;
}
.ev-sim-control-group label {
font-weight: 600;
margin-bottom: 8px;
font-size: 14px;
display: flex;
justify-content: space-between;
}
.ev-sim-control-group input[type=“range“] {
width: 100%;
accent-color: #3498db; /* Avada primäre Farbe anpassen, falls gewünscht */
}
.ev-sim-metrics {
display: flex;
justify-content: space-around;
padding: 15px;
background: #eef2f5;
border-radius: 8px;
text-align: center;
}
.ev-sim-metric-box {
display: flex;
flex-direction: column;
}
.ev-sim-metric-value {
font-size: 24px;
font-weight: bold;
color: #2c3e50;
}
.ev-sim-metric-label {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
color: #7f8c8d;
}
.ev-sim-alert {
color: #e74c3c;
font-weight: bold;
margin-top: 10px;
text-align: center;
min-height: 24px;
}

Stromnetz-Simulator: E-Auto-Ladelast

document.addEventListener(„DOMContentLoaded“, function() {
const ctx = document.getElementById(‚evSimChart‘).getContext(‚2d‘);

// Basisdaten: 24 Stunden
const labels = Array.from({length: 24}, (_, i) => `${i}:00`);

// Typische Grundlast (vereinfacht, z.B. in Gigawatt oder Prozent)
const baseLoad = [
40, 38, 36, 35, 37, 42, 55, 65, 70, 72, 70, 68,
65, 63, 62, 60, 65, 75, 80, 78, 70, 60, 50, 45
];
const maxGridCapacity = 100; // Maximale Kapazitätslinie

// Initialisiere Chart.js
let evChart = new Chart(ctx, {
type: ‚line‘,
data: {
labels: labels,
datasets: [
{
label: ‚Gesamtlast‘,
data: [],
borderColor: ‚#e74c3c‘,
backgroundColor: ‚rgba(231, 76, 60, 0.2)‘,
borderWidth: 3,
fill: true,
tension: 0.4,
order: 1
},
{
label: ‚Grundlast (ohne E-Autos)‘,
data: baseLoad,
borderColor: ‚#95a5a6‘,
borderWidth: 2,
borderDash: [5, 5],
fill: false,
tension: 0.4,
order: 2
},
{
label: ‚Netzkapazität‘,
data: Array(24).fill(maxGridCapacity),
borderColor: ‚#c0392b‘,
borderWidth: 2,
fill: false,
pointRadius: 0,
order: 0
}
] },
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { position: ‚bottom‘ },
tooltip: { mode: ‚index‘, intersect: false }
},
scales: {
y: {
beginAtZero: true,
max: 120, // Puffer über der Kapazität
title: { display: true, text: ‚Auslastung (%)‘ }
},
x: {
title: { display: true, text: ‚Uhrzeit‘ }
}
}
}
});

// Referenzen zu UI-Elementen
const behaviorSlider = document.getElementById(‚chargingBehavior‘);
const renewablesSlider = document.getElementById(‚renewablesShare‘);
const behaviorLabel = document.getElementById(‚behaviorLabel‘);
const renewablesLabel = document.getElementById(‚renewablesLabel‘);
const peakLoadValue = document.getElementById(‚peakLoadValue‘);
const co2Value = document.getElementById(‚co2Value‘);
const gridAlert = document.getElementById(‚gridAlert‘);

// Funktion zur Berechnung der E-Auto-Lastverteilung
function calculateEVLoad(behavior) {
const totalEvEnergy = 120; // Gesamte benötigte Energie der E-Autos
let evLoad = Array(24).fill(0);

// behavior = 0 (Abendspitze) bis 100 (Smart Charging Nachts)
const smartFactor = behavior / 100;

for (let i = 0; i = 23 || i a + b, 0);
const scale = totalEvEnergy / currentTotal;
return evLoad.map(val => val * scale);
}

// Haupt-Update-Funktion
function updateSimulator() {
const behavior = parseInt(behaviorSlider.value);
const renewables = parseInt(renewablesSlider.value);

// Labels aktualisieren
if (behavior < 33) behaviorLabel.innerText = "Abendspitze (Unreguliert)";
else if (behavior base + evLoad[index]);

// Max Auslastung ermitteln
const maxLoad = Math.max(…totalLoad);
peakLoadValue.innerText = Math.round(maxLoad) + „%“;

// Warnungen anzeigen
if (maxLoad > maxGridCapacity) {
gridAlert.innerText = „⚠️ KRITISCH: Stromnetz überlastet! Blackout-Gefahr.“;
peakLoadValue.style.color = „#e74c3c“;
evChart.data.datasets[0].backgroundColor = ‚rgba(231, 76, 60, 0.4)‘;
evChart.data.datasets[0].borderColor = ‚#c0392b‘;
} else if (maxLoad > 90) {
gridAlert.innerText = „⚠️ WARNUNG: Netz nahe der Belastungsgrenze.“;
peakLoadValue.style.color = „#f39c12“;
evChart.data.datasets[0].backgroundColor = ‚rgba(243, 156, 18, 0.4)‘;
evChart.data.datasets[0].borderColor = ‚#f39c12‘;
} else {
gridAlert.innerText = „✅ Stromnetz stabil.“;
peakLoadValue.style.color = „#27ae60“;
evChart.data.datasets[0].backgroundColor = ‚rgba(46, 204, 113, 0.2)‘;
evChart.data.datasets[0].borderColor = ‚#27ae60‘;
}

// CO2 Berechnung (stark vereinfacht)
// 100% Erneuerbare = 0g, 0% = ca. 800g (Kohle/Gas mix)
const baseCo2 = 800 – (renewables * 8);
co2Value.innerText = Math.round(baseCo2) + „g“;

// Chart aktualisieren
evChart.data.datasets[0].data = totalLoad;
evChart.update();
}

// Event Listener für Slider
behaviorSlider.addEventListener(‚input‘, updateSimulator);
renewablesSlider.addEventListener(‚input‘, updateSimulator);

// Initiales Update
updateSimulator();
});