Files
bmp-website-2026/event-detail.html
Sebastian Pachon Araque fea7998835 Initial commit — BMP Website 2026
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>
2026-05-29 09:01:20 +02:00

186 lines
8.5 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gala-Verleihung 2026 Event Details Bayerischer Mittelstandspreis</title>
<link rel="stylesheet" href="/css/variables.css">
<link rel="stylesheet" href="/css/base.css">
<link rel="stylesheet" href="/css/components.css">
<link rel="stylesheet" href="/css/layout.css">
<link rel="stylesheet" href="/css/pages.css">
</head>
<body class="bg-light">
<!-- ── Navigation ── -->
<nav class="nav" id="main-nav">
<div class="nav__inner">
<a href="index.html" class="nav__brand">
<div class="nav__brand-text">
<span class="nav__brand-name">Bayerischer Mittelstandspreis</span>
<span class="nav__brand-sub">Exzellenz seit 2005</span>
</div>
</a>
<div class="nav__links" id="nav-links">
<a href="index.html" class="nav__link">Startseite</a>
<a href="teilnahme.html" class="nav__link">Teilnahme</a>
<a href="preistraeger.html" class="nav__link">Der BMP</a>
<a href="jury.html" class="nav__link">Jury & Partner</a>
<a href="presse.html" class="nav__link active">Presse</a>
<a href="kontakt.html" class="nav__link">Kontakt</a>
<a href="teilnahme.html#bewerben" class="btn btn--gold btn--sm nav__cta">Bewerben</a>
</div>
</div>
</nav>
<!-- ── Event Header ── -->
<section class="page-hero" style="background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://images.unsplash.com/photo-1511578314322-379afb476865?auto=format&fit=crop&q=80&w=1200'); background-size: cover; background-position: center;">
<div class="container reveal">
<div class="hero__badge reveal">
<span class="badge badge--gold">Gala-Abend 2026</span>
</div>
<h1 class="hero-title" style="color: white;">Glanzvolle Preisverleihung in München</h1>
<div class="gold-divider"></div>
<div class="flex-center gap-xl" style="color: white; margin-top: var(--space-xl);">
<div style="text-align: center;">
<p class="overline" style="color: var(--color-accent); margin-bottom: 4px;">Datum</p>
<p style="font-weight: bold; font-size: 1.25rem;">22. Oktober 2026</p>
</div>
<div style="text-align: center;">
<p class="overline" style="color: var(--color-accent); margin-bottom: 4px;">Ort</p>
<p style="font-weight: bold; font-size: 1.25rem;">Residenz München</p>
</div>
<div style="text-align: center;">
<p class="overline" style="color: var(--color-accent); margin-bottom: 4px;">Status</p>
<span class="badge badge--gold">Bewerbung offen</span>
</div>
</div>
</div>
</section>
<!-- ── Event Updates / News ── -->
<section class="section">
<div class="container">
<div class="split reveal">
<div class="split__content">
<span class="overline">Updates</span>
<h2>Neuigkeiten zum Event</h2>
<div class="gold-divider gold-divider--left"></div>
<p>Bleiben Sie auf dem Laufenden über das Programm, Redner und Special Guests des diesjährigen Gala-Abends.</p>
<div class="timeline" style="margin-top: var(--space-2xl);">
<div class="timeline__item stagger-item">
<p class="timeline__date">10. April 2026</p>
<h4 class="timeline__title">Hauptredner bestätigt</h4>
<p class="timeline__text">Wir freuen uns, den bayerischen Wirtschaftsminister als Schirmherr und Redner begrüßen zu dürfen.</p>
</div>
<div class="timeline__item stagger-item">
<p class="timeline__date">01. März 2026</p>
<h4 class="timeline__title">Residenz München gebucht</h4>
<p class="timeline__text">Die Verträge sind unterzeichnet wir kehren in den prachtvollen Kaisersaal zurück.</p>
</div>
</div>
</div>
<div class="split__visual">
<div class="card reveal" style="padding: var(--space-2xl); background: var(--color-white); border: 1px solid var(--color-gray-light);">
<h3>Zeitplan der Gala</h3>
<ul class="steps" style="flex-direction: column; align-items: flex-start; gap: var(--space-lg); margin-top: var(--space-lg);">
<li class="step" style="width: 100%;">
<div class="step__number" style="font-size: 1.5rem;">18:00</div>
<div class="step__content"><p>Sektempfang & Networking</p></div>
</li>
<li class="step" style="width: 100%;">
<div class="step__number" style="font-size: 1.5rem;">19:30</div>
<div class="step__content"><p>Beginn der Verleihung</p></div>
</li>
<li class="step" style="width: 100%;">
<div class="step__number" style="font-size: 1.5rem;">21:00</div>
<div class="step__content"><p>Dinner & Get-Together</p></div>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- ── Downloads & Impressionen (Gallery) ── -->
<section class="section section--light" id="event-gallery">
<div class="container">
<div class="section-header reveal">
<span class="overline">Highlights</span>
<h2>Downloads & Impressionen</h2>
<div class="gold-divider"></div>
<p>Einblicke in die Location und Unterlagen für Teilnehmer.</p>
</div>
<div class="grid grid--3 reveal">
<div class="stagger-item">
<div style="height: 200px; overflow: hidden; border-radius: 8px;">
<img src="https://images.unsplash.com/photo-1540317580384-e5d43616b9aa?auto=format&fit=crop&q=80&w=800" alt="Impression 1" class="fit-image">
</div>
</div>
<div class="stagger-item">
<div style="height: 200px; overflow: hidden; border-radius: 8px;">
<img src="https://images.unsplash.com/photo-1519750157634-b6d493a0f77c?auto=format&fit=crop&q=80&w=800" alt="Impression 2" class="fit-image">
</div>
</div>
<div class="stagger-item">
<div style="height: 200px; overflow: hidden; border-radius: 8px;">
<img src="https://images.unsplash.com/photo-1511578314322-379afb476865?auto=format&fit=crop&q=80&w=800" alt="Impression 3" class="fit-image">
</div>
</div>
</div>
<div class="grid grid--2 reveal" style="margin-top: var(--space-3xl);">
<div class="card stagger-item" style="padding: var(--space-xl); background: white;">
<h4>Für Teilnehmer</h4>
<p>Anfahrtsskizze, Hotelempfehlungen und Kleiderordnung.</p>
<a href="#" class="btn btn--outline-dark btn--sm" style="margin-top: var(--space-md);">Info-Paket laden (PDF)</a>
</div>
<div class="card stagger-item" style="padding: var(--space-xl); background: white;">
<h4>Presse-Material</h4>
<p>Pressemitteilung zum Event und druckfähige Fotos der Location.</p>
<a href="#" class="btn btn--outline-dark btn--sm" style="margin-top: var(--space-md);">Media-Kit laden (ZIP)</a>
</div>
</div>
</div>
</section>
<!-- ── Footer ── -->
<footer class="footer">
<div class="container">
<div class="footer__grid">
<div class="footer__brand">
<h3 class="nav__brand-name">Bayerischer Mittelstandspreis</h3>
<p class="nav__brand-sub">Exzellenz seit 2005</p>
</div>
<div>
<h4 class="footer__heading">BMP 2026</h4>
<a href="index.html" class="footer__link">Startseite</a>
<a href="teilnahme.html" class="footer__link">Teilnahme</a>
<a href="preistraeger.html" class="footer__link">Preisträger</a>
</div>
<div>
<h4 class="footer__heading">Engagement</h4>
<a href="jury.html" class="footer__link">Jury & Partner</a>
<a href="presse.html" class="footer__link">Presse</a>
<a href="kontakt.html" class="footer__link">Kontakt</a>
</div>
<div>
<h4 class="footer__heading">Legal</h4>
<a href="datenschutz.html" class="footer__link">Datenschutz</a>
<a href="datenschutz.html#impressum" class="footer__link">Impressum</a>
</div>
</div>
<div class="footer__bottom">
<p>© 2026 Bayerischer Mittelstandspreis. Alle Rechte vorbehalten.</p>
</div>
</div>
</footer>
<script type="module" src="/js/main.js"></script>
</body>
</html>