Files
bmp-website-2026/teilnahme.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

261 lines
12 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>Teilnahme 2026 Bayerischer Mittelstandspreis</title>
<meta name="description" content="Ihr Weg zum Bayerischen Mittelstandspreis 2026. Erfahren Sie die Voraussetzungen, Bewertungskriterien und bewerben Sie sich jetzt kostenlos.">
<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>
<!-- ── 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 active">Teilnahme</a>
<a href="preistraeger.html" class="nav__link">Der BMP</a>
<a href="jury.html" class="nav__link">Jury & Partner</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>
<!-- ── Page Hero ── -->
<section class="page-hero">
<div class="container reveal">
<div class="hero__badge reveal">
<span class="badge badge--gold">Phase 2026</span>
</div>
<h1 class="hero-title">Gestalten Sie Bayerns Zukunft.</h1>
<div class="gold-divider"></div>
<p class="hero-subtitle">Alles, was Sie für Ihre erfolgreiche Bewerbung zum Bayerischen Mittelstandspreis wissen müssen.</p>
</div>
</section>
<!-- ── Teilnahmevoraussetzungen (Berechtigung) ── -->
<section class="section" id="voraussetzungen">
<div class="container">
<div class="split reveal">
<div class="split__visual">
<div class="split__image-stack">
<div class="split__image-card split__image-card--1 reveal">
<img src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&q=80&w=800" alt="Bayerische Wirtschaft" class="fit-image">
</div>
<div class="split__image-card split__image-card--2 reveal">
<img src="https://images.unsplash.com/photo-1507679799987-c73779587ccf?auto=format&fit=crop&q=80&w=600" alt="Erfolg im Team" class="fit-image">
</div>
</div>
</div>
<div class="split__content reveal">
<span class="overline">Berechtigung</span>
<h2>Wer kann teilnehmen?</h2>
<div class="gold-divider gold-divider--left"></div>
<p>Der Bayerische Mittelstandspreis richtet sich an Unternehmen, die den Wirtschaftsstandort Bayern mit Leidenschaft und Weitblick prägen.</p>
<ul class="check-list" style="margin-top: var(--space-xl);">
<li class="stagger-item">Unternehmenssitz oder wesentliche Betriebsstätte in Bayern.</li>
<li class="stagger-item">Mitarbeiterzahl zwischen 10 und 500 Beschäftigten (KMU).</li>
<li class="stagger-item">Mindestens drei volle Geschäftsjahre am Markt aktiv.</li>
<li class="stagger-item">Keine Zugehörigkeit zu rein öffentlichen Trägern.</li>
</ul>
</div>
</div>
</div>
</section>
<!-- ── Kriterien & Bewertung ── -->
<section class="section section--dark" id="kriterien">
<div class="container">
<div class="section-header reveal">
<span class="overline">Bewertung</span>
<h2>Unsere Kriterien</h2>
<div class="gold-divider"></div>
<p style="color: rgba(255,255,255,0.7); margin: 0 auto;">Eine unabhängige Expertenjury bewertet Ihre Einreichung basierend auf vier gleichgewichteten Säulen der Exzellenz.</p>
</div>
<div class="grid grid--4 reveal">
<div class="feature-box stagger-item">
<div class="step__number">25%</div>
<h4>Innovationskraft</h4>
<p>Zukunftsweisende Produkte, Dienstleistungen oder interne Prozessinnovationen.</p>
</div>
<div class="feature-box stagger-item">
<div class="step__number">25%</div>
<h4>Nachhaltigkeit</h4>
<p>Ökologische Verantwortung und Ressourcen-Effizienz im operativen Kern.</p>
</div>
<div class="feature-box stagger-item">
<div class="step__number">25%</div>
<h4>Unternehmenskultur</h4>
<p>Mitarbeiterbindung, Aus- und Weiterbildung sowie wertebasierte Führung.</p>
</div>
<div class="feature-box stagger-item">
<div class="step__number">25%</div>
<h4>Regionale Wurzeln</h4>
<p>Engagement am Standort Bayern und Beitrag zur regionalen Wertschöpfung.</p>
</div>
</div>
</div>
</section>
<!-- ── Bewerbungsprozess Schritt für Schritt ── -->
<section class="section section--light" id="prozess-detail">
<div class="container">
<div class="section-header reveal">
<span class="overline">Schritt für Schritt</span>
<h2>Ihr Weg zur Auszeichnung</h2>
<div class="gold-divider"></div>
</div>
<div class="timeline reveal">
<div class="timeline__item stagger-item">
<div class="timeline__dot"></div>
<p class="timeline__date">Schritt 01</p>
<h4 class="timeline__title">Online-Einreichung</h4>
<p class="timeline__text">Füllen Sie das Bewerbungs- oder Vorschlagsformular vollständig aus. Die Teilnahme ist kostenfrei.</p>
</div>
<div class="timeline__item stagger-item">
<div class="timeline__dot"></div>
<p class="timeline__date">Schritt 02</p>
<h4 class="timeline__title">Vorprüfung</h4>
<p class="timeline__text">Unser Gremium sichtet alle Unterlagen auf Vollständigkeit und Konformität mit den KMU-Kriterien.</p>
</div>
<div class="timeline__item stagger-item">
<div class="timeline__dot"></div>
<p class="timeline__date">Schritt 03</p>
<h4 class="timeline__title">Audit & Jury-Sitzung</h4>
<p class="timeline__text">Die besten Unternehmen werden durch Audits (Besuche vor Ort) tiefergehend evaluiert.</p>
</div>
<div class="timeline__item stagger-item">
<div class="timeline__dot"></div>
<p class="timeline__date">Schritt 04</p>
<h4 class="timeline__title">Preisverleihung</h4>
<p class="timeline__text">Die Gewinner werden im Rahmen der feierlichen Gala in München geehrt.</p>
</div>
</div>
</div>
</section>
<!-- ── Fristen / Termine zur Verleihung ── -->
<section class="section--sm" id="termine" style="background: var(--color-primary-light); color: var(--color-white);">
<div class="container">
<div class="flex-between reveal" style="flex-wrap: wrap; gap: var(--space-xl);">
<div>
<h3 style="color: var(--color-white); margin-bottom: var(--space-xs);">Wichtige Termine 2026</h3>
<p style="color: rgba(255,255,255,0.7);">Planen Sie Ihre Teilnahme rechtzeitig.</p>
</div>
<div class="grid grid--3" style="flex-grow: 1; text-align: center;">
<div class="stagger-item">
<p style="font-weight: var(--fw-bold); color: var(--color-accent);">30. Juni 2026</p>
<p style="font-size: var(--fs-xs);">Bewerbungsschluss</p>
</div>
<div class="stagger-item">
<p style="font-weight: var(--fw-bold); color: var(--color-accent);">August 2026</p>
<p style="font-size: var(--fs-xs);">Bekanntgabe Nominierte</p>
</div>
<div class="stagger-item">
<p style="font-weight: var(--fw-bold); color: var(--color-accent);">Oktober 2026</p>
<p style="font-size: var(--fs-xs);">Gala-Verleihung</p>
</div>
</div>
</div>
</div>
</section>
<!-- ── Bewerbungsformular / Vorschlagsformular ── -->
<section class="section" id="bewerben">
<div class="container">
<div class="form-card reveal" style="max-width: 900px; margin: 0 auto; background: var(--color-white); padding: var(--space-4xl); box-shadow: var(--shadow-2xl); border: 1px solid var(--color-gray-light);">
<div class="section-header">
<span class="overline">Direktbewerbung</span>
<h2>Bewerben oder Vorschlagen</h2>
<div class="gold-divider"></div>
<p>Sie können sich selbst bewerben oder ein herausragendes Unternehmen vorschlagen.</p>
</div>
<form id="bewerbungsformular" class="grid grid--2" style="gap: var(--space-xl);">
<div class="form-group" style="grid-column: span 2;">
<label class="form-label">Art der Einreichung *</label>
<select class="form-input" required>
<option value="">Bitte wählen...</option>
<option value="selbst">Eigenbewerbung</option>
<option value="vorschlag">Vorschlag eines anderen Unternehmens</option>
</select>
</div>
<div class="form-group">
<label class="form-label">Firmenname *</label>
<input type="text" class="form-input" required>
</div>
<div class="form-group">
<label class="form-label">Branche *</label>
<input type="text" class="form-input" required>
</div>
<div class="form-group">
<label class="form-label">Kontaktperson *</label>
<input type="text" class="form-input" required>
</div>
<div class="form-group">
<label class="form-label">E-Mail *</label>
<input type="email" class="form-input" required>
</div>
<div class="form-group" style="grid-column: span 2;">
<label class="form-label">Warum verdient dieses Unternehmen den Preis? *</label>
<textarea class="form-textarea" placeholder="Kurze Begründung..." required></textarea>
</div>
<div style="grid-column: span 2; text-align: center; margin-top: var(--space-xl);">
<button type="submit" class="btn btn--gold btn--lg">Bewerbung absenden →</button>
<p style="margin-top: var(--space-md); font-size: var(--fs-xs); color: var(--color-gray-dark);">
Noch unsicher? Schauen Sie in unsere <a href="kontakt.html#faq" style="text-decoration: underline;">FAQ</a> oder <a href="kontakt.html" style="text-decoration: underline;">kontaktieren Sie uns</a>.
</p>
</div>
</form>
</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>