@extends('layouts.app')
@section('title', 'Temperatur Rechner – Celsius Fahrenheit Kelvin umrechnen | kotsch.tech')
@section('meta_description', 'Temperatur umrechnen: Celsius in Fahrenheit, Kelvin, Réaumur und Rankine. Thermometer-Visualisierung, Referenzpunkte und Formeln. Kostenlos im Browser.')
@section('meta_extra')
<meta name="keywords" content="Temperatur umrechnen, Celsius Fahrenheit, Kelvin umrechnen, Fahrenheit Celsius, Temperaturrechner, Réaumur, Rankine">
@endsection
@section('content')
@include('tools._tool_base')
<style>
.temp-card { border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px 20px; background:var(--bg); transition:all 0.2s; cursor:pointer; }
.temp-card.source { border-color:var(--accent); background:var(--accent-soft); }
.temp-card:hover:not(.source) { border-color:var(--accent); }
.temp-unit { font-size:0.72rem; font-weight:800; text-transform:uppercase; letter-spacing:1px; color:var(--muted); margin-bottom:6px; }
.temp-val { font-size:1.8rem; font-weight:900; letter-spacing:-1px; color:var(--ink); font-family:'JetBrains Mono',monospace; margin-bottom:4px; }
.temp-formula { font-size:0.72rem; color:var(--muted); font-family:'JetBrains Mono',monospace; }
.thermo-wrap { display:flex; flex-direction:column; align-items:center; gap:6px; padding:16px; }
.thermo-bar { width:32px; height:240px; background:var(--line); border-radius:16px; position:relative; overflow:hidden; border:2px solid var(--line); }
.thermo-fill { position:absolute; bottom:0; left:0; right:0; border-radius:16px; transition:height 0.4s,background 0.4s; }
.thermo-bulb { width:44px; height:44px; border-radius:50%; margin-top:-4px; border:2px solid; transition:background 0.4s,border-color 0.4s; }
.thermo-label { font-size:0.75rem; font-weight:700; color:var(--muted); }
.ref-table { width:100%; border-collapse:collapse; font-size:0.82rem; }
.ref-table th { text-align:left; padding:8px 10px; border-bottom:2px solid var(--line); font-size:0.72rem; font-weight:700; text-transform:uppercase; color:var(--muted); }
.ref-table td { padding:8px 10px; border-bottom:1px solid var(--line); font-family:'JetBrains Mono',monospace; }
.ref-table tr:last-child td { border-bottom:none; }
.ref-table tr { cursor:pointer; }
.ref-table tr:hover { background:var(--accent-soft); }
</style>

<div class="tool-page">
<div class="tool-container">
    <div class="tool-header">
        <span class="t-tag"><i class="fas fa-thermometer-half"></i> Konverter</span>
        <h1 class="tool-h1">Temperatur<span>rechner.</span></h1>
        <p class="tool-sub">Celsius, Fahrenheit, Kelvin, Réaumur und Rankine – alle Einheiten auf einen Blick.</p>
    </div>

    <div class="t-panel">
        <div style="display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap">
            <div class="thermo-wrap" style="flex-shrink:0">
                <div class="thermo-label" id="thermo-top">100°C</div>
                <div class="thermo-bar" id="thermo-bar">
                    <div class="thermo-fill" id="thermo-fill"></div>
                </div>
                <div class="thermo-bulb" id="thermo-bulb"></div>
                <div class="thermo-label" id="thermo-bot">−40°C</div>
            </div>

            <div style="flex:1;min-width:240px">
                <div class="t-field" style="margin-bottom:14px">
                    <label class="t-label">Wert eingeben</label>
                    <input type="number" class="t-input" id="temp-input" placeholder="Temperatur" oninput="convert()" value="20" step="any" style="font-size:1.4rem;font-weight:700;font-family:'JetBrains Mono',monospace">
                </div>
                <div style="display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px">
                    <button class="t-btn ghost sm active" id="unit-C" onclick="setUnit('C',this)">°C Celsius</button>
                    <button class="t-btn ghost sm" id="unit-F" onclick="setUnit('F',this)">°F Fahrenheit</button>
                    <button class="t-btn ghost sm" id="unit-K" onclick="setUnit('K',this)">K Kelvin</button>
                    <button class="t-btn ghost sm" id="unit-Re" onclick="setUnit('Re',this)">°Ré Réaumur</button>
                    <button class="t-btn ghost sm" id="unit-Ra" onclick="setUnit('Ra',this)">°Ra Rankine</button>
                </div>
                <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px" id="result-grid">
                    <div class="temp-card source" id="card-C" onclick="setUnit('C',document.getElementById('unit-C'))">
                        <div class="temp-unit">Celsius (°C)</div>
                        <div class="temp-val" id="val-C">20</div>
                        <div class="temp-formula" id="form-C">Eingabewert</div>
                    </div>
                    <div class="temp-card" id="card-F" onclick="setUnit('F',document.getElementById('unit-F'))">
                        <div class="temp-unit">Fahrenheit (°F)</div>
                        <div class="temp-val" id="val-F">68</div>
                        <div class="temp-formula" id="form-F">°C × 9/5 + 32</div>
                    </div>
                    <div class="temp-card" id="card-K" onclick="setUnit('K',document.getElementById('unit-K'))">
                        <div class="temp-unit">Kelvin (K)</div>
                        <div class="temp-val" id="val-K">293.15</div>
                        <div class="temp-formula" id="form-K">°C + 273.15</div>
                    </div>
                    <div class="temp-card" id="card-Re" onclick="setUnit('Re',document.getElementById('unit-Re'))">
                        <div class="temp-unit">Réaumur (°Ré)</div>
                        <div class="temp-val" id="val-Re">16</div>
                        <div class="temp-formula" id="form-Re">°C × 4/5</div>
                    </div>
                    <div class="temp-card" id="card-Ra" onclick="setUnit('Ra',document.getElementById('unit-Ra'))">
                        <div class="temp-unit">Rankine (°Ra)</div>
                        <div class="temp-val" id="val-Ra">527.67</div>
                        <div class="temp-formula" id="form-Ra">(°C + 273.15) × 9/5</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="t-panel">
        <div class="t-panel-title"><i class="fas fa-bookmark"></i> Referenzpunkte <span style="font-size:0.78rem;font-weight:400;color:var(--muted)">(klicken zum Übernehmen)</span></div>
        <div style="overflow-x:auto">
            <table class="ref-table">
                <thead><tr><th>Bezeichnung</th><th>°C</th><th>°F</th><th>K</th><th>°Ré</th></tr></thead>
                <tbody>
                    <tr onclick="setRef(-273.15)"><td>❄️ Absoluter Nullpunkt</td><td>−273.15</td><td>−459.67</td><td>0</td><td>−218.52</td></tr>
                    <tr onclick="setRef(-40)"><td>🌡 C = F Kreuzung</td><td>−40</td><td>−40</td><td>233.15</td><td>−32</td></tr>
                    <tr onclick="setRef(0)"><td>🧊 Gefrierpunkt Wasser</td><td>0</td><td>32</td><td>273.15</td><td>0</td></tr>
                    <tr onclick="setRef(20)"><td>🏠 Zimmertemperatur</td><td>20</td><td>68</td><td>293.15</td><td>16</td></tr>
                    <tr onclick="setRef(37)"><td>🌡 Körpertemperatur</td><td>37</td><td>98.6</td><td>310.15</td><td>29.6</td></tr>
                    <tr onclick="setRef(100)"><td>💧 Siedepunkt Wasser</td><td>100</td><td>212</td><td>373.15</td><td>80</td></tr>
                    <tr onclick="setRef(1064)"><td>🥇 Schmelzpunkt Gold</td><td>1064</td><td>1947.2</td><td>1337.15</td><td>851.2</td></tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
@include('tools._ads_banner')
</div>

<script>
let sourceUnit = 'C';

const formulas = {
    C: { C:'Eingabewert', F:'°C × 9/5 + 32', K:'°C + 273.15', Re:'°C × 4/5', Ra:'(°C + 273.15) × 9/5' },
    F: { C:'(°F − 32) × 5/9', F:'Eingabewert', K:'(°F + 459.67) × 5/9', Re:'(°F − 32) × 4/9', Ra:'°F + 459.67' },
    K: { C:'K − 273.15', F:'K × 9/5 − 459.67', K:'Eingabewert', Re:'(K − 273.15) × 4/5', Ra:'K × 9/5' },
    Re: { C:'°Ré × 5/4', F:'°Ré × 9/4 + 32', K:'°Ré × 5/4 + 273.15', Re:'Eingabewert', Ra:'(°Ré × 5/4 + 273.15) × 9/5' },
    Ra: { C:'°Ra × 5/9 − 273.15', F:'°Ra − 459.67', K:'°Ra × 5/9', Re:'(°Ra × 5/9 − 273.15) × 4/5', Ra:'Eingabewert' },
};

function toCelsius(v, u) {
    switch(u) {
        case 'C':  return v;
        case 'F':  return (v-32)*5/9;
        case 'K':  return v-273.15;
        case 'Re': return v*5/4;
        case 'Ra': return v*5/9-273.15;
    }
}
function fromCelsius(c, u) {
    switch(u) {
        case 'C':  return c;
        case 'F':  return c*9/5+32;
        case 'K':  return c+273.15;
        case 'Re': return c*4/5;
        case 'Ra': return (c+273.15)*9/5;
    }
}

function fmt(n) {
    if (isNaN(n)) return '–';
    return parseFloat(n.toFixed(4)).toLocaleString('de-DE',{maximumFractionDigits:4});
}

function setUnit(unit, btn) {
    sourceUnit = unit;
    document.querySelectorAll('[id^="unit-"]').forEach(b => { b.style.background=''; b.style.borderColor=''; b.style.color=''; });
    btn.style.background='var(--accent)'; btn.style.borderColor='var(--accent)'; btn.style.color='#fff';
    convert();
}

function convert() {
    const raw = parseFloat(document.getElementById('temp-input').value);
    const celsius = isNaN(raw) ? NaN : toCelsius(raw, sourceUnit);

    ['C','F','K','Re','Ra'].forEach(u => {
        const res = isNaN(celsius) ? NaN : fromCelsius(celsius, u);
        document.getElementById('val-'+u).textContent = fmt(res);
        document.getElementById('form-'+u).textContent = formulas[sourceUnit][u];
        document.getElementById('card-'+u).className = 'temp-card' + (u===sourceUnit ? ' source' : '');
    });

    updateThermometer(celsius);
}

function updateThermometer(c) {
    const MIN=-40, MAX=120;
    const pct = Math.min(100, Math.max(0, (c-MIN)/(MAX-MIN)*100));
    let color;
    if (c < 0) color = '#3b82f6';
    else if (c < 20) color = '#06b6d4';
    else if (c < 37) color = '#10b981';
    else if (c < 60) color = '#f59e0b';
    else color = '#ef4444';
    document.getElementById('thermo-fill').style.height = pct+'%';
    document.getElementById('thermo-fill').style.background = color;
    document.getElementById('thermo-bulb').style.background = color;
    document.getElementById('thermo-bulb').style.borderColor = color;
}

function setRef(celsius) {
    sourceUnit = 'C';
    document.getElementById('temp-input').value = celsius;
    document.querySelectorAll('[id^="unit-"]').forEach(b => { b.style.background=''; b.style.borderColor=''; b.style.color=''; });
    const btn = document.getElementById('unit-C');
    btn.style.background='var(--accent)'; btn.style.borderColor='var(--accent)'; btn.style.color='#fff';
    convert();
}

document.getElementById('unit-C').style.background='var(--accent)';
document.getElementById('unit-C').style.borderColor='var(--accent)';
document.getElementById('unit-C').style.color='#fff';
convert();
</script>

@include('tools._seo_content', ['toolSlug' => 'temperatur', 'toolName' => 'Temperatur Umrechner'])

@endsection