Pascal Scholz
478e032b0b
Replaces the previous multi-page structure (Startseite, Leistungen, Über uns, Kontakt) with one long-form page covering pricing, work samples, process and FAQ, matching the new visual identity (dark theme, serif display type, sage-green logo mark). Old routes now redirect to the corresponding anchors. Adds Impressum and Datenschutz stub pages with clearly marked placeholders for the still-missing real content (contact details, founder bios, portfolio, pricing specifics). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
160 lines
3.2 KiB
Text
160 lines
3.2 KiB
Text
---
|
|
const navItems = [
|
|
{ href: '#warum', label: 'Warum' },
|
|
{ href: '#leistungen', label: 'Leistungen' },
|
|
{ href: '#arbeiten', label: 'Arbeiten' },
|
|
{ href: '#ablauf', label: 'Ablauf' },
|
|
{ href: '#preis', label: 'Preis' },
|
|
];
|
|
---
|
|
|
|
<header class="nav">
|
|
<div class="container nav-inner">
|
|
<a href="/" class="nav-logo">
|
|
<img src="/logo.jpg" alt="larpaso Webdesign" width="320" height="60" class="nav-logo-img" />
|
|
</a>
|
|
|
|
<input type="checkbox" id="nav-toggle" class="nav-toggle-checkbox" />
|
|
<label for="nav-toggle" class="nav-toggle" aria-label="Menü öffnen/schließen">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</label>
|
|
|
|
<nav class="nav-links" aria-label="Hauptnavigation">
|
|
<ul>
|
|
{navItems.map((item) => (
|
|
<li>
|
|
<a href={item.href}>{item.label}</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<a class="btn btn-primary nav-cta" href="#kontakt">Projekt anfragen</a>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<style>
|
|
.nav {
|
|
background: var(--color-bg);
|
|
border-bottom: 1px solid var(--color-border);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 50;
|
|
}
|
|
|
|
.nav-inner {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding-block: var(--space-4);
|
|
}
|
|
|
|
.nav-logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
}
|
|
|
|
.nav-logo:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.nav-logo-img {
|
|
height: 3.5rem;
|
|
width: auto;
|
|
}
|
|
|
|
.nav-links {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-6);
|
|
}
|
|
|
|
.nav-links ul {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-6);
|
|
list-style: none;
|
|
}
|
|
|
|
.nav-links a {
|
|
color: var(--color-text-muted);
|
|
font-weight: var(--font-weight-medium);
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
|
|
.nav-links ul a:hover {
|
|
color: var(--color-primary);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.nav-cta {
|
|
font-size: var(--font-size-sm);
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
padding: var(--space-3) var(--space-5);
|
|
}
|
|
|
|
.nav-toggle-checkbox {
|
|
display: none;
|
|
}
|
|
|
|
.nav-toggle {
|
|
display: none;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
gap: 5px;
|
|
width: 28px;
|
|
height: 22px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.nav-toggle span {
|
|
display: block;
|
|
height: 2px;
|
|
background: var(--color-text);
|
|
border-radius: 1px;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.nav-toggle {
|
|
display: flex;
|
|
}
|
|
|
|
.nav-links {
|
|
display: none;
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
background: var(--color-bg);
|
|
border-bottom: 1px solid var(--color-border);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.nav-links {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: var(--space-4);
|
|
padding: var(--space-4) var(--container-padding) var(--space-5);
|
|
}
|
|
|
|
.nav-links ul {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.nav-links li {
|
|
width: 100%;
|
|
padding-block: var(--space-3);
|
|
border-bottom: 1px solid var(--color-border);
|
|
}
|
|
|
|
.nav-toggle-checkbox:checked ~ .nav-links {
|
|
display: flex;
|
|
}
|
|
}
|
|
</style>
|