<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grenke-Klimstein</title>
    <meta name="description" content="Kontaktseite von Grenke-Klimstein.">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600&family=Montserrat:wght@300;400&display=swap" rel="stylesheet">

    <style>
        /* --- Grundlegendes Reset & Design --- */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #080808; /* Sehr dunkles Schwarz */
            color: #ffffff;
            font-family: 'Montserrat', sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            text-align: center;
            padding: 20px;
        }

        /* --- Container --- */
        .container {
            width: 100%;
            max-width: 480px;
            animation: fadeIn 1.5s ease-out;
        }

        /* --- Profilbild --- */
        .profile-image {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            margin: 0 auto 1.5rem auto;
            object-fit: cover;
            border: 1px solid rgba(255, 255, 255, 0.1);
            display: block;
            background-color: #1a1a1a;
        }

        /* --- Typografie --- */
        h1 {
            font-family: 'Cormorant Garamond', serif;
            font-size: 2.5rem;
            font-weight: 400;
            letter-spacing: 1px;
            margin-bottom: 0.5rem;
            color: #f0f0f0;
        }

        p.subtitle {
            font-size: 0.9rem;
            color: #888888;
            letter-spacing: 2px;
            text-transform: uppercase;
            margin-bottom: 3rem;
        }

        /* --- Buttons --- */
        .link-wrapper {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .btn {
            display: flex; /* Changed to flex for better centering of text and icons */
            justify-content: center;
            align-items: center;
            width: 100%;
            padding: 16px 20px;
            background-color: transparent;
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: #ffffff;
            text-decoration: none;
            font-size: 0.95rem;
            letter-spacing: 1px;
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
        }

        .btn:hover {
            background-color: #ffffff;
            color: #000000;
            border-color: #ffffff;
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.5);
        }

        /* Spezielle Regeln für das SVG Icon im Button */
        .btn svg {
            height: 20px; /* Größe des Icons */
            width: auto;
            fill: #ffffff; /* Standardfarbe Weiß */
            transition: fill 0.4s ease;
        }

        /* Wenn man über den Button fährt, wird das Icon schwarz */
        .btn:hover svg {
            fill: #000000;
        }


        .btn.primary {
            border-color: #ffffff;
            background-color: rgba(255,255,255,0.05);
        }

        /* --- Footer --- */
        footer {
            margin-top: 4rem;
            font-size: 0.75rem;
            color: #444;
        }

        /* --- Animation --- */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

    </style>
</head>
<body>

    <div class="container">
        
        <img src="https://www.grenke-klimstein.de/peer.jpg" alt="Peer Grenke-Klimstein" class="profile-image">

        <h1>Grenke-Klimstein</h1>
        <p class="subtitle">Willkommen</p>

        <div class="link-wrapper">
            <a href="mailto:peer@grenke-klimstein.de" class="btn primary">
                E-Mail Kontakt
            </a>

            <a href="https://x.com/GrenkePeer" target="_blank" class="btn" aria-label="Zu meinem X Profil">
                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
            </a>
        </div>

        <footer>
            <p>&copy; 2026 Grenke-Klimstein</p>
        </footer>
    </div>

</body>
</html>