@extends('layouts.app')
@section('title', 'Prozent Rechner – Prozent berechnen online | kotsch.tech')
@section('meta_description', 'Prozent Rechner kostenlos: Prozent berechnen, Prozentwert, Grundwert und Prozentsatz direkt im Browser. Einfacher Prozentrechner für alle Fälle.')
@section('meta_extra')
<meta name="keywords" content="Prozent Rechner, Prozent berechnen, Prozentrechner, Prozentwert berechnen, Prozentsatz berechnen, Grundwert berechnen, wie viel Prozent">
@endsection
@section('content')
@include('tools._tool_base')
<style>
.pct-answer {
    min-height: 60px; border-radius: var(--radius-md);
    background: var(--accent-soft); border: 1px solid rgba(16,185,129,0.22);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-weight: 900; font-size: 1.6rem; color: var(--accent);
    margin-top: 12px; padding: 12px; text-align: center;
}
.pct-answer small { font-size: 0.72rem; color: var(--muted); font-weight: 700; display: block; margin-bottom: 4px; }
.pct-formula { font-size: 0.78rem; color: var(--muted); font-weight: 600; margin-top: 6px; font-family: 'JetBrains Mono',monospace; }
.pct-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow); }
.pct-card h2 { font-size: 0.88rem; font-weight: 900; color: var(--accent); text-transform: uppercase; letter-spacing: 1px; margin: 0 0 16px; }
.err { color: #dc2626; font-size: 0.82rem; font-weight: 700; margin-top: 6px; display: none; }
</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<br><span>berechnen.</span></h1>
        <p class="tool-sub">Drei Varianten live berechnen: Prozentwert, Prozentsatz oder Grundwert – mit Formelanzeige.</p>
    </div>

    <div style="display:grid;gap:18px">

        <div class="pct-card">
            <h2><i class="fas fa-arrow-right" style="margin-right:6px"></i>Was sind X% von Y?</h2>
            <div class="t-grid-2">
                <div class="t-field">
                    <label class="t-label">Prozentsatz (%)</label>
                    <input type="number" class="t-input" id="p1a" placeholder="z.B. 19" oninput="c1()">
                </div>
                <div class="t-field">
                    <label class="t-label">Grundwert</label>
                    <input type="number" class="t-input" id="p1b" placeholder="z.B. 100" oninput="c1()">
                </div>
            </div>
            <div class="pct-answer" id="r1"><small>Ergebnis</small>–</div>
            <div class="pct-formula" id="f1"></div>
            <div class="err" id="e1"></div>
        </div>

        <div class="pct-card">
            <h2><i class="fas fa-question" style="margin-right:6px"></i>X ist wie viel % von Y?</h2>
            <div class="t-grid-2">
                <div class="t-field">
                    <label class="t-label">Teilwert (X)</label>
                    <input type="number" class="t-input" id="p2a" placeholder="z.B. 25" oninput="c2()">
                </div>
                <div class="t-field">
                    <label class="t-label">Grundwert (Y)</label>
                    <input type="number" class="t-input" id="p2b" placeholder="z.B. 200" oninput="c2()">
                </div>
            </div>
            <div class="pct-answer" id="r2"><small>Ergebnis</small>–</div>
            <div class="pct-formula" id="f2"></div>
            <div class="err" id="e2"></div>
        </div>

        <div class="pct-card">
            <h2><i class="fas fa-search" style="margin-right:6px"></i>X% von welchem Wert sind Y?</h2>
            <div class="t-grid-2">
                <div class="t-field">
                    <label class="t-label">Prozentsatz (X %)</label>
                    <input type="number" class="t-input" id="p3a" placeholder="z.B. 20" oninput="c3()">
                </div>
                <div class="t-field">
                    <label class="t-label">Prozentwert (Y)</label>
                    <input type="number" class="t-input" id="p3b" placeholder="z.B. 50" oninput="c3()">
                </div>
            </div>
            <div class="pct-answer" id="r3"><small>Ergebnis</small>–</div>
            <div class="pct-formula" id="f3"></div>
            <div class="err" id="e3"></div>
        </div>

        <div class="t-panel" style="margin-bottom:0">
            <div class="t-panel-title"><i class="fas fa-calculator"></i> Prozentrechnung Schnellreferenz</div>
            <div class="t-row"><span class="t-row-lbl">Prozentwert</span><span class="t-row-val" style="font-size:0.88rem;font-family:monospace">Grundwert × Prozentsatz ÷ 100</span></div>
            <div class="t-row"><span class="t-row-lbl">Prozentsatz</span><span class="t-row-val" style="font-size:0.88rem;font-family:monospace">Teilwert ÷ Grundwert × 100</span></div>
            <div class="t-row"><span class="t-row-lbl">Grundwert</span><span class="t-row-val" style="font-size:0.88rem;font-family:monospace">Prozentwert ÷ Prozentsatz × 100</span></div>
        </div>

    </div>
</div>
@include('tools._ads_banner')
</div>

<script>
const n = v => Number.isFinite(v) ? v.toLocaleString('de-DE', {maximumFractionDigits: 6}) : '–';
function setOk(id, val, fid, formula) {
    const el = document.getElementById(id);
    el.innerHTML = `<small>Ergebnis</small>${n(val)}`;
    el.style.color = '';
    document.getElementById(fid).textContent = formula;
    document.getElementById('e' + id.slice(1)).style.display = 'none';
}
function setErr(id, msg) {
    const el = document.getElementById(id);
    el.innerHTML = `<small>Ergebnis</small>–`;
    const e = document.getElementById('e' + id.slice(1));
    e.textContent = msg; e.style.display = 'block';
}
function c1() {
    const a = parseFloat(document.getElementById('p1a').value);
    const b = parseFloat(document.getElementById('p1b').value);
    if (isNaN(a) || isNaN(b)) { document.getElementById('f1').textContent = ''; return; }
    setOk('r1', a * b / 100, 'f1', `${n(a)}% × ${n(b)} ÷ 100 = ${n(a * b / 100)}`);
}
function c2() {
    const a = parseFloat(document.getElementById('p2a').value);
    const b = parseFloat(document.getElementById('p2b').value);
    if (isNaN(a) || isNaN(b)) { document.getElementById('f2').textContent = ''; return; }
    if (b === 0) { setErr('r2', 'Grundwert darf nicht 0 sein'); return; }
    const res = a / b * 100;
    setOk('r2', res, 'f2', `${n(a)} ÷ ${n(b)} × 100 = ${n(res)} %`);
}
function c3() {
    const a = parseFloat(document.getElementById('p3a').value);
    const b = parseFloat(document.getElementById('p3b').value);
    if (isNaN(a) || isNaN(b)) { document.getElementById('f3').textContent = ''; return; }
    if (a === 0) { setErr('r3', 'Prozentsatz darf nicht 0 sein'); return; }
    const res = b / a * 100;
    setOk('r3', res, 'f3', `${n(b)} ÷ ${n(a)}% × 100 = ${n(res)}`);
}
</script>

@include('tools._seo_content', ['toolSlug' => 'prozent-rechner', 'toolName' => 'Prozent Rechner'])

@endsection