@extends('layouts.app')
@section('title', 'Prozent Rechner – Prozentuale Änderung & Aufschlag | kotsch.tech')
@section('meta_description', 'Prozent online berechnen: Prozentuale Änderung, Aufschlag, Rabatt, Anteil, Mehrwertsteuer und Zinseszins. Alles lokal im Browser.')
@section('meta_extra')
<meta name="keywords" content="Prozent Rechner, prozentuale Änderung, Aufschlag berechnen, Rabatt Rechner, MwSt Rechner, Prozentwert">
@endsection
@section('content')
@include('tools._tool_base')
<style>
.pct-result { font-size:2rem; font-weight:900; color:var(--accent); font-family:'JetBrains Mono',monospace; }
.pct-result.negative { color:#ef4444; }
.pct-arrow { font-size:1.5rem; margin:0 8px; }
.mode-tab { padding:8px 14px; border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--card); font-weight:700; font-size:0.82rem; cursor:pointer; color:var(--muted); transition:all 0.15s; }
.mode-tab.active { border-color:var(--accent); background:var(--accent); color:#fff; }
</style>

<div class="tool-page">
<div class="tool-container">
    <div class="tool-header">
        <span class="t-tag"><i class="fas fa-percent"></i> Mathematik</span>
        <h1 class="tool-h1">Prozent<span>rechner.</span></h1>
        <p class="tool-sub">Änderung, Aufschlag, Rabatt, MwSt, Anteil – alle Prozentrechnungen auf einen Blick.</p>
    </div>

    <div class="t-panel">
        <div style="display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px">
            <button class="mode-tab active" onclick="setMode('change',this)">Änderung</button>
            <button class="mode-tab" onclick="setMode('markup',this)">Aufschlag</button>
            <button class="mode-tab" onclick="setMode('discount',this)">Rabatt</button>
            <button class="mode-tab" onclick="setMode('share',this)">Anteil</button>
            <button class="mode-tab" onclick="setMode('vat',this)">MwSt</button>
            <button class="mode-tab" onclick="setMode('interest',this)">Zinseszins</button>
        </div>

        <!-- Änderung -->
        <div id="pane-change">
            <div class="t-grid-2" style="gap:12px">
                <div class="t-field"><label class="t-label">Alter Wert</label><input type="number" class="t-input" id="ch-old" value="80" oninput="calc()"></div>
                <div class="t-field"><label class="t-label">Neuer Wert</label><input type="number" class="t-input" id="ch-new" value="100" oninput="calc()"></div>
            </div>
        </div>
        <!-- Aufschlag -->
        <div id="pane-markup" style="display:none">
            <div class="t-grid-2" style="gap:12px">
                <div class="t-field"><label class="t-label">Basiswert</label><input type="number" class="t-input" id="mk-base" value="100" oninput="calc()"></div>
                <div class="t-field"><label class="t-label">Aufschlag (%)</label><input type="number" class="t-input" id="mk-pct" value="20" oninput="calc()"></div>
            </div>
        </div>
        <!-- Rabatt -->
        <div id="pane-discount" style="display:none">
            <div class="t-grid-2" style="gap:12px">
                <div class="t-field"><label class="t-label">Originalpreis (€)</label><input type="number" class="t-input" id="dc-price" value="199.99" oninput="calc()"></div>
                <div class="t-field"><label class="t-label">Rabatt (%)</label><input type="number" class="t-input" id="dc-pct" value="25" oninput="calc()"></div>
            </div>
        </div>
        <!-- Anteil -->
        <div id="pane-share" style="display:none">
            <div class="t-grid-2" style="gap:12px">
                <div class="t-field"><label class="t-label">Wert</label><input type="number" class="t-input" id="sh-val" value="35" oninput="calc()"></div>
                <div class="t-field"><label class="t-label">Gesamt</label><input type="number" class="t-input" id="sh-tot" value="200" oninput="calc()"></div>
            </div>
        </div>
        <!-- MwSt -->
        <div id="pane-vat" style="display:none">
            <div class="t-grid-2" style="gap:12px">
                <div class="t-field"><label class="t-label">Nettobetrag (€)</label><input type="number" class="t-input" id="vt-net" value="100" oninput="calc()"></div>
                <div class="t-field">
                    <label class="t-label">MwSt-Satz</label>
                    <select class="t-select" id="vt-rate" onchange="calc()">
                        <option value="19">19% (Regelsteuersatz DE)</option>
                        <option value="7">7% (ermäßigt DE)</option>
                        <option value="20">20% (AT)</option>
                        <option value="10">10% (AT ermäßigt)</option>
                        <option value="8.1">8.1% (CH)</option>
                        <option value="25">25%</option>
                    </select>
                </div>
            </div>
        </div>
        <!-- Zinseszins -->
        <div id="pane-interest" style="display:none">
            <div class="t-grid-2" style="gap:12px">
                <div class="t-field"><label class="t-label">Startkapital (€)</label><input type="number" class="t-input" id="it-cap" value="1000" oninput="calc()"></div>
                <div class="t-field"><label class="t-label">Jahreszins (%)</label><input type="number" class="t-input" id="it-rate" value="5" step="0.1" oninput="calc()"></div>
                <div class="t-field"><label class="t-label">Jahre</label><input type="number" class="t-input" id="it-years" value="10" min="1" max="100" oninput="calc()"></div>
                <div class="t-field"><label class="t-label">Jährl. Einzahlung (€)</label><input type="number" class="t-input" id="it-contrib" value="0" oninput="calc()"></div>
            </div>
        </div>

        <div style="margin-top:20px;padding:20px;background:var(--bg);border:2px solid var(--line);border-radius:var(--radius-sm);text-align:center" id="pct-result-box">
            <div id="pct-main-result" class="pct-result">–</div>
            <div id="pct-sub-result" style="color:var(--muted);font-size:0.85rem;margin-top:8px"></div>
        </div>

        <div class="t-grid-3" style="gap:10px;margin-top:12px" id="pct-details"></div>
    </div>

    <div class="t-panel" style="background:var(--accent-soft);border-color:var(--accent)">
        <div style="font-size:0.82rem;color:#065f46"><i class="fas fa-lightbulb"></i> <strong>Formel:</strong> <span id="pct-formula">( Neu − Alt ) ÷ Alt × 100</span></div>
    </div>
</div>
@include('tools._ads_banner')
</div>

<script>
let currentMode = 'change';

function setMode(mode, btn) {
    currentMode = mode;
    document.querySelectorAll('.mode-tab').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    document.querySelectorAll('[id^="pane-"]').forEach(p => p.style.display='none');
    document.getElementById('pane-'+mode).style.display = '';
    calc();
}

function fmt(n, dec=2) { return n.toLocaleString('de-DE', {maximumFractionDigits:dec}); }
function fmtE(n) { return n.toLocaleString('de-DE', {style:'currency', currency:'EUR'}); }

function setResult(main, sub, isNeg, details, formula) {
    const el = document.getElementById('pct-main-result');
    el.textContent = main;
    el.className = 'pct-result' + (isNeg ? ' negative' : '');
    document.getElementById('pct-sub-result').textContent = sub;
    document.getElementById('pct-formula').textContent = formula;

    document.getElementById('pct-details').innerHTML = details.map(([l,v]) =>
        `<div class="t-stat-card"><div class="t-stat-val">${v}</div><div class="t-stat-label">${l}</div></div>`
    ).join('');
}

function calc() {
    if (currentMode === 'change') {
        const o = parseFloat(document.getElementById('ch-old').value)||0;
        const n = parseFloat(document.getElementById('ch-new').value)||0;
        if (!o) { setResult('–','Alter Wert = 0',false,[],'( Neu − Alt ) ÷ Alt × 100'); return; }
        const pct = (n-o)/o*100;
        const diff = n-o;
        const arrow = pct >= 0 ? '▲' : '▼';
        setResult(`${arrow} ${fmt(Math.abs(pct))}%`, pct>=0?'Anstieg':'Rückgang', pct<0,
            [['Differenz', fmt(diff)],['Alter Wert', fmt(o)],['Neuer Wert', fmt(n)]],
            '( Neu − Alt ) ÷ Alt × 100');
    } else if (currentMode === 'markup') {
        const base = parseFloat(document.getElementById('mk-base').value)||0;
        const pct = parseFloat(document.getElementById('mk-pct').value)||0;
        const added = base * pct / 100;
        const total = base + added;
        setResult(fmtE(total), `+${fmt(pct)}% auf ${fmtE(base)}`, false,
            [['Aufschlag', fmtE(added)],['Basiswert', fmtE(base)],['Endwert', fmtE(total)]],
            'Basis × (1 + Aufschlag%)');
    } else if (currentMode === 'discount') {
        const price = parseFloat(document.getElementById('dc-price').value)||0;
        const pct = parseFloat(document.getElementById('dc-pct').value)||0;
        const savings = price * pct / 100;
        const final = price - savings;
        setResult(fmtE(final), `${fmt(pct)}% Rabatt auf ${fmtE(price)}`, false,
            [['Ersparnis', fmtE(savings)],['Originalpreis', fmtE(price)],['Endpreis', fmtE(final)]],
            'Preis × (1 − Rabatt%)');
    } else if (currentMode === 'share') {
        const val = parseFloat(document.getElementById('sh-val').value)||0;
        const tot = parseFloat(document.getElementById('sh-tot').value)||1;
        const pct = val/tot*100;
        setResult(`${fmt(pct)}%`, `${fmt(val)} von ${fmt(tot)}`, false,
            [['Anteil', fmt(val)],['Gesamt', fmt(tot)],['Rest', fmt(tot-val)]],
            'Anteil ÷ Gesamt × 100');
    } else if (currentMode === 'vat') {
        const net = parseFloat(document.getElementById('vt-net').value)||0;
        const rate = parseFloat(document.getElementById('vt-rate').value)||19;
        const vatAmt = net * rate / 100;
        const gross = net + vatAmt;
        setResult(fmtE(gross), `Brutto inkl. ${fmt(rate)}% MwSt`, false,
            [['Netto', fmtE(net)],['MwSt-Betrag', fmtE(vatAmt)],['Brutto', fmtE(gross)]],
            'Netto × (1 + MwSt%)');
    } else if (currentMode === 'interest') {
        const cap = parseFloat(document.getElementById('it-cap').value)||0;
        const rate = parseFloat(document.getElementById('it-rate').value)||0;
        const years = parseInt(document.getElementById('it-years').value)||1;
        const contrib = parseFloat(document.getElementById('it-contrib').value)||0;
        const r = rate/100;
        let total = cap * Math.pow(1+r, years);
        if (contrib && r > 0) total += contrib * (Math.pow(1+r, years)-1)/r;
        const gain = total - cap - contrib*years;
        setResult(fmtE(total), `nach ${years} Jahren bei ${fmt(rate)}% p.a.`, false,
            [['Startkapital', fmtE(cap)],['Gewinn', fmtE(gain)],['Einzahlungen', fmtE(contrib*years)]],
            'K × (1+r)^n + B × ((1+r)^n−1)/r');
    }
}

calc();
</script>

@include('tools._seo_content', ['toolSlug' => 'prozent-aenderung', 'toolName' => 'Prozentänderung'])

@endsection