@extends('layouts.app')
@section('title', 'Statistik-Rechner – Mittelwert, Median, Standardabweichung Online | kotsch.tech')
@section('meta_description', 'Statistische Kennzahlen online berechnen: Mittelwert, Median, Modus, Varianz, Standardabweichung, Quartile, Min, Max und mehr. Kostenlos und direkt im Browser.')
@section('meta_extra')
@endsection
@section('content')
<style>
    :root { --ink: #0f172a; --muted: #64748b; --line: #e2e8f0; --accent: #2563eb; }
    .tool-page { min-height: 100vh; background: linear-gradient(135deg, #eff6ff 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(37,99,235,0.1); color: #1d4ed8; 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; }

    textarea.data-area {
        width: 100%; box-sizing: border-box; border: 1.5px solid var(--line); border-radius: 12px;
        padding: 14px 16px; font-family: 'JetBrains Mono', 'Fira Mono', monospace; font-size: 0.88rem;
        line-height: 1.7; resize: vertical; outline: none; transition: border-color 0.2s;
        color: var(--ink); background: #f8fafc; min-height: 120px;
    }
    textarea.data-area:focus { border-color: var(--accent); background: #fff; }

    .hint { font-size: 0.78rem; color: var(--muted); margin-top: 8px; line-height: 1.6; }

    .btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
    .btn { display: inline-flex; align-items: center; gap: 7px; padding: 11px 24px; border-radius: 11px; font-weight: 700; font-size: 0.88rem; cursor: pointer; border: none; transition: all 0.15s; }
    .btn-primary { background: var(--accent); color: #fff; }
    .btn-primary:hover { background: #1d4ed8; }
    .btn-secondary { background: #f1f5f9; color: var(--ink); border: 1.5px solid var(--line); }
    .btn-secondary:hover { background: #e2e8f0; }

    .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: 12px; display: none; }

    /* Stats grid */
    .stats-section { margin-bottom: 22px; }
    .stats-section-title { font-size: 0.73rem; font-weight: 800; color: var(--accent); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 2px solid rgba(37,99,235,0.15); }
    .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
    .stat-row { display: flex; justify-content: space-between; align-items: center; background: #fff; padding: 11px 16px; gap: 12px; }
    .stat-row:hover { background: #f8fafc; }
    .stat-name { font-size: 0.83rem; color: var(--muted); font-weight: 600; }
    .stat-value { font-size: 0.95rem; font-weight: 800; color: var(--ink); text-align: right; }
    .stat-value.accent { color: var(--accent); }
    .stat-value.muted { color: var(--muted); font-weight: 600; }

    /* Sorted data preview */
    .sorted-preview { font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; color: var(--muted); background: #f8fafc; border-radius: 10px; padding: 10px 14px; max-height: 80px; overflow-y: auto; line-height: 1.8; border: 1px solid var(--line); }

    .live-toggle { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--muted); font-weight: 600; cursor: pointer; margin-top: 10px; }
    .live-toggle input { accent-color: var(--accent); width: 16px; height: 16px; cursor: pointer; }

    .result-display { display: none; }
    .result-display.visible { display: block; }

    /* Histogram-like bar chart */
    .bar-chart { display: flex; align-items: flex-end; gap: 3px; height: 60px; margin-top: 12px; }
    .bar { background: rgba(37,99,235,0.2); border-radius: 4px 4px 0 0; flex: 1; min-width: 6px; transition: background 0.2s; position: relative; }
    .bar:hover { background: rgba(37,99,235,0.5); }
    .bar[title]:hover::after { content: attr(title); position: absolute; bottom: 105%; left: 50%; transform: translateX(-50%); background: #1e293b; color: #fff; padding: 3px 7px; border-radius: 6px; font-size: 0.72rem; white-space: nowrap; pointer-events: none; }
</style>
<div class="tool-page"><div class="tool-container">
    <section style="margin-bottom:28px">
        <span class="tag">Mathematik</span>
        <h1 class="tool-h1">Statistik-Rechner.</h1>
        <p class="sub">Statistische Kennzahlen blitzschnell berechnen – Mittelwert, Median, Standardabweichung, Quartile und mehr. Einfach Zahlen eingeben, fertig.</p>
    </section>

    <div class="panel">
        <div class="panel-label">Dateneingabe</div>
        <textarea class="data-area" id="dataInput" placeholder="Zahlen eingeben, z. B.:&#10;2, 4, 6, 8, 10&#10;oder eine Zahl pro Zeile"></textarea>
        <div class="hint">Trennzeichen: Komma, Semikolon, Leerzeichen oder Zeilenumbruch. Dezimaltrennzeichen: Punkt oder Komma.</div>
        <div class="error-banner" id="errorBanner"></div>
        <label class="live-toggle">
            <input type="checkbox" id="liveToggle" checked onchange="toggleLive()"> Live-Berechnung beim Tippen
        </label>
        <div class="btn-row">
            <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="clearAll()">Leeren</button>
            <button class="btn btn-secondary" onclick="loadExample()">Beispiel laden</button>
        </div>
    </div>

    <div class="panel result-display" id="resultPanel">
        <div class="stats-section">
            <div class="stats-section-title">Grundlegende Statistiken</div>
            <div class="stats-grid">
                <div class="stat-row">
                    <span class="stat-name">Anzahl (n)</span>
                    <span class="stat-value accent" id="sN">–</span>
                </div>
                <div class="stat-row">
                    <span class="stat-name">Summe</span>
                    <span class="stat-value" id="sSum">–</span>
                </div>
                <div class="stat-row">
                    <span class="stat-name">Minimum</span>
                    <span class="stat-value" id="sMin">–</span>
                </div>
                <div class="stat-row">
                    <span class="stat-name">Maximum</span>
                    <span class="stat-value" id="sMax">–</span>
                </div>
                <div class="stat-row" style="grid-column:1/-1">
                    <span class="stat-name">Spannweite (Range)</span>
                    <span class="stat-value" id="sRange">–</span>
                </div>
            </div>
        </div>

        <div class="stats-section">
            <div class="stats-section-title">Lagemaße</div>
            <div class="stats-grid">
                <div class="stat-row">
                    <span class="stat-name">Mittelwert (x̄)</span>
                    <span class="stat-value accent" id="sMean">–</span>
                </div>
                <div class="stat-row">
                    <span class="stat-name">Median</span>
                    <span class="stat-value accent" id="sMedian">–</span>
                </div>
                <div class="stat-row" style="grid-column:1/-1">
                    <span class="stat-name">Modus</span>
                    <span class="stat-value" id="sModus">–</span>
                </div>
            </div>
        </div>

        <div class="stats-section">
            <div class="stats-section-title">Streuungsmaße</div>
            <div class="stats-grid">
                <div class="stat-row">
                    <span class="stat-name">Varianz (σ²)</span>
                    <span class="stat-value" id="sVarianz">–</span>
                </div>
                <div class="stat-row">
                    <span class="stat-name">Standardabw. (σ)</span>
                    <span class="stat-value accent" id="sStddev">–</span>
                </div>
                <div class="stat-row">
                    <span class="stat-name">Varianz (s², Stichprobe)</span>
                    <span class="stat-value" id="sVarianzS">–</span>
                </div>
                <div class="stat-row">
                    <span class="stat-name">Standardabw. (s)</span>
                    <span class="stat-value" id="sStddevS">–</span>
                </div>
            </div>
        </div>

        <div class="stats-section">
            <div class="stats-section-title">Quartile &amp; Perzentile</div>
            <div class="stats-grid">
                <div class="stat-row">
                    <span class="stat-name">Q1 (25. Perzentil)</span>
                    <span class="stat-value" id="sQ1">–</span>
                </div>
                <div class="stat-row">
                    <span class="stat-name">Q3 (75. Perzentil)</span>
                    <span class="stat-value" id="sQ3">–</span>
                </div>
                <div class="stat-row" style="grid-column:1/-1">
                    <span class="stat-name">Interquartilsabstand (IQR)</span>
                    <span class="stat-value" id="sIQR">–</span>
                </div>
            </div>
        </div>

        <div class="stats-section" style="margin-bottom:0">
            <div class="stats-section-title">Sortierte Werte</div>
            <div class="sorted-preview" id="sortedPreview"></div>
            <div class="bar-chart" id="barChart"></div>
        </div>
    </div>
</div>@include('tools._ads_banner')</div>

<script>
let liveMode = true;

function toggleLive() { liveMode = document.getElementById('liveToggle').checked; }

function parseNumbers(raw) {
    // Replace commas used as decimal separators carefully:
    // First normalise list separators, then handle decimals
    // Strategy: split on comma/semicolon/space/newline sequences
    // But if comma is between digits with no space, treat as decimal
    const tokens = raw.trim().split(/[\s,;]+/).filter(t => t.length > 0);
    const nums = [];
    for (const t of tokens) {
        // Try to parse – allow both . and , as decimal
        const n = parseFloat(t.replace(',', '.'));
        if (isNaN(n)) return null; // error token
        nums.push(n);
    }
    return nums;
}

function round(n, dec = 6) {
    return parseFloat(n.toFixed(dec));
}

function fmt(n) {
    if (Math.abs(n) >= 1e9 || (Math.abs(n) < 0.0001 && n !== 0)) return n.toExponential(4);
    const s = parseFloat(n.toPrecision(10)).toString();
    return s;
}

function percentile(sorted, p) {
    const n = sorted.length;
    if (n === 0) return 0;
    const idx = (p / 100) * (n - 1);
    const low = Math.floor(idx);
    const high = Math.ceil(idx);
    if (low === high) return sorted[low];
    return sorted[low] + (sorted[high] - sorted[low]) * (idx - low);
}

function calculate() {
    const errEl = document.getElementById('errorBanner');
    errEl.style.display = 'none';
    const raw = document.getElementById('dataInput').value;
    if (!raw.trim()) { document.getElementById('resultPanel').classList.remove('visible'); return; }

    const nums = parseNumbers(raw);
    if (!nums || nums.length === 0) {
        errEl.textContent = 'Ungültige Eingabe. Bitte nur Zahlen eingeben, getrennt durch Komma, Semikolon, Leerzeichen oder Zeilenumbruch.';
        errEl.style.display = 'block';
        document.getElementById('resultPanel').classList.remove('visible');
        return;
    }

    const n = nums.length;
    const sorted = [...nums].sort((a, b) => a - b);
    const sum = nums.reduce((a, b) => a + b, 0);
    const mean = sum / n;
    const min = sorted[0];
    const max = sorted[n - 1];
    const range = max - min;

    // Median
    let median;
    if (n % 2 === 1) median = sorted[Math.floor(n / 2)];
    else median = (sorted[n / 2 - 1] + sorted[n / 2]) / 2;

    // Modus
    const freq = {};
    nums.forEach(v => { freq[v] = (freq[v] || 0) + 1; });
    const maxFreq = Math.max(...Object.values(freq));
    let modus;
    if (maxFreq === 1) {
        modus = '<span style="color:var(--muted);font-weight:600">Keiner (alle Werte einmalig)</span>';
    } else {
        const modes = Object.entries(freq).filter(([, f]) => f === maxFreq).map(([v]) => parseFloat(v));
        modus = modes.map(v => `${fmt(v)} (${maxFreq}×)`).join(', ');
    }

    // Varianz & Stddev (population)
    const varianz = nums.reduce((acc, v) => acc + (v - mean) ** 2, 0) / n;
    const stddev = Math.sqrt(varianz);

    // Sample variance & stddev
    const varianzS = n > 1 ? nums.reduce((acc, v) => acc + (v - mean) ** 2, 0) / (n - 1) : 0;
    const stddevS = Math.sqrt(varianzS);

    // Quartiles
    const q1 = percentile(sorted, 25);
    const q3 = percentile(sorted, 75);
    const iqr = q3 - q1;

    // Update DOM
    document.getElementById('sN').textContent = n;
    document.getElementById('sSum').textContent = fmt(sum);
    document.getElementById('sMin').textContent = fmt(min);
    document.getElementById('sMax').textContent = fmt(max);
    document.getElementById('sRange').textContent = fmt(range);
    document.getElementById('sMean').textContent = fmt(round(mean));
    document.getElementById('sMedian').textContent = fmt(round(median));
    document.getElementById('sModus').innerHTML = modus;
    document.getElementById('sVarianz').textContent = fmt(round(varianz));
    document.getElementById('sStddev').textContent = fmt(round(stddev));
    document.getElementById('sVarianzS').textContent = n > 1 ? fmt(round(varianzS)) : 'n/a (n=1)';
    document.getElementById('sStddevS').textContent = n > 1 ? fmt(round(stddevS)) : 'n/a (n=1)';
    document.getElementById('sQ1').textContent = fmt(round(q1));
    document.getElementById('sQ3').textContent = fmt(round(q3));
    document.getElementById('sIQR').textContent = fmt(round(iqr));

    // Sorted preview
    const preview = sorted.length > 50
        ? sorted.slice(0, 50).map(fmt).join(', ') + ` … (+${sorted.length - 50} weitere)`
        : sorted.map(fmt).join(', ');
    document.getElementById('sortedPreview').textContent = preview;

    // Bar chart (mini histogram)
    renderBarChart(sorted, min, max);

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

function renderBarChart(sorted, min, max) {
    const chart = document.getElementById('barChart');
    if (sorted.length < 2 || max === min) { chart.innerHTML = ''; return; }
    const bins = Math.min(20, sorted.length);
    const binSize = (max - min) / bins;
    const counts = new Array(bins).fill(0);
    sorted.forEach(v => {
        let b = Math.floor((v - min) / binSize);
        if (b >= bins) b = bins - 1;
        counts[b]++;
    });
    const maxCount = Math.max(...counts);
    chart.innerHTML = counts.map((c, i) => {
        const pct = maxCount > 0 ? Math.max(4, (c / maxCount) * 100) : 4;
        const low = fmt(round(min + i * binSize));
        const high = fmt(round(min + (i + 1) * binSize));
        return `<div class="bar" style="height:${pct}%" title="${low}–${high}: ${c}"></div>`;
    }).join('');
}

function clearAll() {
    document.getElementById('dataInput').value = '';
    document.getElementById('errorBanner').style.display = 'none';
    document.getElementById('resultPanel').classList.remove('visible');
}

function loadExample() {
    document.getElementById('dataInput').value = '12, 7, 3, 14, 6, 11, 5, 4, 9, 8, 13, 7, 6, 10, 7';
    if (liveMode) calculate();
}

let debounceTimer;
document.getElementById('dataInput').addEventListener('input', () => {
    if (!liveMode) return;
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(calculate, 300);
});
</script>

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

@endsection