<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>gruenheid.net</title>
<style>
:root {
--card-bg: rgba(15, 23, 42, 0.45);
--card-border: rgba(255, 255, 255, 0.08);
--text-main: #ffffff;
--text-muted: #cbd5e1;
--input-bg: rgba(255, 255, 255, 0.07);
--btn-bg: rgba(255, 255, 255, 0.08);
--btn-hover: rgba(255, 255, 255, 0.18);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
color: var(--text-main);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 1.5rem;
-webkit-font-smoothing: antialiased;
position: relative;
background: #0f172a;
}
/* Hintergrundbild-Optimierung */
.bg-image {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* Ersetze 'image.png' durch den exakten Namen deiner Bilddatei im Cloudflare-Ordner */
background-image: url('image.png');
background-size: cover;
background-position: center;
z-index: -1;
}
/* Dunkler Overlay-Schleier, damit die Schrift perfekt lesbar bleibt */
.bg-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at center, rgba(15, 23, 42, 0.3) 0%, rgba(15, 23, 42, 0.6) 100%);
z-index: -1;
}
.container {
width: 100%;
max-width: 420px;
background: var(--card-bg);
backdrop-filter: blur(25px);
-webkit-backdrop-filter: blur(25px);
border: 1px solid var(--card-border);
padding: 3rem 2rem;
border-radius: 20px;
text-align: center;
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
h1 {
font-size: 1.85rem;
font-weight: 300;
letter-spacing: 0.08em;
margin-bottom: 2.5rem;
text-transform: lowercase;
opacity: 0.95;
}
.buttons-wrapper {
display: flex;
flex-direction: column;
gap: 1rem;
}
.btn {
display: block;
background: var(--btn-bg);
border: 1px solid var(--card-border);
color: var(--text-main);
text-decoration: none;
padding: 1rem;
border-radius: 10px;
font-size: 1rem;
font-weight: 400;
letter-spacing: 0.03em;
cursor: pointer;
transition: all 0.25s ease;
}
.btn:hover {
background: var(--btn-hover);
border-color: rgba(255, 255, 255, 0.25);
transform: translateY(-1px);
}
/* Formular-Bereich (Standardmäßig ausgeblendet) */
.form-section {
display: none;
margin-top: 2rem;
text-align: left;
border-top: 1px solid var(--card-border);
padding-top: 2rem;
animation: slideDown 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.form-group {
margin-bottom: 1.25rem;
}
label {
display: block;
font-size: 0.85rem;
color: var(--text-muted);
margin-bottom: 0.5rem;
letter-spacing: 0.05em;
text-transform: uppercase;
}
input, textarea {
width: 100%;
background: var(--input-bg);
border: 1px solid var(--card-border);
border-radius: 8px;
padding: 0.85rem;
color: var(--text-main);
font-size: 0.95rem;
font-family: inherit;
transition: border-color 0.2s ease;
}
input:focus, textarea:focus {
outline: none;
border-color: rgba(255, 255, 255, 0.3);
}
textarea {
resize: vertical;
min-height: 110px;
}
.submit-btn {
width: 100%;
background: #ffffff;
color: #0f172a;
border: none;
font-weight: 500;
}
.submit-btn:hover {
background: #f1f5f9;
transform: translateY(-1px);
}
@keyframes fadeIn {
from { opacity: 0; transform: scale(0.98); }
to { opacity: 1; transform: scale(1); }
}
@keyframes slideDown {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
</style>
</head>
<body>
<div class="bg-image"></div>
<div class="bg-overlay"></div>
<div class="container">
<h1>gruenheid.net</h1>
<div class="buttons-wrapper">
<a href="https://ha.gruenheid.net" class="btn">HA</a>
<button class="btn" id="contactToggle" onclick="toggleForm()">Kontakt</button>
</div>
<div class="form-section" id="contactFormSection">
<form action="https://formspree.io/f/YOUR_FORMSPREE_ID" method="POST">
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" id="name" required autocomplete="name">
</div>
<div class="form-group">
<label for="email">E-Mail</label>
<input type="email" name="_replyto" id="email" required autocomplete="email">
</div>
<div class="form-group">
<label for="message">Nachricht</label>
<textarea name="message" id="message" required></textarea>
</div>
<input type="text" name="_gotcha" style="display:none">
<button type="submit" class="btn submit-btn">Senden</button>
</form>
</div>
</div>
<script>
function toggleForm() {
var formSection = document.getElementById("contactFormSection");
var toggleBtn = document.getElementById("contactToggle");
if (formSection.style.display === "block") {
formSection.style.display = "none";
toggleBtn.style.background = "var(--btn-bg)";
} else {
formSection.style.display = "block";
formSection.scrollIntoView({ behavior: 'smooth' });
toggleBtn.style.background = "rgba(255, 255, 255, 0.12)";
}
}
</script>
</body>
</html>