@extends('layouts.app')
@section('title', 'Benzinkosten Rechner – Spritkosten berechnen | kotsch.tech')
@section('meta_description', 'Benzinkosten Rechner: Spritkosten für jede Strecke berechnen. Verbrauch, Kraftstoffpreis, Distanz – Benzin, Diesel oder E10 sofort kalkulieren.')
@section('meta_extra')
<meta name="keywords" content="Benzinkosten Rechner, Spritkosten berechnen, Kraftstoffkosten, Benzin Rechner, Diesel Rechner, Fahrtkosten berechnen, Verbrauch Kosten">
@endsection
@section('content')
@include('tools._tool_base')
<style>
.fuel-option-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.fuel-option { padding: 9px 18px; border-radius: 999px; border: 2px solid var(--line); background: var(--card); font: inherit; font-weight: 700; font-size: 0.88rem; cursor: pointer; color: var(--muted); transition: all 0.15s; display: flex; align-items: center; gap: 6px; }
.fuel-option.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.roundtrip-btn { display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; border: 2px solid var(--line); background: var(--card); font: inherit; font-weight: 700; cursor: pointer; color: var(--muted); margin-bottom: 16px; transition: all 0.15s; }
.roundtrip-btn.active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.co2-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: rgba(100,116,139,0.1); color: var(--muted); font-size: 0.75rem; font-weight: 900; margin-top: 8px; }
</style>

<div class="tool-page">
<div class="tool-container">
    <div class="tool-header">
        <span class="t-tag"><i class="fas fa-gas-pump"></i> Finanzen</span>
        <h1 class="tool-h1">Spritkosten<br><span>berechnen.</span></h1>
        <p class="tool-sub">Wie viel kostet die Fahrt? Strecke, Verbrauch und Preis eingeben – Ergebnis live.</p>
    </div>

    <div class="t-panel">
        <div style="display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px">
            <div class="fuel-option-row" style="margin-bottom:0">
                <button class="fuel-option active" onclick="setFuel('benzin',this)" data-co2="2.37">Benzin (E10)</button>
                <button class="fuel-option" onclick="setFuel('diesel',this)" data-co2="2.64">Diesel</button>
                <button class="fuel-option" onclick="setFuel('lpg',this)" data-co2="1.65">LPG</button>
                <button class="fuel-option" onclick="setFuel('ev',this)" data-co2="0">Elektro (kWh)</button>
            </div>
            <button class="roundtrip-btn" id="roundtrip-btn" onclick="toggleRoundtrip()">
                <i class="fas fa-rotate"></i> Hin- & Rückfahrt
            </button>
        </div>

        <div class="t-grid-2">
            <div class="t-field">
                <label class="t-label" id="dist-lbl">Strecke (km)</label>
                <input type="number" class="t-input" id="dist" placeholder="z.B. 350" value="350" min="0" oninput="calc()">
            </div>
            <div class="t-field">
                <label class="t-label" id="cons-lbl">Verbrauch (L/100km)</label>
                <input type="number" class="t-input" id="cons" placeholder="z.B. 7.5" value="7.5" step="0.1" min="0" oninput="calc()">
            </div>
            <div class="t-field">
                <label class="t-label" id="price-lbl">Kraftstoffpreis (€/Liter)</label>
                <input type="number" class="t-input" id="price" placeholder="z.B. 1.75" value="1.75" step="0.001" min="0" oninput="calc()">
            </div>
            <div class="t-field">
                <label class="t-label">Anzahl Personen (für Kostenaufteilung)</label>
                <input type="number" class="t-input" id="persons" placeholder="1" value="1" min="1" max="20" oninput="calc()">
            </div>
        </div>
    </div>

    <div class="t-panel">
        <div class="t-panel-title"><i class="fas fa-chart-bar"></i> Ergebnis</div>
        <div class="t-grid-4">
            <div class="t-stat-card accent">
                <div class="t-stat-num" id="r-cost">–</div>
                <div class="t-stat-lbl">Gesamtkosten</div>
            </div>
            <div class="t-stat-card">
                <div class="t-stat-num" id="r-perperson">–</div>
                <div class="t-stat-lbl">Pro Person</div>
            </div>
            <div class="t-stat-card">
                <div class="t-stat-num" id="r-liter">–</div>
                <div class="t-stat-lbl" id="liter-lbl">Liter gesamt</div>
            </div>
            <div class="t-stat-card">
                <div class="t-stat-num" id="r-perkm">–</div>
                <div class="t-stat-lbl">Kosten / km</div>
            </div>
        </div>
        <div style="text-align:center;margin-top:10px">
            <span class="co2-badge" id="co2-badge"><i class="fas fa-leaf"></i> CO₂: –</span>
        </div>
    </div>
</div>
@include('tools._ads_banner')
</div>

<script>
const eur = n => n.toLocaleString('de-DE', {style:'currency', currency:'EUR'});
let roundtrip = false, co2Factor = 2.37, isEv = false;
function setFuel(f, btn) {
    document.querySelectorAll('.fuel-option').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    co2Factor = parseFloat(btn.dataset.co2) || 0;
    isEv      = f === 'ev';
    document.getElementById('cons-lbl').textContent  = isEv ? 'Verbrauch (kWh/100km)'  : 'Verbrauch (L/100km)';
    document.getElementById('price-lbl').textContent = isEv ? 'Strompreis (€/kWh)'     : 'Kraftstoffpreis (€/Liter)';
    document.getElementById('liter-lbl').textContent = isEv ? 'kWh gesamt'              : 'Liter gesamt';
    document.getElementById('cons').placeholder      = isEv ? 'z.B. 18'                : 'z.B. 7.5';
    document.getElementById('price').placeholder     = isEv ? 'z.B. 0.30'              : 'z.B. 1.75';
    calc();
}
function toggleRoundtrip() {
    roundtrip = !roundtrip;
    const btn = document.getElementById('roundtrip-btn');
    btn.classList.toggle('active', roundtrip);
    calc();
}
function calc() {
    let d = parseFloat(document.getElementById('dist').value)    || 0;
    const c = parseFloat(document.getElementById('cons').value)   || 0;
    const p = parseFloat(document.getElementById('price').value)  || 0;
    const n = parseInt(document.getElementById('persons').value)  || 1;
    if (roundtrip) d *= 2;
    if (d <= 0 || c <= 0 || p <= 0) {
        ['r-cost','r-perperson','r-liter','r-perkm'].forEach(id => document.getElementById(id).textContent = '–');
        document.getElementById('co2-badge').innerHTML = '<i class="fas fa-leaf"></i> CO₂: –';
        return;
    }
    const volume = d * c / 100;
    const cost   = volume * p;
    const perKm  = cost / d;
    const co2    = co2Factor > 0 ? (volume * co2Factor / 1000).toFixed(2) + ' kg CO₂' : 'emissionsfrei';
    document.getElementById('r-cost').textContent      = eur(cost);
    document.getElementById('r-perperson').textContent = eur(cost / n);
    document.getElementById('r-liter').textContent     = volume.toLocaleString('de-DE', {maximumFractionDigits:2}) + (isEv ? ' kWh' : ' L');
    document.getElementById('r-perkm').textContent     = eur(perKm);
    document.getElementById('co2-badge').innerHTML     = `<i class="fas fa-leaf"></i> CO₂: ${co2}`;
}
calc();
</script>

@include('tools._seo_content', ['toolSlug' => 'benzinrechner', 'toolName' => 'Benzinkosten Rechner'])

@endsection