@extends('layouts.app')
@section('title', 'Dateigröße umrechnen – KB MB GB TB Konverter | kotsch.tech')
@section('meta_description', 'Dateigröße Konverter: Bytes, KB, MB, GB, TB und PB umrechnen. IEC (1024) und SI (1000) Einheiten im Vergleich. Praktische Beispiele und Download-Rechner.')
@section('meta_extra')
<meta name="keywords" content="Dateigröße umrechnen, MB in GB, KB in MB, Byte Konverter, Gigabyte Megabyte, Dateigrößen Rechner, IEC SI">
@endsection
@section('content')
@include('tools._tool_base')
<style>
.conv-table { width:100%; border-collapse:collapse; font-size:0.85rem; }
.conv-table th { text-align:left; padding:8px 12px; border-bottom:2px solid var(--line); font-size:0.72rem; font-weight:700; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.conv-table td { padding:10px 12px; border-bottom:1px solid var(--line); font-family:'JetBrains Mono',monospace; font-variant-numeric:tabular-nums; }
.conv-table tr:last-child td { border-bottom:none; }
.conv-table .unit-lbl { font-weight:800; color:var(--ink); }
.conv-table .unit-abbr { font-size:0.75rem; color:var(--muted); font-weight:600; }
.conv-table .iec-val { font-weight:700; color:#2563eb; }
.conv-table .si-val { font-weight:700; color:#16a34a; }
.conv-table tr.source-row td { background:var(--accent-soft); }
.ex-card { border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 14px; cursor:pointer; transition:all 0.15s; background:var(--card); }
.ex-card:hover { border-color:var(--accent); }
.ex-icon { font-size:1.4rem; margin-bottom:4px; }
.ex-name { font-size:0.82rem; font-weight:700; color:var(--ink); }
.ex-size { font-size:0.75rem; color:var(--muted); font-weight:600; }
</style>

<div class="tool-page">
<div class="tool-container">
    <div class="tool-header">
        <span class="t-tag"><i class="fas fa-hdd"></i> Konverter</span>
        <h1 class="tool-h1">Datei<span>größe.</span></h1>
        <p class="tool-sub">Bytes, KB, MB, GB, TB – mit IEC (1024) und SI (1000) Einheiten im direkten Vergleich.</p>
    </div>

    <div class="t-panel">
        <div class="t-grid-2" style="gap:12px;margin-bottom:16px">
            <div class="t-field">
                <label class="t-label">Größe eingeben</label>
                <input type="number" class="t-input" id="size-input" placeholder="Wert" value="1" oninput="convert()" min="0" step="any" style="font-size:1.4rem;font-weight:700;font-family:'JetBrains Mono',monospace">
            </div>
            <div class="t-field">
                <label class="t-label">Einheit</label>
                <select class="t-select" id="unit-select" onchange="convert()" style="font-size:1rem;font-weight:700">
                    <option value="0">Bytes (B)</option>
                    <option value="1" selected>Kilobyte (KB / KiB)</option>
                    <option value="2">Megabyte (MB / MiB)</option>
                    <option value="3">Gigabyte (GB / GiB)</option>
                    <option value="4">Terabyte (TB / TiB)</option>
                    <option value="5">Petabyte (PB / PiB)</option>
                </select>
            </div>
        </div>
        <div style="overflow-x:auto">
            <table class="conv-table">
                <thead>
                    <tr>
                        <th>Einheit</th>
                        <th style="color:#2563eb">IEC (1024-Basis)</th>
                        <th style="color:#16a34a">SI (1000-Basis)</th>
                        <th>Differenz</th>
                    </tr>
                </thead>
                <tbody id="conv-body"></tbody>
            </table>
        </div>
    </div>

    <div class="t-panel">
        <div class="t-panel-title"><i class="fas fa-calculator"></i> Download-Zeitrechner</div>
        <div class="t-grid-3" style="gap:10px;margin-bottom:10px">
            <div class="t-field">
                <label class="t-label">Dateigröße (MB)</label>
                <input type="number" class="t-input" id="dl-size" value="700" oninput="calcDownload()">
            </div>
            <div class="t-field">
                <label class="t-label">Verbindung (Mbit/s)</label>
                <select class="t-select" id="dl-speed" onchange="calcDownload()">
                    <option value="1">DSL 1 Mbit/s</option>
                    <option value="16">DSL 16 Mbit/s</option>
                    <option value="50">VDSL 50 Mbit/s</option>
                    <option value="100" selected>100 Mbit/s</option>
                    <option value="250">250 Mbit/s</option>
                    <option value="1000">Gigabit 1000 Mbit/s</option>
                </select>
            </div>
            <div class="t-stat-card" style="justify-content:center;align-items:center;display:flex;flex-direction:column">
                <div class="t-stat-val" id="dl-result">–</div>
                <div class="t-stat-label">Downloadzeit</div>
            </div>
        </div>
    </div>

    <div class="t-panel">
        <div class="t-panel-title"><i class="fas fa-folder"></i> Typische Dateigrößen</div>
        <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px">
            <div class="ex-card" onclick="setExample(5,'MB')"><div class="ex-icon">🎵</div><div class="ex-name">MP3-Song</div><div class="ex-size">~5 MB</div></div>
            <div class="ex-card" onclick="setExample(4,'MB')"><div class="ex-icon">📷</div><div class="ex-name">JPEG-Foto</div><div class="ex-size">~4 MB</div></div>
            <div class="ex-card" onclick="setExample(25,'MB')"><div class="ex-icon">📄</div><div class="ex-name">PDF-Dokument</div><div class="ex-size">~25 MB</div></div>
            <div class="ex-card" onclick="setExample(700,'MB')"><div class="ex-icon">💿</div><div class="ex-name">CD-Kapazität</div><div class="ex-size">~700 MB</div></div>
            <div class="ex-card" onclick="setExample(4700,'MB')"><div class="ex-icon">📀</div><div class="ex-name">DVD</div><div class="ex-size">~4.7 GB</div></div>
            <div class="ex-card" onclick="setExample(1500,'MB')"><div class="ex-icon">🎬</div><div class="ex-name">HD-Film</div><div class="ex-size">~1.5 GB</div></div>
            <div class="ex-card" onclick="setExample(50000,'MB')"><div class="ex-icon">🎮</div><div class="ex-name">AAA-Spiel</div><div class="ex-size">~50 GB</div></div>
            <div class="ex-card" onclick="setExample(1000000,'MB')"><div class="ex-icon">💾</div><div class="ex-name">Festplatte 1 TB</div><div class="ex-size">~1 TB</div></div>
        </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-info-circle"></i> <strong>IEC vs. SI:</strong> IEC nutzt 1024 (Kibibyte), SI nutzt 1000 (Kilobyte). Festplattenhersteller nutzen SI → Platten erscheinen im OS kleiner als angegeben.</div>
    </div>
</div>
@include('tools._ads_banner')
</div>

<script>
const units = ['Bytes (B)', 'Kilobyte (KB)', 'Megabyte (MB)', 'Gigabyte (GB)', 'Terabyte (TB)', 'Petabyte (PB)'];
const abbrs = ['B', 'KB', 'MB', 'GB', 'TB', 'PB'];

function fmtNum(n) {
    if (n === 0) return '0';
    if (n < 0.00001) return n.toExponential(4);
    if (n >= 1e15) return n.toExponential(4);
    return n.toLocaleString('de-DE', {maximumFractionDigits:6});
}

function convert() {
    const val = parseFloat(document.getElementById('size-input').value);
    const idx = parseInt(document.getElementById('unit-select').value);
    if (isNaN(val)) { document.getElementById('conv-body').innerHTML=''; return; }

    const bytesIEC = val * Math.pow(1024, idx);
    const bytesSI = val * Math.pow(1000, idx);

    let html = '';
    for (let i=0;i<6;i++) {
        const iec = bytesIEC / Math.pow(1024, i);
        const si = bytesSI / Math.pow(1000, i);
        const diff = Math.abs(iec-si);
        const diffPct = si > 0 ? (diff/si*100).toFixed(2)+'%' : '–';
        const rowClass = i===idx ? ' class="source-row"' : '';
        html += `<tr${rowClass}><td><span class="unit-lbl">${units[i]}</span> <span class="unit-abbr">${abbrs[i]}</span></td><td class="iec-val">${fmtNum(iec)}</td><td class="si-val">${fmtNum(si)}</td><td style="color:var(--muted);font-size:0.78rem">${i>0?diffPct:'–'}</td></tr>`;
    }
    document.getElementById('conv-body').innerHTML = html;
    calcDownload();
}

function calcDownload() {
    const mb = parseFloat(document.getElementById('dl-size').value)||0;
    const mbits = parseFloat(document.getElementById('dl-speed').value)||100;
    const secs = (mb * 8) / mbits;
    let result;
    if (secs < 60) result = Math.round(secs) + ' Sek.';
    else if (secs < 3600) result = Math.floor(secs/60) + ' Min. ' + Math.round(secs%60) + ' Sek.';
    else result = Math.floor(secs/3600) + ' Std. ' + Math.floor((secs%3600)/60) + ' Min.';
    document.getElementById('dl-result').textContent = result;
}

const unitNames = {'MB':2,'GB':3,'TB':4};
function setExample(val, unit) {
    document.getElementById('size-input').value = val;
    document.getElementById('unit-select').value = unitNames[unit]||2;
    convert();
}

convert();
</script>

@include('tools._seo_content', ['toolSlug' => 'dateigroesse', 'toolName' => 'Dateigröße Umrechner'])

@endsection