@extends('layouts.app')
@section('title', 'Währungsrechner – Devisen umrechnen | kotsch.tech')
@section('meta_description', 'Währungsrechner kostenlos: EUR, USD, GBP, CHF, JPY und mehr umrechnen. Statische EZB-Referenzkurse vom 19.05.2026, keine Live-Kurse.')
@section('meta_extra')
<meta name="keywords" content="Währungsrechner, Währung umrechnen, Euro Dollar Rechner, Devisen Rechner, EUR USD Rechner, Wechselkurs Rechner, Geld umrechnen">
@endsection
@section('content')
<style>
    :root { --ink: #0f172a; --muted: #64748b; --line: #e2e8f0; --accent: #059669; }
    .tool-page { min-height: 100vh; background: linear-gradient(135deg, #ecfdf5 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(5,150,105,0.12); color: #065f46; 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); line-height: 1.7; margin: 0 0 28px; }
    .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; }
    .field label { display: block; font-weight: 700; margin-bottom: 8px; font-size: 0.9rem; }
    .currency-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: end; margin-bottom: 20px; }
    .currency-row select { width: 100%; min-height: 50px; border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; font: inherit; font-weight: 700; outline: 0; box-sizing: border-box; background: #fff; cursor: pointer; }
    .currency-row select:focus { border-color: var(--accent); outline: 4px solid rgba(5,150,105,0.12); }
    .swap-btn { min-height: 50px; min-width: 50px; border: 2px solid var(--line); border-radius: 12px; background: #fff; font-size: 1.3rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.18s; color: var(--accent); font-weight: 900; }
    .swap-btn:hover { border-color: var(--accent); background: rgba(5,150,105,0.06); transform: rotate(180deg); }
    .amount-input { width: 100%; min-height: 52px; border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; font: inherit; font-size: 1.1rem; font-weight: 700; outline: 0; box-sizing: border-box; margin-bottom: 20px; }
    .amount-input:focus { border-color: var(--accent); outline: 4px solid rgba(5,150,105,0.12); }
    .result-box { background: rgba(5,150,105,0.07); border: 2px solid rgba(5,150,105,0.2); border-radius: 14px; padding: 20px 22px; display: flex; flex-direction: column; gap: 4px; }
    .result-amount { font-size: 2rem; font-weight: 900; color: var(--accent); letter-spacing: -1px; }
    .result-meta { font-size: 0.82rem; color: var(--muted); font-weight: 600; }
    .quick-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
    .quick-table th { text-align: right; padding: 8px 6px; color: var(--muted); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; border-bottom: 2px solid var(--line); }
    .quick-table th:first-child { text-align: left; }
    .quick-table td { padding: 10px 6px; border-bottom: 1px solid var(--line); font-weight: 600; text-align: right; }
    .quick-table td:first-child { text-align: left; color: var(--muted); }
    .quick-table tr:last-child td { border-bottom: none; }
    .note { font-size: 0.78rem; color: var(--muted); margin-top: 14px; display: flex; align-items: flex-start; gap: 6px; line-height: 1.5; }
    .section-title { font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted); margin-bottom: 14px; }
    @media(max-width:480px){ .currency-row { grid-template-columns: 1fr auto 1fr; } }
</style>

<div class="tool-page"><div class="tool-container">
    <section style="margin-bottom:28px">
        <span class="tag">Finanzen</span>
        <h1 class="tool-h1">Währungsrechner.</h1>
        <p class="sub">Schnell und einfach zwischen EUR, USD, GBP, CHF und mehr umrechnen.</p>
    </section>

    <div class="panel">
        <div class="currency-row">
            <div>
                <label>Von</label>
                <select id="from-currency" onchange="calc()">
                    <option value="EUR">🇪🇺 EUR – Euro</option>
                    <option value="USD">🇺🇸 USD – US-Dollar</option>
                    <option value="GBP">🇬🇧 GBP – Britisches Pfund</option>
                    <option value="CHF">🇨🇭 CHF – Schweizer Franken</option>
                    <option value="JPY">🇯🇵 JPY – Japanischer Yen</option>
                    <option value="CNY">🇨🇳 CNY – Chinesischer Yuan</option>
                    <option value="AUD">🇦🇺 AUD – Australischer Dollar</option>
                    <option value="CAD">🇨🇦 CAD – Kanadischer Dollar</option>
                    <option value="DKK">🇩🇰 DKK – Dänische Krone</option>
                    <option value="SEK">🇸🇪 SEK – Schwedische Krone</option>
                    <option value="NOK">🇳🇴 NOK – Norwegische Krone</option>
                    <option value="PLN">🇵🇱 PLN – Polnischer Złoty</option>
                </select>
            </div>
            <div>
                <label style="visibility:hidden">–</label>
                <button class="swap-btn" onclick="swapCurrencies()" title="Tauschen">⇄</button>
            </div>
            <div>
                <label>Nach</label>
                <select id="to-currency" onchange="calc()">
                    <option value="EUR">🇪🇺 EUR – Euro</option>
                    <option value="USD" selected>🇺🇸 USD – US-Dollar</option>
                    <option value="GBP">🇬🇧 GBP – Britisches Pfund</option>
                    <option value="CHF">🇨🇭 CHF – Schweizer Franken</option>
                    <option value="JPY">🇯🇵 JPY – Japanischer Yen</option>
                    <option value="CNY">🇨🇳 CNY – Chinesischer Yuan</option>
                    <option value="AUD">🇦🇺 AUD – Australischer Dollar</option>
                    <option value="CAD">🇨🇦 CAD – Kanadischer Dollar</option>
                    <option value="DKK">🇩🇰 DKK – Dänische Krone</option>
                    <option value="SEK">🇸🇪 SEK – Schwedische Krone</option>
                    <option value="NOK">🇳🇴 NOK – Norwegische Krone</option>
                    <option value="PLN">🇵🇱 PLN – Polnischer Złoty</option>
                </select>
            </div>
        </div>

        <label style="display:block;font-weight:700;margin-bottom:8px;font-size:0.9rem">Betrag</label>
        <input type="number" class="amount-input" id="amount" placeholder="z.B. 100" value="100" min="0" step="any" oninput="calc()">

        <div class="result-box">
            <div class="result-meta" id="res-rate">1 EUR = 1,09 USD</div>
            <div class="result-amount" id="res-amount">109,00 USD</div>
        </div>

        <div class="note">ℹ Statische EZB-Referenzkurse vom 19.05.2026. Keine Live-Kurse, keine Gewähr und nicht für Transaktionen gedacht.</div>
    </div>

    <div class="panel">
        <div class="section-title">Schnellübersicht</div>
        <table class="quick-table" id="quick-table">
            <thead>
                <tr>
                    <th id="qt-from-head">Betrag</th>
                    <th id="qt-to-head">Ergebnis</th>
                </tr>
            </thead>
            <tbody id="qt-body"></tbody>
        </table>
    </div>
</div>@include('tools._ads_banner')</div>

<script>
    // Wechselkurse relativ zu EUR (EZB-Referenzkurse 19.05.2026)
    const rates = {
        EUR: 1,
        USD: 1.1620,
        GBP: 0.86671,
        CHF: 0.9150,
        JPY: 184.89,
        CNY: 7.9087,
        AUD: 1.6327,
        CAD: 1.5985,
        DKK: 7.4731,
        SEK: 10.9090,
        NOK: 10.7635,
        PLN: 4.2435
    };

    const symbols = { EUR:'€', USD:'$', GBP:'£', CHF:'Fr', JPY:'¥', CNY:'¥', AUD:'A$', CAD:'C$', DKK:'kr', SEK:'kr', NOK:'kr', PLN:'zł' };

    function toEur(amount, currency) { return amount / rates[currency]; }
    function fromEur(amount, currency) { return amount * rates[currency]; }

    function fmtAmt(val, currency) {
        const decimals = ['JPY','CNY','DKK','SEK','NOK'].includes(currency) ? 0 : 2;
        return val.toLocaleString('de-DE', { minimumFractionDigits: decimals, maximumFractionDigits: decimals }) + ' ' + currency;
    }

    function calc() {
        const from = document.getElementById('from-currency').value;
        const to = document.getElementById('to-currency').value;
        const amount = parseFloat(document.getElementById('amount').value) || 0;

        const inEur = toEur(amount, from);
        const result = fromEur(inEur, to);

        const rateDisplay = fromEur(toEur(1, from), to);
        document.getElementById('res-rate').textContent = '1 ' + from + ' = ' + fmtAmt(rateDisplay, to);
        document.getElementById('res-amount').textContent = fmtAmt(result, to);

        // Quick table
        const amounts = [1, 10, 50, 100, 1000];
        const tbody = document.getElementById('qt-body');
        document.getElementById('qt-from-head').textContent = from;
        document.getElementById('qt-to-head').textContent = to;
        tbody.innerHTML = amounts.map(a => {
            const converted = fromEur(toEur(a, from), to);
            return `<tr><td>${fmtAmt(a, from)}</td><td>${fmtAmt(converted, to)}</td></tr>`;
        }).join('');
    }

    function swapCurrencies() {
        const from = document.getElementById('from-currency');
        const to = document.getElementById('to-currency');
        const tmp = from.value;
        from.value = to.value;
        to.value = tmp;
        calc();
    }

    calc();
</script>

@include('tools._seo_content', ['toolSlug' => 'waehrungsrechner', 'toolName' => 'Währungsrechner'])

@endsection