---
title: Wasserstoffgestehungskosten
url: 'https://nuehydrogen.de/wasserstoffgestehungskosten'
markdown: 'https://nuehydrogen.de/wasserstoffgestehungskosten.md'
lang: de
date: '2026-08-14'
---

# Wasserstoffgestehungskosten

Berechnung der Wasserstoffgestehungskosten 

##  H₂-Kostenrechner 

    Berechnen Sie die Gestehungskosten für die Wasserstofferzeugung durch Elektrolyse. Passen Sie die verschiedenen Parameter an, um unterschiedliche Szenarien zu modellieren.

### Berechnungsformel

\\\[ \\text{CRF}(r,N) = \\frac{r\\,(1+r)^N}{(1+r)^N-1} \\\]

\\\[ G\_{H\_2} = \\frac{E\_{stack}}{T}\\left\[\\text{CRF}(r,N)\\, C + B\\right\] + E\_{total}\\, c\_{el} \\\]

### Wasserstoffgestehungskosten

0.00 €/kg

#### CAPEX-Anteil

0.00 €/kg

0%

#### OPEX-Anteil

0.00 €/kg

0%

#### Stromkosten-Anteil

0.00 €/kg

0%

### Kostenverteilung

 `; resultSection.appendChild(pieChartContainer); // Jetzt sollte das Canvas-Element existieren const ctx = document.getElementById('costDistributionChart').getContext('2d'); createPieChart(ctx); } } else { // Canvas existiert bereits const ctx = chartCanvas.getContext('2d'); createPieChart(ctx); } } // Function to detect dark mode function isDarkModeActive() { const htmlElement = document.documentElement; return ( htmlElement.classList.contains('dark') || document.body.classList.contains('dark') || (htmlElement.getAttribute('x-data')?.includes('theme: "dark"')) || document.querySelector('html[class*="dark"]') !== null ); } function createPieChart(ctx) { // Destroy existing chart if it exists if (costChart) { costChart.destroy(); } // Determine optimal size based on screen width let chartSize = 500; let paddingSize = 40; // Smaller padding still giving room for labels // Adjustments for smaller screens if (window.innerWidth < 768) { chartSize = 380; paddingSize = 60; } if (window.innerWidth < 520) { chartSize = 300; // Smaller chart size on mobile paddingSize = 20; // Much smaller padding on mobile } // Container adjustments const chartContainer = ctx.canvas.parentNode; if (chartContainer) { chartContainer.style.width = '100%'; chartContainer.style.height = chartSize + 'px'; // Reduced additional space chartContainer.style.margin = '0 auto'; chartContainer.style.position = 'relative'; chartContainer.style.overflow = 'visible'; } // Canvas size adjustments //ctx.canvas.style.maxWidth = (chartSize + paddingSize) + 'px'; ctx.canvas.style.maxHeight = chartSize + 'px'; ctx.canvas.style.aspectRatio = '1 / 1'; ctx.canvas.style.margin = '0 auto'; ctx.canvas.style.position = 'relative'; ctx.canvas.style.overflow = 'visible'; //ctx.canvas.style.zIndex = '5'; // Higher pixel density for sharp display ctx.canvas.width = chartSize * 2; ctx.canvas.height = chartSize * 2; costChart = new Chart(ctx, { type: 'pie', data: { labels: ['CAPEX', 'OPEX', 'Stromkosten'], datasets: [{ data: [0, 0, 0], backgroundColor: [ nueColors.blue, // CAPEX nueColors.lightGreen, // OPEX nueColors.primary // Stromkosten ], borderColor: [ nueColors.darkBlue, nueColors.darkGreen, nueColors.dark ], borderWidth: 1 }] }, options: { responsive: true, maintainAspectRatio: true, layout: { padding: { top: paddingSize, right: paddingSize, bottom: paddingSize, left: paddingSize } }, plugins: { legend: { // Show built-in legend on mobile, hide it on desktop (where we use custom labels) display: window.innerWidth < 520, position: 'bottom', labels: { boxWidth: 15, padding: 10 } }, tooltip: { callbacks: { label: function(context) { const label = context.label || ''; const value = context.raw || 0; const total = context.dataset.data.reduce((a, b) => a + b, 0); const percentage = total > 0 ? ((value / total) * 100).toFixed(1).replace('.', ',') : 0; const formattedValue = value.toFixed(2).replace('.', ','); return `${label}: ${formattedValue} €/kg (${percentage}%)`; } } } }, elements: { arc: { borderWidth: 1 } } }, plugins: [ // Modified plugin that adapts to dark mode { id: 'doughnutLabels', afterDraw: function(chart) { // Skip the custom label drawing on mobile screens if (window.innerWidth < 520) { return; } var ctx = chart.ctx; var datasets = chart.data.datasets; if (datasets.length === 0) return; // Check for dark mode const darkMode = isDarkModeActive(); // Set colors based on theme const textColor = darkMode ? 'rgb(229, 231, 235)' : 'rgb(0, 0, 0)'; // Light gray in dark mode const lineColor = darkMode ? 'rgba(229, 231, 235, 0.5)' : 'rgba(0, 0, 0, 0.5)'; var items = datasets[0].data; var total = items.reduce((sum, value) => sum + value, 0); // Chart center var centerX = ((chart.chartArea.left + chart.chartArea.right) / 2); var centerY = ((chart.chartArea.top + chart.chartArea.bottom) / 2); // Chart radius var radius = Math.min(chart.chartArea.right - chart.chartArea.left, chart.chartArea.bottom - chart.chartArea.top) / 2; var meta = chart.getDatasetMeta(0); // Font size based on screen width let fontSize = 14; if (window.innerWidth < 768) fontSize = 12; // Radius factors let outerRadiusFactor = 1.15; if (window.innerWidth < 768) outerRadiusFactor = 1.1; // For each element in the dataset for (var j = 0; j < meta.data.length; j++) { var arc = meta.data[j]; var dataValue = datasets[0].data[j]; // Calculate percentage var percentage = ((dataValue / total) * 100).toFixed(1).replace('.', ','); // Label text for tablet/desktop let labelText; if (window.innerWidth < 768) { // Shorter labels on tablets const shortLabel = { 'CAPEX': 'CAP', 'OPEX': 'OP', 'Stromkosten': 'Strom' }[chart.data.labels[j]]; labelText = shortLabel + ": " + percentage + "%"; } else { // Full labels on desktop labelText = chart.data.labels[j] + ": " + percentage + "%"; } // Get position of the data point var startAngle = arc.startAngle; var endAngle = arc.endAngle; var midAngle = (startAngle + endAngle) / 2; // Calculate position for label var outerRadius = radius * outerRadiusFactor; var x = centerX + (Math.cos(midAngle) * outerRadius); var y = centerY + (Math.sin(midAngle) * outerRadius); // Text alignment based on position ctx.textAlign = (x < centerX) ? 'right' : 'left'; ctx.textBaseline = 'middle'; ctx.font = 'bold ' + fontSize + 'px Arial'; // Small adjustment for better spacing if (x < centerX) { x -= 5; // More space to the left } else { x += 5; // More space to the right } // Draw line from segment to label var innerRadius = radius * 1.05; var innerX = centerX + (Math.cos(midAngle) * innerRadius); var innerY = centerY + (Math.sin(midAngle) * innerRadius); ctx.beginPath(); ctx.moveTo(innerX, innerY); ctx.lineTo(x, y); ctx.strokeStyle = lineColor; // Use theme-aware color ctx.lineWidth = 1; ctx.stroke(); // Draw text ctx.fillStyle = textColor; // Use theme-aware color ctx.fillText(labelText, x, y); } } } ] }); } // Verbessern des resize Listeners für die Diagramm-Aktualisierung window.addEventListener('resize', debounce(function() { if (costChart) { // Bei Änderung der Fenstergröße das Diagramm vollständig neu erstellen const ctx = document.getElementById('costDistributionChart').getContext('2d'); if (ctx) { createPieChart(ctx); calculateResults(); // Um die Daten neu zu laden } } }, 250)); // Nur alle 250ms aktualisieren, um Performance-Probleme zu vermeiden // Watch for theme changes function setupThemeChangeListener() { // Observer for HTML class changes (dark mode toggle) const htmlObserver = new MutationObserver(function() { if (costChart) { // Redraw the chart when theme changes const ctx = document.getElementById('costDistributionChart').getContext('2d'); if (ctx) { createPieChart(ctx); calculateResults(); // Update data } } }); // Observe both html and body elements for class changes htmlObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] }); htmlObserver.observe(document.body, { attributes: true, attributeFilter: ['class'] }); // Listen for Alpine.js theme changes document.addEventListener('typhoon-theme.window', function() { setTimeout(function() { if (costChart) { const ctx = document.getElementById('costDistributionChart').getContext('2d'); if (ctx) { createPieChart(ctx); calculateResults(); } } }, 50); }); } // Call this function to set up the listeners setupThemeChangeListener(); // Debounce-Funktion, um zu viele Aktualisierungen zu vermeiden function debounce(func, wait) { let timeout; return function() { const context = this, args = arguments; clearTimeout(timeout); timeout = setTimeout(function() { func.apply(context, args); }, wait); }; } // Berechnung durchführen und Ergebnisse anzeigen function calculateResults() { // Zuerst validieren if (!validateInputs()) { // Falls Validierung fehlschlägt, zeigen wir "Ungültig" als Ergebnis an const resultElem = calculator.querySelector('#result'); if (resultElem) resultElem.textContent = 'Ungültig'; // Komponenten ausblenden oder als ungültig markieren const components = ['#capex-component', '#opex-component', '#electricity-component', '#capex-percentage', '#opex-percentage', '#electricity-percentage']; components.forEach(selector => { const elem = calculator.querySelector(selector); if (elem) elem.textContent = '-'; }); return; } const results = calculateHydrogenCost(); // Funktion zum Formatieren von Zahlen mit Komma als Dezimaltrennzeichen function formatNumber(num) { return num.toFixed(2).replace('.', ','); } // Ergebnisse anzeigen const resultElem = calculator.querySelector('#result'); if (resultElem) resultElem.textContent = formatNumber(results.G_H2) + ' €/kg'; // Komponenten anzeigen const capexElem = calculator.querySelector('#capex-component'); const opexElem = calculator.querySelector('#opex-component'); const electricityElem = calculator.querySelector('#electricity-component'); if (capexElem) capexElem.textContent = formatNumber(results.capexComponent) + ' €/kg'; if (opexElem) opexElem.textContent = formatNumber(results.opexComponent) + ' €/kg'; if (electricityElem) electricityElem.textContent = formatNumber(results.electricityComponent) + ' €/kg'; // Prozentuale Anteile berechnen const total = results.G_H2; const capexPercentage = (results.capexComponent / total * 100).toFixed(1).replace('.', ','); const opexPercentage = (results.opexComponent / total * 100).toFixed(1).replace('.', ','); const electricityPercentage = (results.electricityComponent / total * 100).toFixed(1).replace('.', ','); const capexPercentElem = calculator.querySelector('#capex-percentage'); const opexPercentElem = calculator.querySelector('#opex-percentage'); const electricityPercentElem = calculator.querySelector('#electricity-percentage'); if (capexPercentElem) capexPercentElem.textContent = capexPercentage + '%'; if (opexPercentElem) opexPercentElem.textContent = opexPercentage + '%'; if (electricityPercentElem) electricityPercentElem.textContent = electricityPercentage + '%'; // Tortendiagramm aktualisieren if (costChart) { costChart.data.datasets[0].data = [ results.capexComponent, results.opexComponent, results.electricityComponent ]; costChart.update(); } } // Tortendiagramm initialisieren initPieChart(); // Initial die Berechnung durchführen calculateResults(); // MathJax initialisieren if (typeof MathJax !== 'undefined') { MathJax.Hub.Queue(["Typeset", MathJax.Hub]); } } }); 

- [Blog](https://nuehydrogen.de/blog)
- [Über uns](https://nuehydrogen.de/ueber-uns)
- [Unsere Dienstleistungen](https://nuehydrogen.de/dienstleistungen)
- [Transformations-Check](https://nuehydrogen.de/transformations-check)
- [Wasserstoffgestehungskosten](https://nuehydrogen.de/wasserstoffgestehungskosten)

---

## Navigation

- Previous: [Transformations-Check](https://nuehydrogen.de/transformations-check.md)
- Next: [Datenschutzerklärung](https://nuehydrogen.de/datenschutz.md)