ANDJ/Unger-Bus-Unternehmen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
Unger-Bus-Unternehmen/index.html
ANDJ 306ea0862d Initiale Unger Reisen Website (statisch, mobil optimiert) 
- One-Page-Site nach Design-Handoff: Hero mit scroll-gesteuertem Bus,
  Stats, Leistungen, Foto-Band, Flotte, interaktive MapLibre-Karte, Karriere, Footer
- Vollständige Handy-Optimierung: Hamburger-Menü, responsive Grids, touch-freundliche Karte
- Bus-Foto lokal in assets/

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-11 17:04:35 +02:00

241 lines
9.4 KiB
HTML
Raw Permalink Blame History

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Unger Reisen — Reisebusse mit Fahrer aus Niederbayern</title>
<meta name="description" content="Unger Reisen — Omnibusunternehmen aus Niederbayern. Moderne Reisebusse mit erfahrenen Fahrern für Firmen, Vereine und Gruppen in ganz Bayern und Europa.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Archivo:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<!-- TOP MARQUEE -->
<div class="marquee">
<div class="marquee__track">
<span class="marquee__group">
<span class="marquee__item">Reisebusse mit Fahrer</span><span class="marquee__sep">/</span>
<span class="marquee__item">Firmen &amp; Vereine</span><span class="marquee__sep">/</span>
<span class="marquee__item">Tagesfahrten</span><span class="marquee__sep">/</span>
<span class="marquee__item">Transfers rund um die Uhr</span><span class="marquee__sep">/</span>
<span class="marquee__item">Niederbayern</span><span class="marquee__sep">/</span>
</span>
<span class="marquee__group" aria-hidden="true">
<span class="marquee__item">Reisebusse mit Fahrer</span><span class="marquee__sep">/</span>
<span class="marquee__item">Firmen &amp; Vereine</span><span class="marquee__sep">/</span>
<span class="marquee__item">Tagesfahrten</span><span class="marquee__sep">/</span>
<span class="marquee__item">Transfers rund um die Uhr</span><span class="marquee__sep">/</span>
<span class="marquee__item">Niederbayern</span><span class="marquee__sep">/</span>
</span>
</div>
</div>
<!-- NAV -->
<nav class="nav" id="nav">
<a href="#top" class="logo">
<span class="display logo__name">UNGER</span>
<span class="logo__sub">REISEN</span>
</a>
<div class="nav__right">
<div class="nav__links">
<a href="#leistungen">Leistungen</a>
<a href="#flotte">Flotte</a>
<a href="#karriere">Karriere</a>
<a href="#kontakt">Kontakt</a>
</div>
<a href="tel:+498762896" class="btn btn--red nav__cta">Jetzt anrufen</a>
<button class="nav__burger" id="nav-burger" type="button" aria-label="Menü öffnen" aria-expanded="false" aria-controls="mobile-menu">
<span></span><span></span><span></span>
</button>
</div>
</nav>
<!-- MOBILE MENU -->
<div class="mobileMenu" id="mobile-menu">
<a href="#leistungen">Leistungen</a>
<a href="#flotte">Flotte</a>
<a href="#karriere">Karriere</a>
<a href="#kontakt">Kontakt</a>
<a href="tel:+498762896" class="btn btn--red btn--block mobileMenu__cta">Jetzt anrufen</a>
</div>
<!-- HERO with animated driving scene -->
<header id="top" class="hero">
<div class="hero__type">
<div class="eyebrow" data-reveal>
<span class="eyebrow__rule"></span>Omnibusunternehmen seit Generationen
</div>
<h1 class="display hero__h1" data-reveal>
Wir bringen<br>Sie <span class="text-red">weiter.</span>
</h1>
<p class="hero__lead" data-reveal>
Moderne Reisebusse mit erfahrenen Fahrern — für Firmen, Vereine und Gruppen in ganz Bayern und Europa.
</p>
<div class="hero__actions" data-reveal>
<a href="tel:+498762896" class="btn btn--red">Jetzt anrufen →</a>
<a href="#flotte" class="btn btn--outline">Unsere Flotte</a>
</div>
</div>
<!-- DRIVING SCENE -->
<div class="scene" aria-hidden="true">
<div class="hillsFar"></div>
<div class="hills"></div>
<div class="road"></div>
<div class="stripes"></div>
<!-- BUS (scroll-driven left→right) -->
<div class="bus" id="bus">
<div class="bus__headlight"></div>
<div class="bus__body">
<div class="bus__stripe"></div>
<div class="bus__windshield"></div>
<div class="bus__windows"></div>
<div class="display bus__brand">UNGER<span class="text-red"> REISEN</span></div>
<div class="bus__door"></div>
</div>
<div class="wheel wheel--front">
<div class="wheel__hub"></div>
<div class="wheel__spoke"></div>
</div>
<div class="wheel wheel--rear">
<div class="wheel__hub"></div>
<div class="wheel__spoke"></div>
</div>
</div>
</div>
</header>
<!-- STATS BAND -->
<section class="stats">
<div class="stats__grid" id="stats-grid"></div>
</section>
<!-- LEISTUNGEN -->
<section id="leistungen" class="section">
<div class="section__head" data-reveal>
<h2 class="display section__title section__title--wide">Das fahren wir für Sie</h2>
<p class="section__intro">Ein Ansprechpartner, ein Bus, alles organisiert — von der Anfrage bis zur Rückfahrt.</p>
</div>
<div class="services" id="services-grid"></div>
</section>
<!-- REAL PHOTO BAND -->
<section class="photo">
<img class="photo__img" src="assets/startslider-bus.png"
alt="Unger Reisen Reisebus"
onerror="this.closest('.photo').classList.add('photo--fallback'); this.remove();">
<div class="photo__overlay"></div>
<div class="photo__text" data-reveal>
<div class="display photo__headline">Komfort, auf den Sie sich verlassen können.</div>
</div>
</section>
<!-- FLOTTE -->
<section id="flotte" class="section">
<div class="section__head section__head--stack" data-reveal>
<div class="eyebrow-label">Unsere Flotte</div>
<h2 class="display section__title">Für jede Gruppengröße</h2>
</div>
<div class="fleet" id="fleet-grid"></div>
</section>
<!-- KONTAKT + KARTE -->
<section id="kontakt" class="section">
<div class="section__head section__head--stack" data-reveal>
<div class="eyebrow-label">So erreichen Sie uns</div>
<h2 class="display section__title">Zwei Standorte.<br>Ein Anruf.</h2>
</div>
<div class="kontakt__grid">
<!-- INTERACTIVE MAP -->
<div class="mapPanel" data-reveal>
<div id="unger-map" class="mapPanel__map"></div>
<div class="mapPanel__chip">
<span class="display mapPanel__km">15 km</span>
<span class="mapPanel__chipLabel">zwischen<br>den Standorten</span>
</div>
</div>
<!-- CONTACT CARD -->
<div class="contactCard" data-reveal>
<div class="contactCard__row">
<div class="dot dot--white"></div>
<div>
<div class="contactCard__label">Hauptsitz</div>
<div class="contactCard__addr">Eichenstr. 7+9, Vatersdorf<br>84172 Buch am Erlbach</div>
<a href="tel:+498762896" class="contactCard__tel">Tel. +49 (0)8762 / 896</a>
</div>
</div>
<div class="contactCard__divider"></div>
<div class="contactCard__row">
<div class="dot dot--red"></div>
<div>
<div class="contactCard__label">Niederlassung</div>
<div class="contactCard__addr">Jenaer Straße 4a<br>84034 Landshut</div>
<a href="tel:+4987196585860" class="contactCard__tel">Tel. +49 (0)871 / 96 58 586-0</a>
</div>
</div>
<div class="contactCard__actions">
<a href="tel:+498762896" class="btn btn--red btn--block">Jetzt anrufen</a>
<a href="mailto:info@unger-reisen.de" class="btn btn--outline btn--block">info@unger-reisen.de</a>
</div>
</div>
</div>
</section>
<!-- KARRIERE -->
<section id="karriere" class="section section--karriere">
<div class="karriere" data-reveal>
<div class="karriere__text">
<div class="eyebrow-label">Karriere &amp; Jobs</div>
<h2 class="display karriere__title">Fahren Sie mit uns</h2>
<p class="karriere__lead">Wir suchen Busfahrer:innen, Begleitpersonen und Sachbearbeiter:innen — steigen Sie ein.</p>
</div>
<a href="mailto:info@unger-reisen.de" class="btn btn--white karriere__cta">Offene Stellen →</a>
</div>
</section>
<!-- FOOTER -->
<footer class="footer">
<div class="footer__grid">
<div>
<div class="logo footer__logo">
<span class="display logo__name logo__name--lg">UNGER</span>
<span class="logo__sub">REISEN</span>
</div>
<p class="footer__blurb">Günter Unger e.K. — Omnibus- &amp; Verkehrsunternehmen. Reisen erster Klasse aus Niederbayern.</p>
</div>
<div class="footer__col">
<div class="footer__colHead">Hauptsitz</div>
Eichenstr. 7+9, Vatersdorf<br>84172 Buch am Erlbach<br>
<a href="tel:+498762896">Tel. +49 (0)8762 / 896</a>
</div>
<div class="footer__col">
<div class="footer__colHead">Niederlassung</div>
Jenaer Straße 4a<br>84034 Landshut<br>
<a href="tel:+4987196585860">Tel. +49 (0)871 / 96 58 586-0</a>
</div>
</div>
<div class="footer__bar">
<div>© 2026 Unger Reisen · Alle Rechte vorbehalten</div>
<div class="footer__legal">
<a href="#">Impressum</a>
<a href="#">Datenschutz</a>
<a href="#">AGB</a>
</div>
</div>
</footer>
<script src="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink