@extends('layouts.app')
@section('title', 'Wasserrechner – Täglichen Wasserbedarf berechnen | kotsch.tech')
@section('meta_description', 'Wasserrechner kostenlos: Wie viel Wasser pro Tag sollte ich trinken? Berechne deinen individuellen Wasserbedarf nach Gewicht, Aktivität und Klima.')
@section('meta_extra')
<meta name="keywords" content="Wasserrechner, Wasserbedarf berechnen, wie viel Wasser trinken, Trinkmenge berechnen, Flüssigkeitsbedarf, Wassertrinkrechner, Tagesmenge Wasser">
@endsection
@section('content')
<style>
    :root { --ink: #0f172a; --muted: #64748b; --line: #e2e8f0; --accent: #0891b2; }
    .tool-page { min-height: 100vh; background: linear-gradient(135deg, #ecfeff 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(8,145,178,0.12); color: #0e7490; 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; }
    .section-label { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted); margin-bottom: 14px; }
    .field label { display: block; font-weight: 700; margin-bottom: 8px; font-size: 0.9rem; }
    .field input[type="number"] { width: 100%; min-height: 50px; border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; font: inherit; font-size: 1rem; outline: 0; box-sizing: border-box; margin-bottom: 20px; }
    .field input[type="number"]:focus { border-color: var(--accent); outline: 4px solid rgba(8,145,178,0.12); }
    .radio-group { display: flex; flex-direction: column; gap: 9px; margin-bottom: 20px; }
    .radio-opt { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 2px solid var(--line); border-radius: 12px; cursor: pointer; transition: all 0.18s; }
    .radio-opt:has(input:checked) { border-color: var(--accent); background: rgba(8,145,178,0.06); }
    .radio-opt input[type="radio"] { accent-color: var(--accent); width: 17px; height: 17px; flex-shrink: 0; }
    .radio-opt-text { font-weight: 700; font-size: 0.9rem; }
    .radio-opt-sub { font-size: 0.78rem; color: var(--muted); font-weight: 600; }
    .result-area { display: flex; gap: 24px; align-items: center; }
    .glass-wrap { flex-shrink: 0; position: relative; width: 70px; height: 120px; }
    .glass-svg { width: 70px; height: 120px; }
    .glass-water { transition: height 1s cubic-bezier(0.4,0,0.2,1), y 1s cubic-bezier(0.4,0,0.2,1); }
    .result-info { flex: 1; }
    .result-liters { font-size: 2.8rem; font-weight: 900; color: var(--accent); letter-spacing: -2px; line-height: 1; }
    .result-unit { font-size: 1rem; font-weight: 700; color: var(--muted); }
    .result-glasses { font-size: 1.05rem; font-weight: 700; color: var(--ink); margin-top: 6px; }
    .result-glasses span { color: var(--accent); font-weight: 900; }
    .placeholder { color: var(--muted); font-size: 0.93rem; padding: 10px 0; }
    .tips-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
    .tips-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.9rem; line-height: 1.5; padding: 11px 14px; border-radius: 11px; background: #f8fafc; border: 1px solid var(--line); }
    .tips-list li .tip-icon { font-size: 1.1rem; flex-shrink: 0; }
    .tips-list li strong { color: var(--ink); font-weight: 800; }
    @media(max-width:480px){ .result-area { flex-direction: column; align-items: flex-start; } }
</style>

<div class="tool-page"><div class="tool-container">
    <section style="margin-bottom:28px">
        <span class="tag">Gesundheit</span>
        <h1 class="tool-h1">Wasserrechner.</h1>
        <p class="sub">Wie viel solltest du täglich trinken? Berechne deinen persönlichen Wasserbedarf.</p>
    </section>

    <div class="panel">
        <div class="field">
            <label>Körpergewicht (kg)</label>
            <input type="number" id="weight" placeholder="z.B. 75" min="20" max="300" oninput="calc()">
        </div>

        <div class="section-label">Aktivitätslevel</div>
        <div class="radio-group">
            <label class="radio-opt">
                <input type="radio" name="activity" value="1.0" checked onchange="calc()">
                <div><div class="radio-opt-text">Sitzend</div><div class="radio-opt-sub">Überwiegend Büroarbeit, wenig Bewegung</div></div>
            </label>
            <label class="radio-opt">
                <input type="radio" name="activity" value="1.3" onchange="calc()">
                <div><div class="radio-opt-text">Moderat aktiv</div><div class="radio-opt-sub">Regelmäßige Bewegung, 3–4× Sport pro Woche</div></div>
            </label>
            <label class="radio-opt">
                <input type="radio" name="activity" value="1.6" onchange="calc()">
                <div><div class="radio-opt-text">Sehr aktiv</div><div class="radio-opt-sub">Täglicher Sport, körperliche Arbeit</div></div>
            </label>
        </div>

        <div class="section-label">Klima</div>
        <div class="radio-group">
            <label class="radio-opt">
                <input type="radio" name="climate" value="0" checked onchange="calc()">
                <div><div class="radio-opt-text">Gemäßigt</div><div class="radio-opt-sub">Mitteleuropäisches Wetter</div></div>
            </label>
            <label class="radio-opt">
                <input type="radio" name="climate" value="0.5" onchange="calc()">
                <div><div class="radio-opt-text">Heiß / schwüles Klima</div><div class="radio-opt-sub">Mehr als 28 °C, hohe Luftfeuchtigkeit</div></div>
            </label>
        </div>
        <div class="t-info" style="margin-top:14px">Nur grobe Trinkmengen-Orientierung. Kein medizinischer Rat; bei Herz-/Nierenproblemen, Medikamenten, Schwangerschaft, Krankheit oder starkem Sport Fachpersonal fragen.</div>
    </div>

    <div class="panel">
        <div class="section-label">Empfehlung</div>
        <div class="result-area">
            <div class="glass-wrap">
                <svg class="glass-svg" viewBox="0 0 70 120" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <!-- glass outline -->
                    <path d="M10 10 L18 110 H52 L60 10 Z" fill="#f0f9ff" stroke="#bae6fd" stroke-width="2.5" stroke-linejoin="round"/>
                    <!-- water fill (clipped inside glass) -->
                    <clipPath id="glass-clip">
                        <path d="M10.5 10.5 L18.3 109 H51.7 L59.5 10.5 Z"/>
                    </clipPath>
                    <rect id="water-rect" x="10" y="90" width="50" height="20" fill="#38bdf8" opacity="0.7" clip-path="url(#glass-clip)">
                        <animate attributeName="opacity" values="0.65;0.8;0.65" dur="3s" repeatCount="indefinite"/>
                    </rect>
                    <!-- ripple wave -->
                    <path id="water-wave" d="M10 90 Q20 87 35 90 Q50 93 60 90" stroke="#7dd3fc" stroke-width="1.5" fill="none" clip-path="url(#glass-clip)">
                        <animate attributeName="d" values="M10 90 Q20 87 35 90 Q50 93 60 90;M10 90 Q20 93 35 90 Q50 87 60 90;M10 90 Q20 87 35 90 Q50 93 60 90" dur="2s" repeatCount="indefinite"/>
                    </path>
                </svg>
            </div>
            <div class="result-info" id="result-info">
                <div class="placeholder">Bitte Gewicht eingeben …</div>
            </div>
        </div>
    </div>

    <div class="panel">
        <div class="section-label">Trinktipps</div>
        <ul class="tips-list">
            <li><span class="tip-icon">🌅</span><div><strong>Morgens als erstes</strong> ein großes Glas Wasser trinken – nach dem Schlaf ist der Körper dehydriert.</div></li>
            <li><span class="tip-icon">🍽</span><div><strong>Vor jeder Mahlzeit</strong> ein Glas Wasser trinken hilft bei der Verdauung und sättigt.</div></li>
            <li><span class="tip-icon">🏃</span><div><strong>Beim Sport</strong> alle 20 Minuten trinken, auch wenn du noch keinen Durst verspürst.</div></li>
            <li><span class="tip-icon">🌡</span><div><strong>Bei Hitze, Krankheit oder Alkohol</strong> den Bedarf um 0,5–1 Liter erhöhen.</div></li>
            <li><span class="tip-icon">📱</span><div><strong>Trink-Erinnerungen</strong> auf dem Smartphone helfen, die Tagesmenge einzuhalten.</div></li>
        </ul>
    </div>
</div>@include('tools._ads_banner')</div>

<script>
    function calc() {
        const weight = parseFloat(document.getElementById('weight').value);
        const activity = parseFloat(document.querySelector('input[name="activity"]:checked').value);
        const climate = parseFloat(document.querySelector('input[name="climate"]:checked').value);

        if (!weight || weight < 10) {
            document.getElementById('result-info').innerHTML = '<div class="placeholder">Bitte Gewicht eingeben …</div>';
            setGlassFill(0);
            return;
        }

        // Base: 35ml per kg, adjusted by activity and climate
        const liters = Math.round(((weight * 0.035 * activity) + climate) * 10) / 10;
        const glasses = Math.round(liters / 0.2);

        document.getElementById('result-info').innerHTML = `
            <div class="result-liters">${liters.toLocaleString('de-DE', {minimumFractionDigits:1})} <span class="result-unit">Liter</span></div>
            <div class="result-glasses">= <span>${glasses}</span> Gläser à 200 ml pro Tag</div>
        `;

        // Glass animation: 1.5L = ~30%, 4L = ~95%
        const fillPct = Math.min(Math.max((liters - 1) / 3, 0.15), 0.95);
        setGlassFill(fillPct);
    }

    function setGlassFill(pct) {
        const rect = document.getElementById('water-rect');
        const wave = document.getElementById('water-wave');
        // Glass goes from y=10 to y=110 (100px height)
        const glassH = 100;
        const fillH = glassH * pct;
        const yPos = 110 - fillH;
        rect.setAttribute('y', yPos);
        rect.setAttribute('height', fillH + 10);
        const waveY = yPos;
        wave.setAttribute('d', `M10 ${waveY} Q20 ${waveY-3} 35 ${waveY} Q50 ${waveY+3} 60 ${waveY}`);
        // Update wave animation
        wave.querySelector('animate').setAttribute('values',
            `M10 ${waveY} Q20 ${waveY-3} 35 ${waveY} Q50 ${waveY+3} 60 ${waveY};M10 ${waveY} Q20 ${waveY+3} 35 ${waveY} Q50 ${waveY-3} 60 ${waveY};M10 ${waveY} Q20 ${waveY-3} 35 ${waveY} Q50 ${waveY+3} 60 ${waveY}`
        );
    }

    // Trigger calc on radio change
    document.querySelectorAll('input[type="radio"]').forEach(r => r.addEventListener('change', calc));
</script>

@include('tools._seo_content', ['toolSlug' => 'wasserrechner', 'toolName' => 'Wasserrechner'])

@endsection