@extends('layouts.app')
@section('title', 'Einheiten Umrechner – Länge, Gewicht, Temperatur, Geschwindigkeit | kotsch.tech')
@section('meta_description', 'Einheiten Umrechner online: Meilen in km, Zoll in cm, Fahrenheit in Celsius, kg in Pfund, m/s in km/h und mehr. Live umrechnen, kostenlos.')
@section('meta_extra')
<meta name="keywords" content="Einheiten Umrechner, Meilen km, Fahrenheit Celsius, kg Pfund, Geschwindigkeit umrechnen, Volumen umrechnen, Daten umrechnen">
@endsection
@section('content')
@include('tools._tool_base')
<style>
.swap-btn { min-height:52px; min-width:52px; border:2px solid var(--line); border-radius:var(--radius-md); background:var(--card); cursor:pointer; font-size:1.2rem; display:flex; align-items:center; justify-content:center; transition:all 0.15s; }
.swap-btn:hover { border-color:var(--accent); color:var(--accent); }
.conv-row { display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:end; margin-bottom:14px; }
@media(max-width:600px){ .conv-row { grid-template-columns:1fr; } }
.result-box { background:var(--accent-soft); border:1px solid rgba(16,185,129,0.2); border-radius:var(--radius-md); padding:16px 18px; margin-top:4px; }
.result-val { font-size:1.5rem; font-weight:900; letter-spacing:-1px; color:var(--accent); }
</style>

<div class="tool-page">
<div class="tool-container">
    <div class="tool-header">
        <span class="t-tag"><i class="fas fa-ruler-combined"></i> Rechner</span>
        <h1 class="tool-h1">Einheiten<span>umrechner.</span></h1>
        <p class="tool-sub">Länge, Gewicht, Temperatur, Fläche, Volumen und Geschwindigkeit – live umrechnen.</p>
    </div>

    <div class="t-panel">
        <div class="t-tabs" id="cat-tabs">
            <button class="t-tab active" onclick="showCat('length',this)">Länge</button>
            <button class="t-tab" onclick="showCat('weight',this)">Gewicht</button>
            <button class="t-tab" onclick="showCat('temp',this)">Temperatur</button>
            <button class="t-tab" onclick="showCat('area',this)">Fläche</button>
            <button class="t-tab" onclick="showCat('volume',this)">Volumen</button>
            <button class="t-tab" onclick="showCat('speed',this)">Geschwindigkeit</button>
        </div>

        <div class="t-field">
            <label class="t-label">Wert</label>
            <input type="number" class="t-input" id="val" value="1" oninput="convert()">
        </div>

        <div class="conv-row">
            <div class="t-field" style="margin:0">
                <label class="t-label">Von</label>
                <select class="t-select" id="from" onchange="convert()"></select>
            </div>
            <button class="swap-btn" onclick="swap()">⇄</button>
            <div class="t-field" style="margin:0">
                <label class="t-label">Nach</label>
                <select class="t-select" id="to" onchange="convert()"></select>
            </div>
        </div>

        <div class="result-box">
            <div class="result-val" id="result">–</div>
            <div class="t-result-lbl" id="result-lbl"></div>
        </div>
    </div>
</div>
@include('tools._ads_banner')
</div>

<script>
const CATS = {
    length: {
        label:'Länge',
        units:{m:1,km:1000,cm:0.01,mm:0.001,mi:1609.344,yd:0.9144,ft:0.3048,in:0.0254,nm:1852},
        labels:{m:'Meter (m)',km:'Kilometer (km)',cm:'Zentimeter (cm)',mm:'Millimeter (mm)',mi:'Meilen (mi)',yd:'Yard (yd)',ft:'Fuß (ft)',in:'Zoll (in)',nm:'Seemeile (nm)'}
    },
    weight:{
        label:'Gewicht',
        units:{kg:1,g:0.001,mg:0.000001,lb:0.453592,oz:0.0283495,t:1000,st:6.35029},
        labels:{kg:'Kilogramm (kg)',g:'Gramm (g)',mg:'Milligramm (mg)',lb:'Pfund (lb)',oz:'Unzen (oz)',t:'Tonnen (t)',st:'Stone (st)'}
    },
    temp:{label:'Temperatur'},
    area:{
        label:'Fläche',
        units:{m2:1,km2:1e6,ha:1e4,cm2:0.0001,ft2:0.092903,ac:4046.86,mi2:2.59e6},
        labels:{m2:'m²',km2:'km²',ha:'Hektar (ha)',cm2:'cm²',ft2:'ft²',ac:'Acre',mi2:'mi²'}
    },
    volume:{
        label:'Volumen',
        units:{l:1,ml:0.001,cl:0.01,m3:1000,ft3:28.3168,gal:3.78541,pt:0.473176,cup:0.236588},
        labels:{l:'Liter (l)',ml:'Milliliter (ml)',cl:'Centiliter (cl)',m3:'Kubikmeter (m³)',ft3:'Kubikfuß (ft³)',gal:'Gallone (gal)',pt:'Pint (pt)',cup:'Tasse (cup)'}
    },
    speed:{
        label:'Geschwindigkeit',
        units:{'km/h':1,'m/s':3.6,'mph':1.60934,'kn':1.852,'ft/s':1.09728},
        labels:{'km/h':'km/h','m/s':'m/s','mph':'mph','kn':'Knoten (kn)','ft/s':'ft/s'}
    }
};
const TEMP_LABELS={c:'Celsius (°C)',f:'Fahrenheit (°F)',k:'Kelvin (K)'};

let currentCat='length';

function populateSelects(cat){
    const from=document.getElementById('from'),to=document.getElementById('to');
    from.innerHTML=''; to.innerHTML='';
    if(cat==='temp'){
        Object.entries(TEMP_LABELS).forEach(([k,v],i)=>{
            from.innerHTML+=`<option value="${k}"${i===0?' selected':''}>${v}</option>`;
            to.innerHTML+=`<option value="${k}"${i===1?' selected':''}>${v}</option>`;
        });
    } else {
        const c=CATS[cat];
        Object.keys(c.units).forEach((k,i)=>{
            from.innerHTML+=`<option value="${k}"${i===0?' selected':''}>${c.labels[k]}</option>`;
            to.innerHTML+=`<option value="${k}"${i===1?' selected':''}>${c.labels[k]}</option>`;
        });
    }
}

function showCat(cat,btn){
    currentCat=cat;
    document.querySelectorAll('.t-tab').forEach(b=>b.classList.remove('active'));
    btn.classList.add('active');
    populateSelects(cat);
    convert();
}

function toC(v,u){ if(u==='c')return v; if(u==='f')return(v-32)*5/9; return v-273.15; }
function fromC(v,u){ if(u==='c')return v; if(u==='f')return v*9/5+32; return v+273.15; }

function convert(){
    const v=parseFloat(document.getElementById('val').value);
    const f=document.getElementById('from').value,t=document.getElementById('to').value;
    if(isNaN(v)){document.getElementById('result').textContent='–';return;}
    let res;
    if(currentCat==='temp'){
        res=fromC(toC(v,f),t);
        const units={c:'°C',f:'°F',k:'K'};
        document.getElementById('result').textContent=res.toLocaleString('de-DE',{maximumFractionDigits:4})+' '+units[t];
        document.getElementById('result-lbl').textContent=`${v} ${units[f]} = ${res.toLocaleString('de-DE',{maximumFractionDigits:4})} ${units[t]}`;
    } else {
        const units=CATS[currentCat].units;
        res=v*units[f]/units[t];
        document.getElementById('result').textContent=res.toLocaleString('de-DE',{maximumFractionDigits:6})+' '+t;
        document.getElementById('result-lbl').textContent=`${v} ${f} = ${res.toLocaleString('de-DE',{maximumFractionDigits:6})} ${t}`;
    }
}

function swap(){
    const from=document.getElementById('from'),to=document.getElementById('to');
    const tmp=from.value; from.value=to.value; to.value=tmp;
    convert();
}

populateSelects('length');
convert();
</script>

@include('tools._seo_content', ['toolSlug' => 'einheiten-rechner', 'toolName' => 'Einheiten Umrechner'])

@endsection