| Server IP : 202.61.199.114 / Your IP : 216.73.217.139 Web Server : nginx/1.22.1 System : Linux de.arni-solutions.de 6.1.0-49-amd64 #1 SMP PREEMPT_DYNAMIC Debian 6.1.174-1 (2026-05-26) x86_64 User : web20 ( 1018) PHP Version : 8.4.23 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : ON Directory : /var/www/clients/client2/web24/web/ |
Upload File : |
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ihr-parkplatz.de – Coming Soon | Parkplätze an Flughäfen, Häfen & Events</title>
<meta name="description" content="ihr-parkplatz.de wird Ihre zentrale Plattform, um passende Parkplätze an Flughäfen, Häfen und bei großen Veranstaltungen schnell und einfach zu finden.">
<meta name="theme-color" content="#0d2240">
<!-- Open Graph -->
<meta property="og:title" content="ihr-parkplatz.de – Coming Soon">
<meta property="og:description" content="Die besten Parkplätze für Ihre Reise und besondere Erlebnisse.">
<meta property="og:image" content="bg-ihr-parkplatz.webp">
<meta property="og:type" content="website">
<!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- FontAwesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" referrerpolicy="no-referrer">
<!-- Google Font (passend zum Premium-Look) -->
<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=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
/* ============================================================
Design-Tokens / Farbwelt
Dunkelblau · Weiß · Orange als Akzent
============================================================ */
:root {
--navy: #0d2240;
--navy-deep: #081730;
--navy-soft: #16335c;
--orange: #f08416;
--orange-dark: #d56f08;
--text-light: #f5f8fc;
--muted: #5b6b82;
--card-bg: rgba(255, 255, 255, 0.92);
--glass-bg: rgba(13, 34, 64, 0.55);
--radius: 18px;
--shadow-soft: 0 18px 45px rgba(8, 23, 48, 0.28);
--shadow-card: 0 22px 50px rgba(8, 23, 48, 0.22);
}
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
color: var(--navy);
scroll-behavior: smooth;
}
/* ============================================================
Hero / Fullscreen-Hintergrund mit Overlay
============================================================ */
.hero {
position: relative;
min-height: 100vh;
display: flex;
flex-direction: column;
/* WebP als Hauptbild, PNG als Fallback per <picture> ist hier
nicht nötig, da WebP-Support praktisch flächendeckend ist. */
background: url("bg-ihr-parkplatz.webp") center / cover no-repeat fixed;
overflow: hidden;
}
/* Lesbarkeits-Overlay: Verlauf von dunkelblau, kräftiger oben/unten */
.hero::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(8,23,48,0.82) 0%, rgba(8,23,48,0.45) 35%, rgba(8,23,48,0.55) 70%, rgba(8,23,48,0.92) 100%);
z-index: 0;
}
.hero > * { position: relative; z-index: 1; }
/* ============================================================
Logo / Kopfbereich
============================================================ */
.brand {
text-align: center;
padding: 2.4rem 1rem 0.5rem;
}
.brand__logo {
display: inline-flex;
align-items: center;
gap: 0.55rem;
font-weight: 800;
font-size: clamp(1.6rem, 4vw, 2.4rem);
letter-spacing: -0.5px;
color: var(--text-light);
text-decoration: none;
}
.brand__logo .logo-mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.6rem;
height: 2.6rem;
border-radius: 14px;
background: linear-gradient(135deg, var(--orange) 0%, var(--orange-dark) 100%);
color: #fff;
font-size: 1.3rem;
box-shadow: 0 8px 20px rgba(240, 132, 22, 0.45);
}
.brand__logo .accent { color: var(--orange); }
/* Icon-Trio unter dem Logo */
.brand__icons {
display: flex;
justify-content: center;
gap: 1.4rem;
margin-top: 1.1rem;
}
.brand__icons span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
border-radius: 50%;
border: 1.5px solid rgba(255,255,255,0.35);
color: var(--text-light);
font-size: 1.05rem;
backdrop-filter: blur(4px);
transition: transform .25s ease, border-color .25s ease, color .25s ease;
}
.brand__icons span:hover {
transform: translateY(-4px);
border-color: var(--orange);
color: var(--orange);
}
/* ============================================================
Headline / Subheadline
============================================================ */
.hero__head {
text-align: center;
padding: 1rem 1rem 0.5rem;
}
.hero__title {
font-weight: 800;
font-size: clamp(2.8rem, 9vw, 6rem);
line-height: 1.02;
color: var(--text-light);
margin: 0.2rem 0 0.6rem;
text-shadow: 0 14px 40px rgba(0,0,0,0.45);
}
.hero__subtitle {
font-weight: 400;
font-size: clamp(1.05rem, 2.4vw, 1.45rem);
color: rgba(245, 248, 252, 0.92);
max-width: 620px;
margin: 0 auto;
}
/* ============================================================
Leistungs-Cards (Glassmorphism)
============================================================ */
.features {
padding: 2.2rem 1rem 1rem;
}
.feature-card {
background: var(--card-bg);
border-radius: var(--radius);
padding: 2.1rem 1.5rem 1.7rem;
height: 100%;
text-align: center;
box-shadow: var(--shadow-card);
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.6);
transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease;
}
.feature-card:hover {
transform: translateY(-8px);
box-shadow: 0 30px 60px rgba(8,23,48,0.30);
}
.feature-card__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 4.4rem;
height: 4.4rem;
border-radius: 50%;
background: linear-gradient(135deg, var(--navy) 0%, var(--navy-soft) 100%);
color: #fff;
font-size: 1.6rem;
margin-bottom: 1.1rem;
box-shadow: 0 12px 26px rgba(13,34,64,0.35);
}
.feature-card h3 {
font-weight: 700;
font-size: 1.12rem;
text-transform: uppercase;
letter-spacing: 0.4px;
line-height: 1.3;
margin-bottom: 0.85rem;
}
.feature-card h3 .accent { color: var(--orange); display: block; }
.feature-card p {
color: var(--muted);
font-size: 0.96rem;
line-height: 1.55;
margin-bottom: 1.1rem;
}
.feature-card .divider {
width: 46px;
height: 3px;
border-radius: 3px;
background: var(--orange);
margin: 0 auto;
}
/* ============================================================
Newsletter-Bereich (Glas-Panel)
============================================================ */
.newsletter {
margin: 1.8rem auto 0;
max-width: 1120px;
width: 100%;
background: var(--glass-bg);
border: 1px solid rgba(255,255,255,0.18);
border-radius: var(--radius);
backdrop-filter: blur(14px);
box-shadow: var(--shadow-soft);
padding: 1.8rem 2rem;
color: var(--text-light);
}
.newsletter__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3.6rem;
height: 3.6rem;
border-radius: 50%;
border: 1.5px solid rgba(255,255,255,0.4);
font-size: 1.3rem;
flex-shrink: 0;
}
.newsletter h2 {
font-weight: 700;
font-size: 1.15rem;
text-transform: uppercase;
letter-spacing: 0.5px;
margin: 0 0 0.35rem;
}
.newsletter p {
font-size: 0.92rem;
margin: 0;
color: rgba(245,248,252,0.85);
line-height: 1.5;
}
/* Eingabe-Gruppe */
.newsletter .form-control {
border: none;
border-radius: 12px 0 0 12px;
padding: 0.85rem 1.1rem;
font-size: 0.98rem;
box-shadow: none;
}
.newsletter .form-control:focus {
box-shadow: 0 0 0 3px rgba(240,132,22,0.4);
}
.btn-notify {
background: linear-gradient(135deg, var(--orange) 0%, var(--orange-dark) 100%);
color: #fff;
font-weight: 600;
border: none;
border-radius: 0 12px 12px 0;
padding: 0.85rem 1.6rem;
white-space: nowrap;
transition: transform .2s ease, filter .2s ease;
}
.btn-notify:hover { filter: brightness(1.08); transform: translateY(-1px); color:#fff; }
.btn-notify:active { transform: translateY(0); }
.form-note {
font-size: 0.78rem;
color: rgba(245,248,252,0.7);
margin-top: 0.5rem;
}
.form-success {
display: none;
align-items: center;
gap: 0.5rem;
margin-top: 0.7rem;
font-size: 0.92rem;
font-weight: 500;
color: #7CFFB0;
}
/* ============================================================
Trust-Leiste
============================================================ */
.trust {
background: rgba(255,255,255,0.96);
backdrop-filter: blur(6px);
margin-top: auto;
padding: 1.3rem 1rem;
box-shadow: 0 -10px 30px rgba(8,23,48,0.18);
}
.trust__item {
display: flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.4px;
font-size: 0.92rem;
color: var(--navy);
padding: 0.4rem 0;
}
.trust__item i { color: var(--orange); font-size: 1.15rem; }
/* ============================================================
Footer
============================================================ */
.site-footer {
background: var(--navy-deep);
color: rgba(255,255,255,0.6);
text-align: center;
font-size: 0.82rem;
padding: 1.1rem 1rem;
}
.site-footer a { color: rgba(255,255,255,0.8); text-decoration: none; }
.site-footer a:hover { color: var(--orange); }
/* ============================================================
Sanfte Einblend-Animation
============================================================ */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
.animate { opacity: 0; animation: fadeUp .8s cubic-bezier(.2,.7,.3,1) forwards; }
.delay-1 { animation-delay: .12s; }
.delay-2 { animation-delay: .24s; }
.delay-3 { animation-delay: .36s; }
.delay-4 { animation-delay: .48s; }
.delay-5 { animation-delay: .60s; }
@media (prefers-reduced-motion: reduce) {
.animate { animation: none; opacity: 1; }
.hero { background-attachment: scroll; }
}
/* ============================================================
Responsive Feinschliff
============================================================ */
@media (max-width: 991.98px) {
.hero { background-attachment: scroll; } /* iOS-Fix für fixed-Background */
}
@media (max-width: 767.98px) {
.brand { padding-top: 1.6rem; }
.newsletter { padding: 1.5rem 1.2rem; text-align: center; }
.newsletter .text-wrap { text-align: center; }
.newsletter__icon { margin: 0 auto 0.8rem; }
/* Eingabe-Gruppe auf Mobile gestapelt & abgerundet */
.newsletter .form-control { border-radius: 12px; margin-bottom: 0.6rem; }
.btn-notify { border-radius: 12px; width: 100%; }
.form-success { justify-content: center; }
}
</style>
</head>
<body>
<!-- ============================================================
HERO – Fullscreen-Hintergrund mit Overlay
============================================================ -->
<header class="hero">
<!-- Logo + Icon-Trio -->
<div class="brand">
<a href="#" class="brand__logo animate">
<span class="logo-mark"><i class="fa-solid fa-square-parking"></i></span>
<span>ihr-parkplatz<span class="accent">.de</span></span>
</a>
<div class="brand__icons animate delay-1">
<span title="Flughäfen"><i class="fa-solid fa-plane"></i></span>
<span title="Häfen"><i class="fa-solid fa-anchor"></i></span>
<span title="Großveranstaltungen"><i class="fa-solid fa-ticket"></i></span>
</div>
</div>
<!-- Headline -->
<div class="hero__head">
<h1 class="hero__title animate delay-1">Coming Soon</h1>
<p class="hero__subtitle animate delay-2">
Die besten Parkplätze für Ihre Reise und besondere Erlebnisse.
</p>
</div>
<!-- ============================================================
Leistungs-Cards
============================================================ -->
<section class="features">
<div class="container">
<div class="row g-4 justify-content-center">
<!-- Card 1: Flughäfen -->
<div class="col-12 col-md-6 col-lg-4">
<article class="feature-card animate delay-2">
<div class="feature-card__icon"><i class="fa-solid fa-plane-departure"></i></div>
<h3>Parkplätze an <span class="accent">Flughäfen</span></h3>
<p>Sicher parken, entspannt reisen. Unsere Parkplätze an Flughäfen bieten Komfort und Nähe zum Terminal.</p>
<div class="divider"></div>
</article>
</div>
<!-- Card 2: Häfen -->
<div class="col-12 col-md-6 col-lg-4">
<article class="feature-card animate delay-3">
<div class="feature-card__icon"><i class="fa-solid fa-anchor"></i></div>
<h3>Parkplätze an <span class="accent">Häfen</span></h3>
<p>Ihr Auto in sicheren Händen, während Sie in See stechen. Ideal für Kreuzfahrten und Hafenreisen.</p>
<div class="divider"></div>
</article>
</div>
<!-- Card 3: Großveranstaltungen -->
<div class="col-12 col-md-6 col-lg-4">
<article class="feature-card animate delay-4">
<div class="feature-card__icon"><i class="fa-solid fa-ticket"></i></div>
<h3>Parkplätze für <span class="accent">Großveranstaltungen</span></h3>
<p>Ob Konzert, Sportevent oder Messe – parken Sie stressfrei und genießen Sie das Event.</p>
<div class="divider"></div>
</article>
</div>
</div>
<!-- ============================================================
Newsletter-Bereich (rein optisch, ohne Verarbeitung)
============================================================ -->
<div class="newsletter animate delay-5">
<div class="row align-items-center g-3">
<div class="col-12 col-lg-6">
<div class="d-flex align-items-center gap-3 text-wrap">
<div class="newsletter__icon"><i class="fa-regular fa-envelope"></i></div>
<div>
<h2>Seien Sie von Anfang an dabei!</h2>
<p>Tragen Sie sich in unseren Newsletter ein und erhalten Sie exklusive Infos zum Start und besondere Angebote.</p>
</div>
</div>
</div>
<div class="col-12 col-lg-6">
<!-- novalidate + JS: rein optische Bestätigung, keine echte Verarbeitung -->
<form id="newsletterForm" class="needs-handling" novalidate>
<div class="d-flex flex-column flex-md-row">
<input type="email" class="form-control" id="newsletterEmail"
placeholder="Ihre E-Mail-Adresse" required autocomplete="email" aria-label="Ihre E-Mail-Adresse">
<button type="submit" class="btn-notify">
<i class="fa-solid fa-bell me-2"></i>Benachrichtigen
</button>
</div>
<div class="form-note">Wir verwenden Ihre Adresse ausschließlich für die Start-Benachrichtigung.</div>
<div class="form-success" id="formSuccess">
<i class="fa-solid fa-circle-check"></i>
<span>Vielen Dank! Wir benachrichtigen Sie zum Start.</span>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
<!-- ============================================================
Trust-Leiste
============================================================ -->
<section class="trust animate delay-5">
<div class="container">
<div class="row">
<div class="col-12 col-md-4">
<div class="trust__item"><i class="fa-solid fa-circle-check"></i> Sicher & zuverlässig</div>
</div>
<div class="col-12 col-md-4">
<div class="trust__item"><i class="fa-solid fa-circle-check"></i> Top Standorte</div>
</div>
<div class="col-12 col-md-4">
<div class="trust__item"><i class="fa-solid fa-circle-check"></i> Einfache Buchung</div>
</div>
</div>
</div>
</section>
</header>
<!-- Footer -->
<footer class="site-footer">
© <span id="year"></span> ihr-parkplatz.de · Parkplätze an Flughäfen, Häfen & Großveranstaltungen
· <a href="#">Impressum</a> · <a href="#">Datenschutz</a>
</footer>
<!-- Bootstrap 5 JS (Bundle inkl. Popper) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
/* ============================================================
Aktuelles Jahr im Footer
============================================================ */
document.getElementById('year').textContent = new Date().getFullYear();
/* ============================================================
Newsletter-Formular – rein optische Bestätigung
(keine echte Verarbeitung, kein Versand, kein Tracking)
============================================================ */
(function () {
const form = document.getElementById('newsletterForm');
const email = document.getElementById('newsletterEmail');
const success = document.getElementById('formSuccess');
form.addEventListener('submit', function (e) {
e.preventDefault();
// Einfache HTML5-Validierung der E-Mail
if (!email.checkValidity()) {
email.classList.add('is-invalid');
email.focus();
return;
}
email.classList.remove('is-invalid');
// Optisches Feedback: Erfolgsmeldung einblenden, Feld leeren
success.style.display = 'flex';
email.value = '';
email.setAttribute('placeholder', 'Eintragung gespeichert ✓');
// Meldung nach einigen Sekunden wieder ausblenden
setTimeout(function () {
success.style.display = 'none';
email.setAttribute('placeholder', 'Ihre E-Mail-Adresse');
}, 6000);
});
})();
</script>
</body>
</html>