@extends('layouts.app')
@section('title', 'Alter Rechner – Wie alt bin ich? Geburtsdatum berechnen | kotsch.tech')
@section('meta_description', 'Alter Rechner online: Wie alt bin ich heute? Geburtsdatum eingeben – genaues Alter in Jahren, Monaten, Tagen, Stunden. Plus Sternzeichen und Generation.')
@section('meta_extra')
<meta name="keywords" content="Alter Rechner, wie alt bin ich, Alter berechnen, Geburtsdatum Rechner, Alter in Tagen, Geburtstag Rechner, Sternzeichen, Generation">
@endsection
@section('content')
@include('tools._tool_base')

<div class="tool-page">
<div class="tool-container">
    <div class="tool-header">
        <span class="t-tag"><i class="fas fa-birthday-cake"></i> Rechner</span>
        <h1 class="tool-h1">Wie alt<br><span>bin ich?</span></h1>
        <p class="tool-sub">Gib dein Geburtsdatum ein – berechne dein genaues Alter und mehr.</p>
    </div>

    <div class="t-panel">
        <div class="t-grid-2">
            <div class="t-field">
                <label class="t-label">Geburtsdatum</label>
                <input type="date" class="t-input" id="bday" onchange="calc()">
            </div>
            <div class="t-field">
                <label class="t-label">Berechnen bis (leer = heute)</label>
                <input type="date" class="t-input" id="target" onchange="calc()">
            </div>
        </div>
    </div>

    <div class="t-panel" id="result-panel" style="display:none">
        <div class="t-result" style="margin-bottom:20px">
            <div class="t-result-big" id="r-years">–</div>
            <div class="t-result-lbl">Jahre alt</div>
        </div>

        <div class="t-grid-4" style="margin-bottom:20px">
            <div class="t-stat-card">
                <div class="t-stat-num" id="r-months">–</div>
                <div class="t-stat-lbl">Monate gesamt</div>
            </div>
            <div class="t-stat-card">
                <div class="t-stat-num" id="r-days">–</div>
                <div class="t-stat-lbl">Tage gesamt</div>
            </div>
            <div class="t-stat-card">
                <div class="t-stat-num" id="r-hours">–</div>
                <div class="t-stat-lbl">Stunden</div>
            </div>
            <div class="t-stat-card accent">
                <div class="t-stat-num" id="r-nextbday">–</div>
                <div class="t-stat-lbl">Tage bis Geburtstag</div>
            </div>
        </div>

        <div class="t-panel-title"><i class="fas fa-star"></i> Weitere Infos</div>
        <div class="t-row"><span class="t-row-lbl">Wochentag der Geburt</span><span class="t-row-val" id="r-weekday">–</span></div>
        <div class="t-row"><span class="t-row-lbl">Sternzeichen</span><span class="t-row-val" id="r-sign">–</span></div>
        <div class="t-row"><span class="t-row-lbl">Generation</span><span class="t-row-val" id="r-gen">–</span></div>
        <div class="t-row"><span class="t-row-lbl">Lebenserwartung verbraucht</span><span class="t-row-val" id="r-life">–</span></div>
    </div>
</div>
@include('tools._ads_banner')
</div>

<script>
const WEEKDAYS=['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'];
const SIGNS=[
    {name:'Steinbock ♑',end:[1,19]},{name:'Wassermann ♒',end:[2,18]},{name:'Fische ♓',end:[3,20]},{name:'Widder ♈',end:[4,19]},{name:'Stier ♉',end:[5,20]},{name:'Zwillinge ♊',end:[6,20]},{name:'Krebs ♋',end:[7,22]},{name:'Löwe ♌',end:[8,22]},{name:'Jungfrau ♍',end:[9,22]},{name:'Waage ♎',end:[10,22]},{name:'Skorpion ♏',end:[11,21]},{name:'Schütze ♐',end:[12,21]},{name:'Steinbock ♑',end:[12,31]}
];
const GENS=[
    {name:'Stille Generation',min:1901,max:1945},{name:'Baby Boomer',min:1946,max:1964},{name:'Generation X',min:1965,max:1979},{name:'Millennials (Gen Y)',min:1980,max:1994},{name:'Generation Z',min:1995,max:2009},{name:'Generation Alpha',min:2010,max:2030}
];

function zodiac(m,d){ return SIGNS.find(s=>m<s.end[0]||(m===s.end[0]&&d<=s.end[1]))?.name||'Steinbock ♑'; }
function generation(y){ return GENS.find(g=>y>=g.min&&y<=g.max)?.name||'–'; }

function calc(){
    const bdayVal=document.getElementById('bday').value;
    const targetVal=document.getElementById('target').value;
    if(!bdayVal) return;
    const bday=new Date(bdayVal);
    const now=targetVal?new Date(targetVal):new Date();
    if(isNaN(bday)||bday>now) return;

    let y=now.getFullYear()-bday.getFullYear();
    let m=now.getMonth()-bday.getMonth();
    if(m<0||(m===0&&now.getDate()<bday.getDate())){y--;m+=12;}
    if(now.getDate()<bday.getDate()) m--;
    m=Math.max(0,m);

    const totalDays=Math.floor((now-bday)/86400000);
    const totalMonths=y*12+m;
    const nextBday=new Date(now.getFullYear(),bday.getMonth(),bday.getDate());
    if(nextBday<=now) nextBday.setFullYear(now.getFullYear()+1);
    const daysToNext=Math.ceil((nextBday-now)/86400000);
    const lifeExpect=82, usedPct=Math.round((y/lifeExpect)*100);

    document.getElementById('r-years').textContent=y;
    document.getElementById('r-months').textContent=totalMonths.toLocaleString('de-DE');
    document.getElementById('r-days').textContent=totalDays.toLocaleString('de-DE');
    document.getElementById('r-hours').textContent=(totalDays*24).toLocaleString('de-DE');
    document.getElementById('r-nextbday').textContent=daysToNext;
    document.getElementById('r-weekday').textContent=WEEKDAYS[bday.getDay()];
    document.getElementById('r-sign').textContent=zodiac(bday.getMonth()+1,bday.getDate());
    document.getElementById('r-gen').textContent=generation(bday.getFullYear());
    document.getElementById('r-life').textContent=Math.min(usedPct,100)+'% (bei Ø '+lifeExpect+' Jahren)';
    document.getElementById('result-panel').style.display='';
}

// Set today as default target max
document.getElementById('bday').max=new Date().toISOString().split('T')[0];
</script>

@include('tools._seo_content', ['toolSlug' => 'alter-rechner', 'toolName' => 'Alter Rechner'])

@endsection