INTERNES ENTWICKLUNGS-TOOL

Design System & Styleguide

Diese Seite listet alle Design-Tokens, UI-Elemente und interaktiven Komponenten der FichtelUltra-Website auf. Sie dient als visuelle Referenz und als Quelle für den Figma-Import. Alle Elemente werden großzügig untereinander dargestellt.

Design-Tokens

1. Farbpalette (Colors)

Marketing & Website (Hell)

Primary (Accent Yellow)

--color-primary / --color-accent-yellow / #EDFF7D

Secondary (Accent Orange)

--color-secondary / --color-accent-orange / #F56932

Tertiary (Accent Orange Light)

--color-tertiary / --color-accent-orange-light / #FCB246

Accent Primary (Accent Red)

--color-accent-primary / --color-accent-red / #FF1414

Secondary Accent (Accent Yellow Pale)

--color-accent-secondary / --color-accent-yellow-pale / #FDFFE0

Neutral Dark (Backgrounds/Texts)

--color-neutral-dark / #221C13

Base Weak (Background-Light)

--color-base-weak / #DFDED3

Base Strong (Muted Texts)

--color-base-strong / #9C9992

Runner & Admin Apps (Stone / Dunkel)

Stone 950 (App Deep Background)

--color-stone-950 / #0c0a09

Stone 900

--color-stone-900 / #1c1917

Stone 800

--color-stone-800 / #292524

Stone 700

--color-stone-700 / #44403c

Stone 500 (App Muted)

--color-stone-500 / #78716c

Stone 300

--color-stone-300 / #d6d3d1

Stone 100

--color-stone-100 / #f5f5f4

Semantische Farben

Success
#597F34
Warning
#B85C2B
Error
#B51111
Info
#437C94

Design-Tokens

2. Typografie (Typography)

H1 (Heading 1) — font-weight: 900

Der härteste Herbst im Gebirge.

H2 (Heading 2) — font-weight: 800

Fünf Starts. Ein gemeinsames Ziel.

H3 (Heading 3) — font-weight: 800

Aktuelles vom Trail im Detail

Lead Paragraph — class="lead"

FichtelUltra ist kein gewöhnlicher Lauf. Es ist eine Grenzerfahrung durch die raue Landschaft Frankens.

Standard Paragraph — p / 0.95rem

Wir stellen das klassische Ultra-Konzept auf den Kopf: Statt das Läuferfeld auseinanderzuziehen, bringen wir es zusammen. Die längste Distanz startet am frühen Morgen, die kürzeren Läufe steigen zeitversetzt an Punkten entlang der Strecke ein.

Meta-Tag / Label — class="tag-meta"

17. OKTOBER 2026 · BAD ALEXANDERSBAD

Person-Link — class="person-link"
Footer-Link — class="footer-link" (on dark bg)

UI Elements

3. Buttons & Badges

Primary Button — class="btn-primary"

Tertiary Button — class="btn-tertiary"

Outline Button (Dark) — class="btn-outline"

Outline Button (Light) — class="btn-outline-light"

Distance Tag — class="tag-km" 72 km

Einsatzorte Meta Badge — class="tag-meta" 📍 Fichtelsee

Shadows & Radius Tokens
Radius Sharp (2px) + Shadow SM
Radius Sharp (2px) + Shadow MD

UI Elements

4. Formulare & Eingabefelder (Forms)

Checkbox / Form-Kontrolle

Fehlermeldung (Error Banner)
Fehler beim Senden! Bitte überprüfe deine E-Mail-Adresse.
Erfolgsmeldung (Success Banner)
Anmeldung erfolgreich! Bestätigungs-E-Mail wurde versendet.

Crew & Helpers

5. Helferbörse (Volunteer Elements)

Einsatz-System-Infobox

Das FichtelUltra Springersystem

Da das Läuferfeld über den Tag verteilt zeitversetzt durch das Fichtelgebirge zieht, rotieren unsere Helfer-Teams mit dem Feld mit. Sobald z.B. eine nördliche Station abgebaut ist, verlegt die Crew ihren Einsatzort weiter südlich.


Job-Kategorie Filter

Job-Stellenanzeigen (Cards) - Einzeln untereinander

Zeitmesser Checkpoint 1

📍 Waldsteinhaus
Zeitmessung

Erfassung der Startnummern beim Durchlauf der Runner per PWA-App.

⏰ 17.10. 07:45 — 12:00
Noch 2 von 4 Stellen frei

Streckenposten Gipfel

📍 Schneeberg
Streckenposten

Wegweisung und Motivierung der Läufer am höchsten Punkt.

Voraussetzungen: Trittsicherheit, warme Kleidung.
⏰ 17.10. 08:30 — 14:15
Noch 1 Stelle frei

Verpflegungs-Chef

📍 Fichtelsee
Verpflegung

Betreuung des großen Buffets und Getränkeausgabe am See.

⏰ 17.10. 10:00 — 17:30
Bedarf gedeckt

Timing & Analytics

6. Leaderboard- & Höhenprofil-Elemente

Leaderboard-Fehler-Banner
Suche-Eingabefeld (.lb-search) - volle Breite

Skeleton Loader (.lb-skeleton-bar)
Tabelle & Sortierung Header
Platz NameLetzter CP
1Maria HuberWaldsteinhaus (km 28.5)

Mobile Leaderboard-Cards - Einzeln untereinander
#4 #204 Ultra 72K
Thomas Schmidt
Letzter CP
Fichtelsee (km 43.1) · 12:44 Uhr
#102 Hero 50K Finish
Maria Huber
Zeit
04:32:15 Std. (Gesamtrang: 1)
#315 Trail 31K
Christian Pecher
Confirmed

Höhenprofil (Statische SVG Visualisierung) - volle Breite

HÖHENPROFIL — ULTRA 72K D+ 2300 m   540–1050 m ü.NN

Kornberg (km 15)Schneeberg (km 32)Ziel‹ 15.0 km ›‹ 17.2 km ›640 m ü.NNkm 25.4→ Waldstein 3.1 km
Höhenprofil Design-Tokens
  • Schriftart: 'Plus Jakarta Sans', system-ui
  • Area Füllung: rgba(156,153,146,0.1)
  • Streckenlinie: var(--neutral-dark) (#221C13)
  • Tooltip Box: #1c1917 (Opacity: 0.92)
  • Tooltip Text: White / #ffffff
  • Ticks & Grid: rgba(156,153,146,0.3)
  • Läufer-Balken (Live-Dichte): Accent Yellow (#EDFF7D)

Map Elements

7. Karten-Elemente & Kartentokens (Map Markers)

Streckenkarten-Marker (Route & Checkpoints) - untereinander gelistet

S

Startpunkt (S)

#FF1414 (Accent Red)

VP1

Verpflegungspunkt (VP)

#FDFFE0 (Yellow Pale) · Text: #221C13

W1

Wasserstelle (W)

#FCB246 (Accent Orange Light)

Z

Zielpunkt (Z)

#DFDED3 (Base Weak) · Text: #221C13

Streckenführung (GPX-Line)

#EDFF7D (Accent Yellow)

Helferkarten-Marker (Volunteer Roles) - untereinander gelistet

Z

Zeitmessung (Role: timing)

#FCB246 (Accent Orange Light) · Label: Erste Initiale (Z)

V

Verpflegung (Role: aid_station)

#FDFFE0 (Yellow Pale) · Label: Erste Initiale (V)

S

Streckenposten / Besenläufer (Role: marshal)

#F56932 (Accent Orange) · Label: Erste Initiale (S)

A

Allgemeine Helferrolle (Role: general)

#DFDED3 (Base Weak) · Label: Erste Initiale (A)

Page Components

8. Integrierte Website-Sektionen

Concept Section (`ConceptSection.astro`)

Das Konzept

Fünf Starts.
Ein gemeinsames Ziel.

Wir stellen das klassische Ultra-Konzept auf den Kopf: Statt das Läuferfeld auseinanderzuziehen, bringen wir es zusammen. Die längste Distanz startet am frühen Morgen, die kürzeren Läufe steigen zeitversetzt an Punkten entlang der Strecke ein. Je weiter du läufst, desto belebter werden die Trails. Am Ende verschmelzen alle Distanzen zu einer Gruppe, die sich gegenseitig motiviert und gemeinsam ins Ziel einläuft.

5

Distanzen

1

Ziel

Das Konzept: Fünf Starts, ein Ziel
Distances Section (`DistancesSection.astro`)

Strecken

Finde deine Distanz.

Das ganze Fichtelgebirge, oder nur ein Stück davon? Wähle die Herausforderung die zu dir passt und erkunde deine Route in der interaktiven Karte.

Benefits Section (`BenefitsSection.astro`)

Warum FichtelUltra

Was dich erwartet.

Hier sind die Dinge, die FichtelUltra zu dem machen, was es ist.

Fünf Distanzen, ein Ziel. Die kürzeren Strecken starten zeitversetzt auf derselben Route. Je weiter du läufst, desto belebter wird der Trail. Niemand kommt einsam an.

Maximal 100 Startplätze über alle Distanzen. Kein Massenauflauf, kein anonymes Nummernziehen. Familiär, nahbar und respektvoll gegenüber der Natur.

12 Gipfel, wilde Granitfelsen und dichte Wälder. Kein künstlicher Erlebnispark, sondern anspruchsvolle Natur, die echten Respekt verlangt.

Bei uns zählt das gemeinsame Ankommen und gegenseitige Unterstützen mehr als die Bestzeit auf der Uhr. Finisher statt Podium.

An unseren Stationen gibt es keine künstlichen Gels, sondern selbstgemachte Riegel, frisches Obst, Salzkartoffeln und natürliche Elektrolyte.

Kein billiges Polyester-Shirt und keine Plaketten aus Übersee. Im Ziel wartet ein handgravierter Fichtelgebirgs-Granitstein als Unikat auf dich.

Inclusive Hardcore Section (`InclusiveHardcoreSection.astro`)

Unsere Philosophie

Inclusive Hardcore.
Hart in der Sache, offen für alle.

FichtelUltra ist kein Elite-Event. Wir verbinden anspruchsvollstes Terrain im Fichtelgebirge mit einer Atmosphäre, in der jede und jeder willkommen ist — egal ob erster Ultra oder zehnter 100-Meiler.

Kein Cutoff-Stress auf den ersten Kilometern. Großzügige Zeitlimits, damit du deinen eigenen Rhythmus findest.

Wer bergauf geht, schont die Beine für das, was noch kommt. Wer seine Kräfte kennt, kommt weiter.

Mehr über FichtelUltra →
Trailrunning im Fichtelgebirge
FAQ Section (`FAQSection.astro`)

Häufige Fragen

Was du wissen willst.

Nicht gefunden, was du suchst? Schreib uns — wir antworten.

Wo ist das Ziel? Wo starte ich?

Alle fünf Distanzen enden am selben Ort: Bad Alexandersbad im Fichtelgebirge. Das ist das Herzstück des Konzepts — egal von wo du startest, ihr kommt alle zusammen ins Ziel.

Die Startpunkte variieren je nach Distanz:

DistanzStartpunkt
12 Gipfel UltraKornberghaus
Schneeberg UltraWaldsteinhaus
Ochsenkopf LoopFichtelsee
HalbmarathonFichtelsee
Community TrailWurmlohe

Shuttle-Optionen zu den jeweiligen Startpunkten werden rechtzeitig vor dem Start kommuniziert.

Wann starten die einzelnen Distanzen?

Die Startzeiten sind gestaffelt, damit alle Distanzen möglichst gemeinsam in Bad Alexandersbad ankommen. Das Ergebnis: die Strecke wird im Laufe des Tages voller, nicht leerer.

DistanzStartzeitStartpunkt
12 Gipfel Ultra07:00 UhrKornberghaus
Schneeberg Ultra10:15 UhrWaldsteinhaus
Ochsenkopf Loop13:00 UhrFichtelsee
Halbmarathon14:30 UhrFichtelsee
Community Trail16:15 UhrWurmlohe

Das Ziel öffnet ab ca. 16:30 Uhr für die ersten Finisher und bleibt für alle folgenden offen.

Was kostet die Teilnahme?

Die genauen Startgebühren werden zusammen mit dem Anmeldungsstart bekannt gegeben. Das Preisniveau orientiert sich an vergleichbaren Trailruns dieser Größe und Streckenqualität.

Eines vorab: Wir kalkulieren so, dass der Preis zur Leistung passt — kein Aufschlag für Hype, kein Abzug auf Kosten der Qualität.

Wer sich möglichst früh anmeldet, profitiert vom günstigsten Preis. Die Startplatzzahl ist auf 100 Teilnehmerinnen und Teilnehmer begrenzt.

Testimonials Section (`TestimonialsSection.astro`)

Das sagen die Teilnehmenden

Man merkt einfach, dass ihr alle mit Herzblut dabei seid. Das Format ist geil.

Mega sympathisch, dass ihr uns als erste Finisher und nicht als Sieger bezeichnet habt. Einer der vielen Punkte, die ich super fand.

Der Mix aus Trails, Forststraßen und Co. war echt super.

Wir waren auf jedem Gipfel – das hat den Ehrgeiz immer wieder gepusht.

Die kurzfristige Tapeaktion war mega hilfreich. Hier wird mitgedacht. Gerne wieder!

Was die Organisation angeht: Absolut gar nichts ändern! Das Team war einfach spitze.

Die Strecke war total passend – den Kurs würde ich gerne wieder komplett laufen.

Event CTA Section (`EventCTA.astro`)

17. Oktober 2026

FichtelUltra 2026

Inclusive Hardcore: Fünf Distanzen und ein Ziel.

Jetzt anmelden →
Sponsors Grid Component (`SponsorsGrid.astro`)

Unsere Partner

AlexBadFichtelseeBistro HollyKornberghausWaldsteinhaus

Unsere Partner

AlexBadFichtelseeBistro HollyKornberghausWaldsteinhaus