Unger-Bus-Unternehmen/design_handoff_unger_reisen/README.md

# Handoff: Unger Reisen — Website-Redesign (One-Pager)

## Overview
A modern, bold one-page marketing website for **Unger Reisen**, an omnibus (coach/bus)
company from Niederbayern (Buch am Erlbach & Landshut, Germany). The page pitches their
services (coach hire, corporate/club trips, transfers), shows the fleet, displays both
locations on an interactive map, and drives visitors to call. Language: **German**.

The signature element is a **scroll-driven hero**: a stylized bus drives left→right across
the bottom of the hero as the user scrolls down.

## About the Design Files
The file in this bundle (`Unger Reisen.dc.html`) is a **design reference created in HTML** —
a working prototype showing the intended look, motion, and behavior. It is **not** production
code to copy verbatim. The task is to **recreate this design in the target codebase's
environment** (React/Next.js, Vue, Astro, plain Vite, etc.) using that project's established
patterns, component library, and conventions. If no codebase exists yet, pick the most
appropriate stack (a React/Next.js + Tailwind setup fits this well) and implement it there.

> Note on the file format: the prototype is authored as a "Design Component" (`.dc.html`)
> with a small custom template runtime (`<x-dc>`, `{{ }}` holes, `<sc-for>`, a
> `class Component extends DCLogic`). **Ignore that runtime.** It is only a prototyping
> harness. Read it as: HTML structure + inline styles + a plain JS class whose `renderVals()`
> returns the data arrays and event handlers. Reimplement with normal components and state.

## Fidelity
**High-fidelity (hifi).** Final colors, typography, spacing, layout, motion, and copy are all
intentional. Recreate pixel-closely, but re-express the styling in the target system
(e.g. Tailwind classes / styled-components) rather than copying inline styles.

---

## Design Tokens

### Colors
| Token | Value | Usage |
|---|---|---|
| `--red` (accent) | `#C8102E` | Primary accent. Marquee, stat band, buttons, pins, route, section eyebrows. (Prototype default is `#C8102E`; original palette also used `#E4002B`. Curated options: `#E4002B`, `#D21F1F`, `#C8102E`, `#EE3524`.) |
| `--ink` / `--night` | `#0a0e18` | Page background (near-black navy) |
| `--paper` | `#f4f0e8` | Light text on dark; light card backgrounds |
| Card surface | `#111725` | Dark cards (services, fleet, contact) |
| Card surface (hover) | `#151d30` | Service card hover |
| Map panel bg | `#0d1420` | Map container background |
| `--line` | `rgba(255,255,255,.14)` | Hairline borders/dividers on dark |
| `--muted` | `#8b93a7` | Muted body text |
| Body text on dark | `#c8cdda` | Hero paragraph, secondary text |
| Sub-label text | `#9aa6c0` | Pin sublabels, small caps labels |
| Footer legal text | `#5a6274` / `#40485a` | Footer links & disclaimer |
| Input border (light card) | `#d3ccbe` | Form inputs (note: forms were later removed) |

### Typography
- **Display font:** `Anton` (Google Fonts). Used for all big headlines, stat numbers, logo,
  pin labels. Always `text-transform: uppercase`, `letter-spacing: .5px`, `line-height: .9`.
- **Body/UI font:** `Archivo` (Google Fonts), weights 400–900. Body, nav, labels, buttons.
- Google Fonts import:
  `https://fonts.googleapis.com/css2?family=Anton&family=Archivo:wght@400;500;600;700;800;900&display=swap`
- Type scale (fluid, `clamp`):
  - Hero H1: `clamp(64px, 13vw, 190px)`
  - Section H2 (Anton): `clamp(40px, 7vw, 90–96px)`
  - Stat numbers: `clamp(44px, 6vw, 72px)`
  - Fleet seat number: `40px`
  - Body: `16–19px`; nav/labels/buttons: `12–15px` uppercase, `letter-spacing 1–3px`

### Spacing / Layout
- Section vertical padding: `clamp(70px, 10vw, 130px)`; horizontal: `clamp(20px, 5vw, 60px)`
- Card grid gaps: `16px`; large column gaps: `clamp(30px, 5vw, 70px)`
- Border radius: mostly **sharp** (0–2px). Buttons are rectangular (no pill). Only pins/dots are circular.

### Shadows
- Bus body: `0 18px 30px -10px rgba(0,0,0,.6)`
- Map pin dot: `0 0 0 5px <red>40, 0 2px 6px rgba(0,0,0,.55)` (red glow ring + drop)
- Buttons lift on hover via `transform: translateY(-2px)` (transition `.2s ease`)

---

## Screens / Views
Single continuous page. Sections top→bottom:

### 1. Top Marquee
- Full-width red (`--red`) bar, white uppercase text scrolling right→left infinitely.
- Content, `/`-separated: "Reisebusse mit Fahrer / Firmen & Vereine / Tagesfahrten /
  Transfers rund um die Uhr / Niederbayern".
- Implementation: duplicate the track and animate `translateX(0 → -50%)` linear infinite (~24s).
- `font-size:13px; font-weight:700; letter-spacing:2px`.

### 2. Nav (fixed/absolute over hero)
- Left: logo — "UNGER" (Anton, 26px, white) + "REISEN" (Archivo, 11px, letter-spacing 5px, red).
- Right: links (uppercase, 13.5px, weight 600) — Leistungen, Flotte, Karriere, Kontakt —
  plus a red CTA button **"Jetzt anrufen"** (`href="tel:+498762896"`).
- Sits at `top:39px` (below marquee) when at page top; **on scroll >40px** it solidifies:
  background `rgba(10,14,24,.9)`, `backdrop-filter: blur(12px)`, moves to `top:0`, reduces
  padding, adds a hairline bottom shadow. Transition `.35s ease`.

### 3. Hero (`#top`, min-height:88vh)
- Dark radial-gradient bg: `radial-gradient(120% 90% at 70% 10%, #182238 0%, #0a0e18 60%)`.
- Eyebrow: red rule + "OMNIBUSUNTERNEHMEN SEIT GENERATIONEN".
- H1 (Anton): "Wir bringen / Sie **weiter.**" — "weiter." in red.
- Paragraph (max 520px, `#c8cdda`): "Moderne Reisebusse mit erfahrenen Fahrern — für Firmen,
  Vereine und Gruppen in ganz Bayern und Europa."
- Buttons: red **"Jetzt anrufen →"** (`tel:`), outline **"Unsere Flotte"** (`#flotte`).
- **Driving scene** (bottom of hero, `height: clamp(280px,42vh,420px)`, pinned bottom):
  - Layered parallax: far scenery hills, near hills, a dark road strip, red-dashed lane stripes.
    Each is a repeating radial/linear-gradient background animated via `background-position-x`
    at different speeds (far slow ~40s, near ~18s, stripes fast ~.5s) — evokes forward motion.
  - **The bus**: CSS-drawn side view — cream body with red mid-stripe, windshield, window strip,
    "UNGER REISEN" wordmark, door, two spinning wheels (`@keyframes wheel` rotate, .5s linear),
    a pulsing headlight glow. Bus width `clamp(380px,52vw,620px)`.
  - **Scroll-driven horizontal motion:** on scroll, compute
    `hp = clamp(scrollY / (heroHeight * 0.9), 0, 1)` and set the bus
    `transform: translate(x, bob)` where `x` interpolates from just off-left
    (`-busWidth*0.30`) to `sceneWidth - busWidth*0.70`, and `bob = sin(now/380)*4` (gentle
    vertical bob; 0 if reduced-motion). Driven by `requestAnimationFrame`.
  - Respect `prefers-reduced-motion`: disable marquee, hills, stripes, wheel spin, and bob.

### 4. Stat Band
- Full-width red bg, white. Auto-fit grid of 4 stats (Anton big number + label):
  - **2** — Standorte in Bayern
  - **60+** — Sitzplätze pro Reisebus
  - **24/7** — Für Sie erreichbar
  - **∞** — Ziele in ganz Europa

### 5. Leistungen (`#leistungen`)
- Header row: H2 "Das fahren wir für Sie" + intro paragraph.
- Auto-fit grid (min 260px) of 4 dark cards (`#111725`, hairline border, min-height 260px).
  Each: big red Anton index (01–04), title (uppercase 22px/800), description. Hover: bg
  `#151d30` + `translateY(-4px)`.
  1. **Busanmietung** — "Moderne Reisebusse mit Fahrer — flexibel für einzelne Fahrten oder mehrtägige Touren."
  2. **Firmenreisen** — "Betriebsausflüge, Tagungen und Events. Ihr Team sicher und entspannt am Ziel."
  3. **Vereinsfahrten** — "Ausflüge, Feste und Sportevents — komfortabel für die ganze Gruppe."
  4. **Transfers** — "Flughafen-, Hotel- und Event-Transfers. Pünktlich und rund um die Uhr planbar."

### 6. Real Photo Band
- Full-bleed band (`height: clamp(320px,48vw,520px)`) with a background bus photo, dark
  gradient overlay (`rgba(10,14,24,.55 → .75)`), centered Anton headline:
  "Komfort, auf den Sie sich verlassen können."
- Prototype image URL: `https://www.unger-reisen.de/wp-content/uploads/startslider-bus-1024x366.png`
  (external; **replace with a licensed/owned photo** — see Assets). Has an `onerror` fallback
  to a gradient.

### 7. Flotte (`#flotte`)
- Eyebrow "Unsere Flotte" + H2 "Für jede Gruppengröße".
- Auto-fit grid (min 280px) of 3 cards. Card header row: name (Anton 30px) on the left, and a
  right-aligned inline seat unit: small "bis" + big red number (Anton 40px) + small "Sitze".
  Body: description + tag chips (hairline-bordered pills of text).
  - **Reisebus** — bis **60** — "Der Große für lange Strecken und große Gruppen — voll ausgestattet." Tags: Klimaanlage, WC, Bordküche, WLAN.
  - **Midibus** — bis **35** — "Wendig und komfortabel — ideal für mittlere Gruppen und Tagestouren." Tags: Klimaanlage, Komfortbestuhlung.
  - **Kleinbus** — bis **19** — "Persönlich und flexibel für kleine Gruppen, Transfers und Sonderfahrten." Tags: Flexibel, Wendig.

### 8. Kontakt + Karte (`#kontakt`)
- Eyebrow "So erreichen Sie uns" + H2 "Zwei Standorte. / Ein Anruf."
- Two-column grid (`1.35fr / .95fr`, stack on mobile):
  - **Left — interactive map** (panel `min-height:440px`, bg `#0d1420`, hairline border):
    - **MapLibre GL JS** map, dark Carto style
      `https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json`.
    - Two custom HTML markers (`anchor:'bottom'`): a label box (Anton title + Archivo sub) above
      a circular dot with a red glow ring.
      - **Landshut** — "Niederlassung" — coord `[12.1508, 48.5449]` — dot red, ring white.
      - **Buch a. Erlbach** — "Hauptsitz" — coord `[12.0517, 48.4703]` — dot white, ring red.
    - **Route line** between the two coords: a GeoJSON `LineString`, red, `width 3`,
      `line-dasharray [1.6,1.4]`, plus a wider low-opacity casing (`width 9, opacity .18`).
    - `NavigationControl` (zoom + compass) top-right. **`scrollZoom` disabled** so page scroll
      isn't hijacked. `fitBounds` to both points with padding `{top:96,bottom:70,left:70,right:70}`,
      `maxZoom:12`. Call `map.resize()` shortly after load.
    - Overlay chip (bottom-left, `pointer-events:none`): "**15 km** zwischen den Standorten".
    - Requires `maplibre-gl` (JS + CSS). In prototype loaded from
      `https://unpkg.com/maplibre-gl@4.7.1/...`; in a real app install the npm package.
      Map tiles load **online** — expected for a live site.
  - **Right — contact card** (`#111725`, hairline border):
    - **Hauptsitz** (white dot / red ring): "Eichenstr. 7+9, Vatersdorf · 84172 Buch am Erlbach"
      · Tel. +49 (0)8762 / 896
    - divider
    - **Niederlassung** (red dot / white ring): "Jenaer Straße 4a · 84034 Landshut"
      · Tel. +49 (0)871 / 96 58 586-0
    - CTAs pinned to bottom: red **"Jetzt anrufen"** (`tel:+498762896`) + outline
      **"info@unger-reisen.de"** (`mailto:`).

### 9. Karriere (`#karriere`)
- Bordered band. Left: eyebrow "Karriere & Jobs", H2 "Fahren Sie mit uns", paragraph
  "Wir suchen Busfahrer:innen, Begleitpersonen und Sachbearbeiter:innen — steigen Sie ein."
- Right: white button **"Offene Stellen →"** (`mailto:info@unger-reisen.de`).

### 10. Footer
- 3-column grid on `--ink`, hairline top border:
  - Logo + blurb: "Günter Unger e.K. — Omnibus- & Verkehrsunternehmen. Reisen erster Klasse aus Niederbayern."
  - **Hauptsitz**: Eichenstr. 7+9, Vatersdorf · 84172 Buch am Erlbach · Tel. +49 (0)8762 / 896
  - **Niederlassung**: Jenaer Straße 4a · 84034 Landshut · Tel. +49 (0)871 / 96 58 586-0
- Bottom bar: "© 2026 Unger Reisen · Alle Rechte vorbehalten" + Impressum / Datenschutz / AGB.
- Small disclaimer: "Konzept-Entwurf für ein mögliches Website-Redesign · noch nicht offiziell."
  (**Remove this line** once it's the real site.)

---

## Interactions & Behavior
- **Nav solidify on scroll** (>40px) — see §2.
- **Scroll-driven bus** across hero — see §3. Core formula:
  `hp = clamp(scrollY/(heroHeight*0.9),0,1)`; `x = lerp(-busW*0.3, sceneW - busW*0.7, hp)`.
- **Reveal on scroll**: elements marked for reveal start `opacity:0; translateY(28px)` and
  animate to `opacity:1; none` via IntersectionObserver (threshold ~0.12), transition
  `.7s cubic-bezier(.2,.7,.2,1)`. Provide a safety fallback that reveals everything after ~2.5s.
- **Marquee / hills / stripes / wheels**: continuous CSS keyframe loops (see §1, §3).
- **Buttons/links hover**: `translateY(-2px)` or border color → white.
- **Map**: pan/zoom via drag + control buttons; scroll-zoom disabled; compass resets bearing.
- **Smooth anchor scrolling** for nav links (`scroll-behavior: smooth`) to `#leistungen`,
  `#flotte`, `#karriere`, `#kontakt`, `#top`.
- **Reduced motion**: disable all decorative animation; keep static end states.

## State Management
Minimal — the page is largely presentational. In a component framework you need:
- Nav-scrolled boolean (or do it with a scroll listener / IntersectionObserver on a sentinel).
- The bus `x`/`bob` transform driven by a scroll + rAF loop (a ref + effect).
- Reveal-on-scroll via IntersectionObserver (a small reusable hook/directive).
- The MapLibre instance held in a ref; init in mount effect, `remove()` on unmount.
- Data arrays for **stats**, **services**, **fleet** (see copy above) — render with `.map`.
- (An earlier version had a controlled contact form; it was **removed** in favor of call/email CTAs.
  If you re-add a form, wire name/contact/dest/date/pax/message + a submitted state.)

## Configurable knobs (from the prototype's props)
- **accentColor** — the red. Default `#C8102E`; options `#E4002B / #D21F1F / #C8102E / #EE3524`.
  Applied as a CSS variable `--red`; also recolors the map route on change. Expose as a theme
  token in the real app.

## Assets
- **Fonts:** Anton + Archivo (Google Fonts) — see import above.
- **Icons:** none required (all visuals are CSS/SVG-drawn or map markers). The original shadcn
  map component referenced `lucide-react` for map control icons — use those (Plus, Minus, Locate,
  Maximize, Compass/X) if you build custom controls; MapLibre's built-in `NavigationControl`
  needs no icon assets.
- **Bus hero photo (§6):** placeholder points at unger-reisen.de. **Replace with an owned or
  licensed photo** of an Unger coach. If you need a temporary stand-in, use a royalty-free coach
  photo (e.g. an Unsplash coach/bus image) and swap later.
- **Map:** MapLibre GL JS + CSS (npm `maplibre-gl`), Carto "dark-matter" style (free, attribution
  required — keep the attribution control). Tiles fetched at runtime.
- **No logo file** — the "UNGER REISEN" logo is set in type (Anton + Archivo).

## Files
- `Unger Reisen.dc.html` — the full design prototype (all sections, styles, and JS behavior).
  Read the `<x-dc>…</x-dc>` body for structure/markup, the `<style>` in `<helmet>` for keyframes,
  and the `class Component` script for the scroll/bus/map/reveal logic and the data arrays.

## Contact facts (verbatim, safe to reuse)
- Hauptsitz: Eichenstr. 7+9, Vatersdorf, 84172 Buch am Erlbach — Tel. +49 (0)8762 / 896
- Niederlassung: Jenaer Straße 4a, 84034 Landshut — Tel. +49 (0)871 / 96 58 586-0
- E-Mail: info@unger-reisen.de
- Entity: Günter Unger e.K.
- Coordinates used on the map: Buch a. Erlbach `[12.0517, 48.4703]`, Landshut `[12.1508, 48.5449]`.