@extends('layouts.app')
@section('title', 'Bruchrechner – Brüche addieren, subtrahieren, multiplizieren, dividieren | kotsch.tech')
@section('meta_description', 'Brüche online berechnen und vereinfachen. Schritt-für-Schritt-Lösung mit gemischter Zahl und Dezimalwert. Addition, Subtraktion, Multiplikation, Division.')
@section('meta_extra')
@endsection
@section('content')
<style>
    :root { --ink: #0f172a; --muted: #64748b; --line: #e2e8f0; --accent: #4f46e5; }
    .tool-page { min-height: 100vh; background: linear-gradient(135deg, #eef2ff 0%, #fff 60%); padding-top: 92px; font-family: 'Plus Jakarta Sans', sans-serif; color: var(--ink); }
    .tool-container { width: min(100% - 40px, 680px); margin: 0 auto; padding: 24px 0 60px; }
    .tag { display: inline-flex; padding: 7px 12px; border-radius: 999px; background: rgba(79,70,229,0.1); color: #4338ca; font-size: 0.72rem; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; }
    h1.tool-h1 { margin: 18px 0 10px; font-size: clamp(2.1rem, 7vw, 4rem); line-height: 0.95; letter-spacing: -2px; font-weight: 800; }
    .tool-page p.sub { color: var(--muted); margin: 0 0 28px; line-height: 1.7; }
    .panel { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 28px; box-shadow: 0 24px 60px -32px rgba(15,23,42,0.18); margin-bottom: 16px; }
    .panel-label { font-size: 0.78rem; font-weight: 700; color: var(--muted); letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 14px; }

    /* Operator tabs */
    .op-tabs { display: flex; gap: 6px; justify-content: center; margin: 0 8px; }
    .op-tab {
        padding: 10px 16px; border-radius: 10px; font-size: 1.2rem; font-weight: 800;
        cursor: pointer; border: 2px solid var(--line); background: #f8fafc; color: var(--muted);
        transition: all 0.15s; min-width: 48px; text-align: center;
    }
    .op-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
    .op-tab:hover:not(.active) { border-color: var(--accent); color: var(--accent); background: #eef2ff; }

    /* Fraction input */
    .fraction-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
    .fraction-input-group { display: flex; flex-direction: column; align-items: center; gap: 0; }
    .fraction-num-input {
        width: 90px; text-align: center; font-size: 1.4rem; font-weight: 800;
        border: 2px solid var(--line); border-radius: 10px; padding: 10px 8px;
        outline: none; transition: border-color 0.2s; color: var(--ink);
        font-family: 'Plus Jakarta Sans', sans-serif;
    }
    .fraction-num-input:focus { border-color: var(--accent); }
    .fraction-line { width: 90px; height: 3px; background: var(--ink); border-radius: 2px; margin: 4px 0; }
    .fraction-label { font-size: 0.7rem; color: var(--muted); font-weight: 600; margin-top: 4px; }

    /* Result */
    .result-fraction { display: flex; flex-direction: column; align-items: center; gap: 0; }
    .result-num { font-size: 2rem; font-weight: 900; color: var(--accent); line-height: 1; }
    .result-line { width: 100%; height: 3px; background: var(--accent); border-radius: 2px; margin: 4px 0; }
    .result-denom { font-size: 2rem; font-weight: 900; color: var(--accent); line-height: 1; }

    .result-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-top: 18px; }
    .result-card { background: #f8fafc; border: 1.5px solid var(--line); border-radius: 14px; padding: 14px; text-align: center; }
    .result-card-label { font-size: 0.72rem; font-weight: 700; color: var(--muted); letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 8px; }

    /* Steps */
    .steps { margin-top: 0; }
    .step { display: flex; align-items: baseline; gap: 10px; padding: 10px 14px; border-left: 3px solid var(--line); margin-bottom: 8px; font-size: 0.88rem; }
    .step-num { font-weight: 900; color: var(--accent); min-width: 22px; font-size: 0.78rem; }
    .step-text { color: var(--ink); line-height: 1.6; font-family: 'JetBrains Mono', monospace; font-size: 0.84rem; }
    .step:last-child { border-left-color: var(--accent); background: #eef2ff; border-radius: 0 8px 8px 0; }

    .error-banner { background: #fef2f2; border: 1.5px solid #fca5a5; border-radius: 10px; padding: 12px 16px; color: #b91c1c; font-size: 0.84rem; font-weight: 600; margin-top: 16px; display: none; }

    .btn { display: inline-flex; align-items: center; gap: 7px; padding: 12px 28px; border-radius: 12px; font-weight: 700; font-size: 0.9rem; cursor: pointer; border: none; transition: all 0.15s; }
    .btn-primary { background: var(--accent); color: #fff; }
    .btn-primary:hover { background: #4338ca; }
    .btn-secondary { background: #f1f5f9; color: var(--ink); border: 1.5px solid var(--line); }
    .btn-secondary:hover { background: #e2e8f0; }

    .result-display { display: none; }
    .result-display.visible { display: block; }
</style>
<div class="tool-page"><div class="tool-container">
    <section style="margin-bottom:28px">
        <span class="tag">Mathematik</span>
        <h1 class="tool-h1">Bruchrechner.</h1>
        <p class="sub">Brüche addieren, subtrahieren, multiplizieren und dividieren – mit Schritt-für-Schritt-Lösung und automatischer Vereinfachung.</p>
    </section>

    <div class="panel">
        <div class="panel-label">Brüche eingeben</div>

        <div class="fraction-row">
            <!-- Fraction A -->
            <div style="display:flex;flex-direction:column;align-items:center;gap:2px">
                <input type="number" class="fraction-num-input" id="numA" value="1" placeholder="Zähler">
                <div class="fraction-line"></div>
                <input type="number" class="fraction-num-input" id="denA" value="2" placeholder="Nenner">
                <div class="fraction-label">Bruch A</div>
            </div>

            <!-- Operator -->
            <div class="op-tabs" style="flex-direction:column;gap:6px">
                <button class="op-tab active" data-op="+" onclick="setOp(this)">+</button>
                <button class="op-tab" data-op="-" onclick="setOp(this)">−</button>
                <button class="op-tab" data-op="*" onclick="setOp(this)">×</button>
                <button class="op-tab" data-op="/" onclick="setOp(this)">÷</button>
            </div>

            <!-- Fraction B -->
            <div style="display:flex;flex-direction:column;align-items:center;gap:2px">
                <input type="number" class="fraction-num-input" id="numB" value="1" placeholder="Zähler">
                <div class="fraction-line"></div>
                <input type="number" class="fraction-num-input" id="denB" value="3" placeholder="Nenner">
                <div class="fraction-label">Bruch B</div>
            </div>
        </div>

        <div id="errorBanner" class="error-banner"></div>

        <div style="display:flex;gap:10px;margin-top:22px;justify-content:center;flex-wrap:wrap">
            <button class="btn btn-primary" onclick="calculate()">
                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M9 9H4v5h5V9z"/><path d="M20 9h-5v11h5V9z"/><path d="M9 4H4v4h5V4z"/><path d="M20 4h-5v4h5V4z"/></svg>
                Berechnen
            </button>
            <button class="btn btn-secondary" onclick="resetAll()">Zurücksetzen</button>
        </div>
    </div>

    <div class="panel result-display" id="resultPanel">
        <div class="panel-label">Ergebnis</div>
        <div style="display:flex;align-items:center;justify-content:center;gap:32px;flex-wrap:wrap;padding:16px 0">
            <div style="text-align:center">
                <div style="font-size:0.75rem;font-weight:700;color:var(--muted);letter-spacing:0.5px;text-transform:uppercase;margin-bottom:12px">Vereinfacht</div>
                <div class="result-fraction">
                    <div class="result-num" id="resNum">5</div>
                    <div class="result-line" id="resLine"></div>
                    <div class="result-denom" id="resDen">6</div>
                </div>
            </div>
            <div style="display:flex;flex-direction:column;gap:10px">
                <div class="result-card" style="min-width:140px">
                    <div class="result-card-label">Dezimal</div>
                    <div style="font-size:1.4rem;font-weight:800;color:var(--ink)" id="resDecimal"></div>
                </div>
                <div class="result-card" id="mixedCard" style="min-width:140px;display:none">
                    <div class="result-card-label">Gemischte Zahl</div>
                    <div style="font-size:1.1rem;font-weight:800;color:var(--ink)" id="resMixed"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="panel result-display" id="stepsPanel">
        <div class="panel-label">Lösungsweg</div>
        <div class="steps" id="stepsContainer"></div>
    </div>
</div>@include('tools._ads_banner')</div>

<script>
let selectedOp = '+';

function setOp(btn) {
    document.querySelectorAll('.op-tab').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    selectedOp = btn.dataset.op;
}

function gcd(a, b) { a = Math.abs(a); b = Math.abs(b); while (b) { [a, b] = [b, a % b]; } return a; }
function lcm(a, b) { return Math.abs(a * b) / gcd(a, b); }

function simplify(num, den) {
    if (den === 0) return null;
    const g = gcd(Math.abs(num), Math.abs(den));
    let n = num / g, d = den / g;
    if (d < 0) { n = -n; d = -d; }
    return { num: n, den: d };
}

function showError(msg) {
    const b = document.getElementById('errorBanner');
    b.textContent = msg; b.style.display = 'block';
    document.getElementById('resultPanel').classList.remove('visible');
    document.getElementById('stepsPanel').classList.remove('visible');
}
function hideError() { document.getElementById('errorBanner').style.display = 'none'; }

function fracStr(n, d) {
    if (d === 1) return String(n);
    return n + '/' + d;
}

function calculate() {
    hideError();
    const nA = parseInt(document.getElementById('numA').value) || 0;
    const dA = parseInt(document.getElementById('denA').value);
    const nB = parseInt(document.getElementById('numB').value) || 0;
    const dB = parseInt(document.getElementById('denB').value);

    if (isNaN(dA) || dA === 0) { showError('Nenner A darf nicht 0 sein.'); return; }
    if (isNaN(dB) || dB === 0) { showError('Nenner B darf nicht 0 sein.'); return; }
    if (selectedOp === '/' && nB === 0) { showError('Fehler: Division durch 0 (Zähler B = 0).'); return; }

    const steps = [];
    let resNum, resDen;

    if (selectedOp === '+' || selectedOp === '-') {
        const common = lcm(Math.abs(dA), Math.abs(dB));
        const mA = common / dA;
        const mB = common / dB;
        const nA2 = nA * mA;
        const nB2 = nB * mB;
        const sign = selectedOp === '+' ? '+' : '−';
        const opSym = selectedOp === '+' ? '+' : '-';

        steps.push(`Ausgangspunkt: ${fracStr(nA, dA)} ${sign} ${fracStr(nB, dB)}`);
        if (dA !== dB) {
            steps.push(`Gemeinsamen Nenner finden: kgV(${Math.abs(dA)}, ${Math.abs(dB)}) = ${common}`);
            steps.push(`Brüche erweitern: ${fracStr(nA2, common)} ${sign} ${fracStr(nB2, common)}`);
        }
        resNum = nA2 + (selectedOp === '+' ? nB2 : -nB2);
        resDen = common;
        steps.push(`Zähler ${selectedOp === '+' ? 'addieren' : 'subtrahieren'}: ${nA2} ${sign} ${Math.abs(nB2)} = ${resNum}`);
        steps.push(`Ergebnis (noch nicht vereinfacht): ${fracStr(resNum, resDen)}`);
    } else if (selectedOp === '*') {
        steps.push(`Ausgangspunkt: ${fracStr(nA, dA)} × ${fracStr(nB, dB)}`);
        steps.push(`Zähler multiplizieren: ${nA} × ${nB} = ${nA * nB}`);
        steps.push(`Nenner multiplizieren: ${dA} × ${dB} = ${dA * dB}`);
        resNum = nA * nB;
        resDen = dA * dB;
        steps.push(`Ergebnis (noch nicht vereinfacht): ${fracStr(resNum, resDen)}`);
    } else { // division
        steps.push(`Ausgangspunkt: ${fracStr(nA, dA)} ÷ ${fracStr(nB, dB)}`);
        steps.push(`Kehrwert von ${fracStr(nB, dB)} bilden: ${fracStr(dB, nB)}`);
        steps.push(`Umformen: ${fracStr(nA, dA)} × ${fracStr(dB, nB)}`);
        resNum = nA * dB;
        resDen = dA * nB;
        steps.push(`Ergebnis (noch nicht vereinfacht): ${fracStr(resNum, resDen)}`);
    }

    const simplified = simplify(resNum, resDen);
    if (!simplified) { showError('Unbekannter Fehler.'); return; }

    const { num: sNum, den: sDen } = simplified;
    const g = gcd(Math.abs(resNum), Math.abs(resDen));
    if (g > 1) steps.push(`Vereinfachen mit GGT ${g}: ${fracStr(resNum, resDen)} = ${fracStr(sNum, sDen)}`);
    else steps.push(`Der Bruch ist bereits vollständig vereinfacht: ${fracStr(sNum, sDen)}`);

    // Display result
    document.getElementById('resNum').textContent = sNum;
    document.getElementById('resDen').textContent = sDen;
    document.getElementById('resLine').style.display = sDen === 1 ? 'none' : 'block';
    if (sDen === 1) document.getElementById('resDen').textContent = '';

    const decimal = sNum / sDen;
    document.getElementById('resDecimal').textContent = parseFloat(decimal.toPrecision(10));

    // Mixed number
    if (Math.abs(sNum) >= sDen && sDen !== 1) {
        const whole = Math.trunc(sNum / sDen);
        const rem = Math.abs(sNum % sDen);
        const mixedStr = rem === 0 ? String(whole) : `${whole} ${rem}/${sDen}`;
        document.getElementById('resMixed').textContent = mixedStr;
        document.getElementById('mixedCard').style.display = 'block';
    } else {
        document.getElementById('mixedCard').style.display = 'none';
    }

    // Steps
    const stepsHtml = steps.map((s, i) =>
        `<div class="step"><span class="step-num">${i + 1}.</span><span class="step-text">${s}</span></div>`
    ).join('');
    document.getElementById('stepsContainer').innerHTML = stepsHtml;

    document.getElementById('resultPanel').classList.add('visible');
    document.getElementById('stepsPanel').classList.add('visible');
}

function resetAll() {
    document.getElementById('numA').value = 1;
    document.getElementById('denA').value = 2;
    document.getElementById('numB').value = 1;
    document.getElementById('denB').value = 3;
    document.querySelectorAll('.op-tab').forEach((b, i) => b.classList.toggle('active', i === 0));
    selectedOp = '+';
    hideError();
    document.getElementById('resultPanel').classList.remove('visible');
    document.getElementById('stepsPanel').classList.remove('visible');
}

// Live calc on Enter
document.querySelectorAll('.fraction-num-input').forEach(el => {
    el.addEventListener('keydown', e => { if (e.key === 'Enter') calculate(); });
});
</script>

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

@endsection