fea7998835
Vollständiges Redesign mit Gold-Formularen, BMP-Logo, multi-step Forms (Bewerbung, Kontakt, Sponsoring), Netlify-Deployment. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
568 lines
16 KiB
HTML
568 lines
16 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>BMP Navigation — Prototype</title>
|
||
<style>
|
||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
||
:root {
|
||
--navy: #101828;
|
||
--gold: #C9A227;
|
||
--muted: #D0D5DD;
|
||
--white: #FFFFFF;
|
||
--blue: #0B4DA2;
|
||
--blue-h: #6FB6E9;
|
||
--sep: rgba(201, 162, 39, 0.25);
|
||
}
|
||
|
||
body {
|
||
font-family: Georgia, serif;
|
||
background: #0A192F;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
body.overlay-open {
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* ─────────────────────────────────────────
|
||
SIDEBAR
|
||
───────────────────────────────────────── */
|
||
#sidebar {
|
||
position: fixed;
|
||
top: 0; left: 0;
|
||
width: 72px;
|
||
height: 100vh;
|
||
background: var(--navy);
|
||
border-right: 1px solid rgba(201, 162, 39, 0.3);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
z-index: 100;
|
||
padding: 24px 0;
|
||
}
|
||
|
||
/* Logo */
|
||
#sidebar .s-logo {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 3px;
|
||
text-decoration: none;
|
||
flex-shrink: 0;
|
||
}
|
||
#sidebar .s-logo span {
|
||
font-size: 8px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.18em;
|
||
text-transform: uppercase;
|
||
color: var(--gold);
|
||
line-height: 1.2;
|
||
text-align: center;
|
||
writing-mode: horizontal-tb;
|
||
}
|
||
#sidebar .s-logo .logo-bmp {
|
||
font-size: 16px;
|
||
font-weight: 900;
|
||
letter-spacing: 0.05em;
|
||
color: var(--gold);
|
||
}
|
||
|
||
/* Spacer that pushes hamburger to center */
|
||
#sidebar .s-spacer { flex: 1; }
|
||
|
||
/* Hamburger */
|
||
#sidebar .s-hamburger {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 6px;
|
||
cursor: pointer;
|
||
background: none;
|
||
border: none;
|
||
padding: 10px 0;
|
||
flex-shrink: 0;
|
||
}
|
||
#sidebar .s-hamburger .bars {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
width: 22px;
|
||
}
|
||
#sidebar .s-hamburger .bars span {
|
||
display: block;
|
||
height: 1.5px;
|
||
background: var(--muted);
|
||
transition: all 0.3s ease;
|
||
transform-origin: center;
|
||
}
|
||
#sidebar .s-hamburger .menu-label {
|
||
font-family: Georgia, serif;
|
||
font-size: 10px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.15em;
|
||
color: var(--muted);
|
||
writing-mode: horizontal-tb;
|
||
}
|
||
|
||
/* Social icons */
|
||
#sidebar .s-social {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 16px;
|
||
margin-top: 28px;
|
||
flex-shrink: 0;
|
||
}
|
||
#sidebar .s-social a {
|
||
color: var(--muted);
|
||
text-decoration: none;
|
||
transition: color 0.2s;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
#sidebar .s-social a:hover { color: var(--gold); }
|
||
#sidebar .s-social svg { width: 18px; height: 18px; }
|
||
|
||
/* Language switcher */
|
||
#sidebar .s-lang {
|
||
margin-top: 24px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 2px;
|
||
flex-shrink: 0;
|
||
}
|
||
#sidebar .s-lang button {
|
||
font-family: Georgia, serif;
|
||
font-size: 11px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
background: none;
|
||
border: none;
|
||
cursor: pointer;
|
||
color: var(--muted);
|
||
padding: 2px 0;
|
||
transition: color 0.2s;
|
||
line-height: 1;
|
||
}
|
||
#sidebar .s-lang button.active { color: var(--gold); }
|
||
#sidebar .s-lang button:hover:not(.active) { color: var(--white); }
|
||
#sidebar .s-lang .lang-sep {
|
||
width: 1px;
|
||
height: 10px;
|
||
background: rgba(201,162,39,0.3);
|
||
}
|
||
|
||
/* ─────────────────────────────────────────
|
||
OVERLAY
|
||
───────────────────────────────────────── */
|
||
#overlay {
|
||
position: fixed;
|
||
inset: 0;
|
||
background: var(--navy);
|
||
z-index: 200;
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 32px 48px 36px;
|
||
|
||
/* closed state */
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
transform: translateX(-20px);
|
||
transition: opacity 0.3s ease, transform 0.3s ease;
|
||
}
|
||
#overlay.is-open {
|
||
opacity: 1;
|
||
pointer-events: all;
|
||
transform: translateX(0);
|
||
}
|
||
|
||
/* Overlay top bar */
|
||
.ov-top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
flex-shrink: 0;
|
||
margin-bottom: 48px;
|
||
}
|
||
|
||
/* Close button */
|
||
.ov-close {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
background: none;
|
||
border: none;
|
||
cursor: pointer;
|
||
padding: 0;
|
||
}
|
||
.ov-close .x-icon {
|
||
width: 32px;
|
||
height: 32px;
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.ov-close .x-icon::before,
|
||
.ov-close .x-icon::after {
|
||
content: '';
|
||
position: absolute;
|
||
width: 22px;
|
||
height: 1.5px;
|
||
background: var(--muted);
|
||
transition: background 0.2s;
|
||
}
|
||
.ov-close .x-icon::before { transform: rotate(45deg); }
|
||
.ov-close .x-icon::after { transform: rotate(-45deg); }
|
||
.ov-close:hover .x-icon::before,
|
||
.ov-close:hover .x-icon::after { background: var(--white); }
|
||
.ov-close .x-label {
|
||
font-family: Georgia, serif;
|
||
font-size: 10px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.15em;
|
||
color: var(--muted);
|
||
transition: color 0.2s;
|
||
}
|
||
.ov-close:hover .x-label { color: var(--white); }
|
||
|
||
/* Overlay logo (top right) */
|
||
.ov-logo {
|
||
text-align: right;
|
||
text-decoration: none;
|
||
}
|
||
.ov-logo .ov-logo-bmp {
|
||
font-size: 13px;
|
||
font-weight: 900;
|
||
letter-spacing: 0.12em;
|
||
color: var(--gold);
|
||
display: block;
|
||
}
|
||
.ov-logo .ov-logo-sub {
|
||
font-size: 8px;
|
||
letter-spacing: 0.2em;
|
||
text-transform: uppercase;
|
||
color: rgba(201,162,39,0.5);
|
||
display: block;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
/* Nav list */
|
||
.ov-nav {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
list-style: none;
|
||
padding-left: 48px;
|
||
}
|
||
.ov-nav li {
|
||
border-top: 1px solid var(--sep);
|
||
}
|
||
.ov-nav li:last-child {
|
||
border-bottom: 1px solid var(--sep);
|
||
}
|
||
.ov-nav a {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 20px 0;
|
||
text-decoration: none;
|
||
color: var(--white);
|
||
font-family: Georgia, serif;
|
||
font-size: clamp(22px, 3vw, 32px);
|
||
font-weight: bold;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.04em;
|
||
transition: color 0.15s, transform 0.15s;
|
||
}
|
||
.ov-nav a:hover {
|
||
color: var(--gold);
|
||
transform: translateX(8px);
|
||
}
|
||
.ov-nav a .nav-arrow {
|
||
color: var(--gold);
|
||
font-size: 1.2em;
|
||
font-style: normal;
|
||
margin-left: 16px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* Overlay bottom bar */
|
||
.ov-bottom {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
gap: 32px;
|
||
flex-shrink: 0;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
/* Bottom lang */
|
||
.ov-lang {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
.ov-lang button {
|
||
font-family: Georgia, serif;
|
||
font-size: 12px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
background: none;
|
||
border: none;
|
||
cursor: pointer;
|
||
color: var(--muted);
|
||
transition: color 0.2s;
|
||
padding: 0;
|
||
}
|
||
.ov-lang button.active { color: var(--gold); }
|
||
.ov-lang button:hover:not(.active) { color: var(--white); }
|
||
.ov-lang .lang-pipe {
|
||
color: rgba(201,162,39,0.3);
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* Bottom social */
|
||
.ov-social {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 20px;
|
||
}
|
||
.ov-social a {
|
||
color: var(--muted);
|
||
text-decoration: none;
|
||
transition: color 0.2s;
|
||
display: flex;
|
||
}
|
||
.ov-social a:hover { color: var(--gold); }
|
||
.ov-social svg { width: 18px; height: 18px; }
|
||
|
||
/* CTA button */
|
||
.ov-cta {
|
||
background: var(--blue);
|
||
color: var(--white);
|
||
font-family: Georgia, serif;
|
||
font-size: 12px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
border: none;
|
||
border-radius: 3px;
|
||
padding: 10px 20px;
|
||
cursor: pointer;
|
||
transition: background 0.2s;
|
||
text-decoration: none;
|
||
white-space: nowrap;
|
||
}
|
||
.ov-cta:hover { background: var(--blue-h); }
|
||
|
||
/* ─────────────────────────────────────────
|
||
DEMO CONTENT
|
||
───────────────────────────────────────── */
|
||
#demo-content {
|
||
margin-left: 72px;
|
||
min-height: 100vh;
|
||
background: #8B0020;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 16px;
|
||
padding: 60px;
|
||
text-align: center;
|
||
}
|
||
#demo-content h1 {
|
||
font-family: Georgia, serif;
|
||
font-size: clamp(32px, 6vw, 72px);
|
||
font-weight: 900;
|
||
color: rgba(255,255,255,0.15);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
line-height: 1;
|
||
}
|
||
#demo-content p {
|
||
font-family: Georgia, serif;
|
||
font-size: 13px;
|
||
color: rgba(255,255,255,0.2);
|
||
letter-spacing: 0.15em;
|
||
text-transform: uppercase;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ═══════════════════ SIDEBAR ═══════════════════ -->
|
||
<aside id="sidebar">
|
||
|
||
<!-- Logo -->
|
||
<a href="/" class="s-logo">
|
||
<span class="logo-bmp">BMP</span>
|
||
<span>Bayerischer<br/>Mittelstands<br/>preis</span>
|
||
</a>
|
||
|
||
<div class="s-spacer"></div>
|
||
|
||
<!-- Hamburger -->
|
||
<button class="s-hamburger" id="hamburger" aria-label="Menü öffnen" aria-expanded="false">
|
||
<div class="bars">
|
||
<span id="bar1"></span>
|
||
<span id="bar2"></span>
|
||
<span id="bar3"></span>
|
||
</div>
|
||
<span class="menu-label" id="menu-label">Menü</span>
|
||
</button>
|
||
|
||
<!-- Social -->
|
||
<div class="s-social">
|
||
<a href="https://instagram.com" target="_blank" rel="noopener" aria-label="Instagram">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<rect x="2" y="2" width="20" height="20" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r=".8" fill="currentColor" stroke="none"/>
|
||
</svg>
|
||
</a>
|
||
<a href="https://linkedin.com" target="_blank" rel="noopener" aria-label="LinkedIn">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/>
|
||
</svg>
|
||
</a>
|
||
<a href="https://facebook.com" target="_blank" rel="noopener" aria-label="Facebook">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"/>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
|
||
<!-- Language -->
|
||
<div class="s-lang">
|
||
<button class="active" onclick="setLang('de')">DE</button>
|
||
<div class="lang-sep"></div>
|
||
<button onclick="setLang('en')">EN</button>
|
||
</div>
|
||
|
||
</aside>
|
||
|
||
|
||
<!-- ═══════════════════ OVERLAY ═══════════════════ -->
|
||
<div id="overlay" role="dialog" aria-modal="true" aria-label="Navigation">
|
||
|
||
<!-- Top bar -->
|
||
<div class="ov-top">
|
||
<button class="ov-close" id="overlay-close" aria-label="Menü schließen">
|
||
<div class="x-icon"></div>
|
||
<span class="x-label">Menü</span>
|
||
</button>
|
||
<a href="/" class="ov-logo">
|
||
<span class="ov-logo-bmp">BMP</span>
|
||
<span class="ov-logo-sub">Bayerischer Mittelstandspreis</span>
|
||
</a>
|
||
</div>
|
||
|
||
<!-- Nav items -->
|
||
<nav>
|
||
<ul class="ov-nav">
|
||
<li><a href="/preistraeger">Preisträger:innen <span class="nav-arrow">›</span></a></li>
|
||
<li><a href="/teilnahme">Teilnahme <span class="nav-arrow">›</span></a></li>
|
||
<li><a href="/kategorien">Kategorien <span class="nav-arrow">›</span></a></li>
|
||
<li><a href="/netzwerk">Netzwerk <span class="nav-arrow">›</span></a></li>
|
||
<li><a href="/presse">Presse <span class="nav-arrow">›</span></a></li>
|
||
</ul>
|
||
</nav>
|
||
|
||
<!-- Bottom bar -->
|
||
<div class="ov-bottom">
|
||
<div class="ov-lang">
|
||
<button class="active" onclick="setLang('de')">DE</button>
|
||
<span class="lang-pipe">|</span>
|
||
<button onclick="setLang('en')">EN</button>
|
||
</div>
|
||
|
||
<div class="ov-social">
|
||
<a href="https://instagram.com" target="_blank" rel="noopener" aria-label="Instagram">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<rect x="2" y="2" width="20" height="20" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r=".8" fill="currentColor" stroke="none"/>
|
||
</svg>
|
||
</a>
|
||
<a href="https://linkedin.com" target="_blank" rel="noopener" aria-label="LinkedIn">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/>
|
||
</svg>
|
||
</a>
|
||
<a href="https://facebook.com" target="_blank" rel="noopener" aria-label="Facebook">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"/>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
|
||
<a href="/login" class="ov-cta">Login Datenbank</a>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
<!-- ═══════════════════ DEMO CONTENT ═══════════════════ -->
|
||
<main id="demo-content">
|
||
<h1>Bayerischer<br/>Mittelstandspreis</h1>
|
||
<p>Exzellenz seit 2005</p>
|
||
</main>
|
||
|
||
|
||
<script>
|
||
const hamburger = document.getElementById('hamburger');
|
||
const overlay = document.getElementById('overlay');
|
||
const overlayClose = document.getElementById('overlay-close');
|
||
const menuLabel = document.getElementById('menu-label');
|
||
const bar1 = document.getElementById('bar1');
|
||
const bar2 = document.getElementById('bar2');
|
||
const bar3 = document.getElementById('bar3');
|
||
|
||
function openOverlay() {
|
||
overlay.classList.add('is-open');
|
||
document.body.classList.add('overlay-open');
|
||
hamburger.setAttribute('aria-expanded', 'true');
|
||
// Morph bars to X
|
||
bar1.style.transform = 'translateY(5.5px) rotate(45deg)';
|
||
bar2.style.opacity = '0';
|
||
bar3.style.transform = 'translateY(-5.5px) rotate(-45deg)';
|
||
menuLabel.style.opacity = '0';
|
||
// Focus trap: first nav link
|
||
setTimeout(() => overlay.querySelector('.ov-nav a')?.focus(), 310);
|
||
}
|
||
|
||
function closeOverlay() {
|
||
overlay.classList.remove('is-open');
|
||
document.body.classList.remove('overlay-open');
|
||
hamburger.setAttribute('aria-expanded', 'false');
|
||
// Restore bars
|
||
bar1.style.transform = '';
|
||
bar2.style.opacity = '1';
|
||
bar3.style.transform = '';
|
||
menuLabel.style.opacity = '1';
|
||
hamburger.focus();
|
||
}
|
||
|
||
hamburger.addEventListener('click', () => {
|
||
overlay.classList.contains('is-open') ? closeOverlay() : openOverlay();
|
||
});
|
||
overlayClose.addEventListener('click', closeOverlay);
|
||
|
||
// Close on Escape
|
||
document.addEventListener('keydown', e => {
|
||
if (e.key === 'Escape' && overlay.classList.contains('is-open')) closeOverlay();
|
||
});
|
||
|
||
// Language switcher (shared state)
|
||
let currentLang = 'de';
|
||
function setLang(lang) {
|
||
currentLang = lang;
|
||
document.querySelectorAll('.s-lang button, .ov-lang button').forEach(btn => {
|
||
btn.classList.toggle('active', btn.textContent.trim().toLowerCase() === lang);
|
||
});
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|