@extends('layouts.app')
@section('title', 'Dreisatz Rechner – Verhältnisrechnung online | kotsch.tech')
@section('meta_description', 'Dreisatz online berechnen: direkter und indirekter Dreisatz, Umrechnungen, Einheitenumrechner und Verhältnistabelle. Kostenlos und lokal.')
@section('meta_extra')
<meta name="keywords" content="Dreisatz Rechner, Verhältnisrechnung, Dreisatz berechnen, direkter Dreisatz, indirekter Dreisatz, Proportion">
@endsection
@section('content')
@include('tools._tool_base')
<style>
.ds-eq { display:flex; align-items:center; gap:14px; flex-wrap:wrap; background:var(--bg); border:2px solid var(--line); border-radius:var(--radius-sm); padding:20px; }
.ds-frac { display:flex; flex-direction:column; align-items:center; gap:2px; }
.ds-frac .ds-num { font-size:1.2rem; font-weight:900; font-family:'JetBrains Mono',monospace; min-width:80px; text-align:center; }
.ds-frac .ds-line { height:2px; width:100%; background:var(--ink); }
.ds-eq-sign { font-size:1.5rem; font-weight:700; color:var(--muted); }
.ds-x { font-size:1.5rem; font-weight:900; color:var(--accent); background:var(--accent-soft); padding:8px 16px; border-radius:var(--radius-sm); border:2px solid var(--accent); font-family:'JetBrains Mono',monospace; }
.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; }
.ratio-row { display:flex; align-items:center; gap:12px; padding:8px 0; border-bottom:1px solid var(--line); font-family:'JetBrains Mono',monospace; }
</style>

<div class="tool-page">
<div class="tool-container">
    <div class="tool-header">
        <span class="t-tag"><i class="fas fa-balance-scale"></i> Mathematik</span>
        <h1 class="tool-h1">Dreisatz<span>rechner.</span></h1>
        <p class="tool-sub">Direkter & indirekter Dreisatz, Verhältnistabelle und Einheitenumrechner.</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('direct',this)">Direkter Dreisatz</button>
            <button class="mode-tab" onclick="setMode('indirect',this)">Indirekter Dreisatz</button>
            <button class="mode-tab" onclick="setMode('table',this)">Verhältnistabelle</button>
        </div>

        <div id="pane-direct">
            <p style="font-size:0.82rem;color:var(--muted);margin-bottom:14px">Wenn A gilt für B, wie viel gilt dann für C? (Beide Größen wachsen gleich.)</p>
            <div class="t-grid-3" style="gap:12px;margin-bottom:16px">
                <div class="t-field"><label class="t-label">Wenn: A</label><input type="number" class="t-input" id="d-a" value="3" oninput="calc()"></div>
                <div class="t-field"><label class="t-label">entspricht: B</label><input type="number" class="t-input" id="d-b" value="12" oninput="calc()"></div>
                <div class="t-field"><label class="t-label">dann für C</label><input type="number" class="t-input" id="d-c" value="7" oninput="calc()"></div>
            </div>
            <div class="ds-eq">
                <div class="ds-frac">
                    <span class="ds-num" id="d-show-a">3</span>
                    <div class="ds-line"></div>
                    <span class="ds-num" id="d-show-c">7</span>
                </div>
                <span class="ds-eq-sign">=</span>
                <div class="ds-frac">
                    <span class="ds-num" id="d-show-b">12</span>
                    <div class="ds-line"></div>
                    <span class="ds-num" style="color:var(--accent)">x</span>
                </div>
                <span class="ds-eq-sign">→</span>
                <div class="ds-x" id="d-result">28</div>
            </div>
            <div id="d-steps" style="margin-top:12px;font-size:0.82rem;color:var(--muted)"></div>
        </div>

        <div id="pane-indirect" style="display:none">
            <p style="font-size:0.82rem;color:var(--muted);margin-bottom:14px">Wenn mehr von A, dann weniger von B (umgekehrt proportional). z.B. Arbeiter & Tage.</p>
            <div class="t-grid-3" style="gap:12px;margin-bottom:16px">
                <div class="t-field"><label class="t-label">Wenn: A</label><input type="number" class="t-input" id="i-a" value="4" oninput="calcI()"></div>
                <div class="t-field"><label class="t-label">braucht: B</label><input type="number" class="t-input" id="i-b" value="6" oninput="calcI()"></div>
                <div class="t-field"><label class="t-label">dann für C</label><input type="number" class="t-input" id="i-c" value="8" oninput="calcI()"></div>
            </div>
            <div class="ds-eq">
                <div class="ds-frac">
                    <span class="ds-num" id="i-show-a">4</span>
                    <div class="ds-line"></div>
                    <span class="ds-num" id="i-show-c">8</span>
                </div>
                <span class="ds-eq-sign">=</span>
                <div class="ds-frac">
                    <span class="ds-num" style="color:var(--accent)">x</span>
                    <div class="ds-line"></div>
                    <span class="ds-num" id="i-show-b">6</span>
                </div>
                <span class="ds-eq-sign">→</span>
                <div class="ds-x" id="i-result">3</div>
            </div>
            <div id="i-steps" style="margin-top:12px;font-size:0.82rem;color:var(--muted)"></div>
        </div>

        <div id="pane-table" style="display:none">
            <p style="font-size:0.82rem;color:var(--muted);margin-bottom:14px">Erzeuge eine Verhältnistabelle für einen festen Faktor.</p>
            <div class="t-grid-3" style="gap:12px;margin-bottom:16px">
                <div class="t-field"><label class="t-label">Wenn 1 entspricht</label><input type="number" class="t-input" id="t-factor" value="2.5" step="any" oninput="calcT()"></div>
                <div class="t-field"><label class="t-label">Von</label><input type="number" class="t-input" id="t-from" value="1" oninput="calcT()"></div>
                <div class="t-field"><label class="t-label">Bis</label><input type="number" class="t-input" id="t-to" value="12" oninput="calcT()"></div>
            </div>
            <div id="t-rows" style="max-height:300px;overflow-y:auto"></div>
        </div>
    </div>

    <div class="t-panel" style="background:var(--accent-soft);border-color:var(--accent)" id="ds-info">
        <div style="font-size:0.82rem;color:#065f46"><i class="fas fa-info-circle"></i> <span id="ds-formula">Direkter Dreisatz: x = B × C ÷ A</span></div>
    </div>
</div>
@include('tools._ads_banner')
</div>

<script>
let currentMode = 'direct';

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 = '';
    if (mode==='direct') calc();
    else if (mode==='indirect') calcI();
    else calcT();
}

function fmt(n) {
    if (Number.isInteger(n)) return n.toLocaleString('de-DE');
    return n.toLocaleString('de-DE', {maximumFractionDigits:4});
}

function calc() {
    const a = parseFloat(document.getElementById('d-a').value)||0;
    const b = parseFloat(document.getElementById('d-b').value)||0;
    const c = parseFloat(document.getElementById('d-c').value)||0;
    const x = a ? b*c/a : 0;
    document.getElementById('d-result').textContent = fmt(x);
    document.getElementById('d-show-a').textContent = fmt(a);
    document.getElementById('d-show-b').textContent = fmt(b);
    document.getElementById('d-show-c').textContent = fmt(c);
    document.getElementById('d-steps').innerHTML = `<strong>Schritt 1:</strong> 1 entspricht ${fmt(a?b/a:0)} (= ${fmt(b)} ÷ ${fmt(a)})<br><strong>Schritt 2:</strong> ${fmt(c)} entsprechen ${fmt(x)} (= ${fmt(a?b/a:0)} × ${fmt(c)})`;
    document.getElementById('ds-formula').textContent = 'Direkter Dreisatz: x = B × C ÷ A = '+fmt(b)+' × '+fmt(c)+' ÷ '+fmt(a)+' = '+fmt(x);
}

function calcI() {
    const a = parseFloat(document.getElementById('i-a').value)||0;
    const b = parseFloat(document.getElementById('i-b').value)||0;
    const c = parseFloat(document.getElementById('i-c').value)||0;
    const x = c ? a*b/c : 0;
    document.getElementById('i-result').textContent = fmt(x);
    document.getElementById('i-show-a').textContent = fmt(a);
    document.getElementById('i-show-b').textContent = fmt(b);
    document.getElementById('i-show-c').textContent = fmt(c);
    document.getElementById('i-steps').innerHTML = `<strong>Schritt 1:</strong> Produkt A×B = ${fmt(a*b)}<br><strong>Schritt 2:</strong> x = A×B ÷ C = ${fmt(a*b)} ÷ ${fmt(c)} = ${fmt(x)}`;
    document.getElementById('ds-formula').textContent = 'Indirekter Dreisatz: x = A × B ÷ C = '+fmt(a)+' × '+fmt(b)+' ÷ '+fmt(c)+' = '+fmt(x);
}

function calcT() {
    const factor = parseFloat(document.getElementById('t-factor').value)||1;
    const from = parseInt(document.getElementById('t-from').value)||1;
    const to = Math.min(parseInt(document.getElementById('t-to').value)||12, from+99);
    let html = '';
    for (let i=from; i<=to; i++) {
        html += `<div class="ratio-row"><span style="min-width:40px;font-weight:700">${fmt(i)}</span><span style="color:var(--muted)">→</span><span style="color:var(--accent);font-weight:900">${fmt(i*factor)}</span></div>`;
    }
    document.getElementById('t-rows').innerHTML = html;
    document.getElementById('ds-formula').textContent = `Verhältnis: 1 ≙ ${fmt(factor)}, also n ≙ n × ${fmt(factor)}`;
}

calc(); calcI(); calcT();
</script>

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

@endsection