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>
This commit is contained in:
544
css/style.css
Normal file
544
css/style.css
Normal file
@@ -0,0 +1,544 @@
|
||||
/* =========================================================
|
||||
Unger Reisen — Website Redesign
|
||||
Design tokens, layout, components & motion
|
||||
========================================================= */
|
||||
|
||||
*{ margin:0; padding:0; box-sizing:border-box; }
|
||||
|
||||
:root{
|
||||
--red:#C8102E; /* primary accent */
|
||||
--ink:#0a0e18; /* page bg (near-black navy) */
|
||||
--night:#0a0e18;
|
||||
--paper:#f4f0e8; /* light text / light cards */
|
||||
--cream:#efe9dc;
|
||||
--card:#111725; /* dark card surface */
|
||||
--card-hover:#151d30;
|
||||
--line:rgba(255,255,255,.14);
|
||||
--muted:#8b93a7;
|
||||
--body:#c8cdda; /* secondary body text on dark */
|
||||
}
|
||||
|
||||
html{ scroll-behavior:smooth; }
|
||||
|
||||
body{
|
||||
background:var(--ink);
|
||||
color:var(--paper);
|
||||
font-family:'Archivo', system-ui, sans-serif;
|
||||
-webkit-font-smoothing:antialiased;
|
||||
line-height:1.5;
|
||||
overflow-x:hidden;
|
||||
}
|
||||
|
||||
a{ color:inherit; text-decoration:none; }
|
||||
::selection{ background:var(--red); color:#fff; }
|
||||
|
||||
.display{
|
||||
font-family:'Anton', sans-serif;
|
||||
font-weight:400;
|
||||
text-transform:uppercase;
|
||||
letter-spacing:.5px;
|
||||
line-height:.9;
|
||||
}
|
||||
|
||||
.text-red{ color:var(--red); }
|
||||
|
||||
/* ---------- Buttons ---------- */
|
||||
.btn{
|
||||
display:inline-flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
gap:10px;
|
||||
font-size:15px;
|
||||
font-weight:700;
|
||||
text-transform:uppercase;
|
||||
letter-spacing:1px;
|
||||
padding:17px 34px;
|
||||
transition:transform .2s ease, border-color .2s ease, background .2s ease;
|
||||
cursor:pointer;
|
||||
}
|
||||
.btn--red{ background:var(--red); color:#fff; }
|
||||
.btn--red:hover{ transform:translateY(-2px); }
|
||||
.btn--outline{ border:1.5px solid rgba(255,255,255,.3); color:#fff; padding:17px 30px; }
|
||||
.btn--outline:hover{ border-color:#fff; }
|
||||
.btn--white{ background:#fff; color:var(--ink); padding:17px 34px; white-space:nowrap; }
|
||||
.btn--white:hover{ transform:translateY(-2px); }
|
||||
.btn--block{ width:100%; padding:16px; }
|
||||
|
||||
/* ---------- Marquee ---------- */
|
||||
.marquee{
|
||||
background:var(--red);
|
||||
color:#fff;
|
||||
overflow:hidden;
|
||||
white-space:nowrap;
|
||||
padding:9px 0;
|
||||
position:relative;
|
||||
z-index:60;
|
||||
font-weight:700;
|
||||
font-size:13px;
|
||||
letter-spacing:2px;
|
||||
text-transform:uppercase;
|
||||
}
|
||||
.marquee__track{
|
||||
display:inline-flex;
|
||||
animation:marquee 24s linear infinite;
|
||||
will-change:transform;
|
||||
}
|
||||
.marquee__group{ display:inline-flex; }
|
||||
.marquee__item{ padding:0 26px; }
|
||||
.marquee__sep{ opacity:.55; }
|
||||
|
||||
/* ---------- Nav ---------- */
|
||||
.nav{
|
||||
position:absolute;
|
||||
top:39px; left:0; right:0;
|
||||
z-index:50;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:space-between;
|
||||
padding:22px clamp(20px,5vw,60px);
|
||||
transition:background .35s ease, padding .35s ease, box-shadow .35s ease, top .35s ease;
|
||||
}
|
||||
.nav.is-scrolled{
|
||||
background:rgba(10,14,24,.9);
|
||||
-webkit-backdrop-filter:blur(12px);
|
||||
backdrop-filter:blur(12px);
|
||||
top:0;
|
||||
padding:14px clamp(20px,5vw,60px);
|
||||
box-shadow:0 1px 0 rgba(255,255,255,.08);
|
||||
}
|
||||
|
||||
.logo{ display:flex; align-items:baseline; gap:9px; }
|
||||
.logo__name{ font-size:26px; color:#fff; }
|
||||
.logo__name--lg{ font-size:30px; }
|
||||
.logo__sub{ font-weight:700; font-size:11px; letter-spacing:5px; color:var(--red); }
|
||||
|
||||
.nav__right{ display:flex; align-items:center; gap:34px; }
|
||||
.nav__links{
|
||||
display:flex; gap:28px;
|
||||
font-size:13.5px; font-weight:600;
|
||||
text-transform:uppercase; letter-spacing:1px;
|
||||
}
|
||||
.nav__links a{ transition:color .2s ease; }
|
||||
.nav__links a:hover{ color:var(--red); }
|
||||
.nav__cta{ font-size:13px; padding:12px 24px; }
|
||||
|
||||
/* Hamburger (mobile only) */
|
||||
.nav__burger{
|
||||
display:none;
|
||||
flex-direction:column; align-items:center; justify-content:center;
|
||||
gap:5px; width:42px; height:42px; padding:0;
|
||||
background:transparent; border:0; cursor:pointer;
|
||||
position:relative; z-index:55;
|
||||
}
|
||||
.nav__burger span{
|
||||
display:block; width:24px; height:2px; background:#fff; border-radius:2px;
|
||||
transition:transform .3s ease, opacity .2s ease;
|
||||
}
|
||||
.nav__burger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
|
||||
.nav__burger.is-open span:nth-child(2){ opacity:0; }
|
||||
.nav__burger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
|
||||
|
||||
/* Mobile menu overlay */
|
||||
.mobileMenu{
|
||||
display:none;
|
||||
position:fixed; inset:0; z-index:45;
|
||||
background:rgba(10,14,24,.98);
|
||||
-webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
|
||||
flex-direction:column; gap:2px;
|
||||
padding:88px 24px 40px;
|
||||
}
|
||||
.mobileMenu.is-open{ display:flex; }
|
||||
.mobileMenu a:not(.btn){
|
||||
font-size:22px; font-weight:700; text-transform:uppercase; letter-spacing:1px;
|
||||
color:#fff; padding:18px 4px; border-bottom:1px solid var(--line);
|
||||
}
|
||||
.mobileMenu__cta{ margin-top:24px; }
|
||||
|
||||
/* ---------- Hero ---------- */
|
||||
.hero{
|
||||
position:relative;
|
||||
min-height:88vh;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
justify-content:center;
|
||||
overflow:hidden;
|
||||
background:radial-gradient(120% 90% at 70% 10%, #182238 0%, #0a0e18 60%);
|
||||
}
|
||||
.hero__type{
|
||||
position:relative;
|
||||
z-index:20;
|
||||
padding:150px clamp(20px,5vw,60px) 0;
|
||||
pointer-events:none;
|
||||
}
|
||||
.eyebrow{
|
||||
display:inline-flex; align-items:center; gap:12px;
|
||||
font-size:12px; font-weight:700; letter-spacing:3px;
|
||||
text-transform:uppercase; color:var(--red);
|
||||
margin-bottom:22px; pointer-events:auto;
|
||||
}
|
||||
.eyebrow__rule{ width:34px; height:2px; background:var(--red); }
|
||||
.hero__h1{
|
||||
font-size:clamp(64px,13vw,190px);
|
||||
color:#fff; letter-spacing:-1px;
|
||||
}
|
||||
.hero__lead{
|
||||
max-width:520px; margin-top:26px;
|
||||
font-size:clamp(16px,1.5vw,19px);
|
||||
color:var(--body); pointer-events:auto;
|
||||
}
|
||||
.hero__actions{
|
||||
display:flex; flex-wrap:wrap; gap:14px;
|
||||
margin-top:34px; pointer-events:auto;
|
||||
}
|
||||
|
||||
/* ---------- Driving scene ---------- */
|
||||
.scene{
|
||||
position:relative;
|
||||
z-index:10;
|
||||
height:clamp(280px,42vh,420px);
|
||||
margin-top:auto;
|
||||
width:100%;
|
||||
}
|
||||
.hillsFar{
|
||||
position:absolute; bottom:64px; left:0; right:0; height:120px;
|
||||
background-repeat:repeat-x; background-size:800px 120px;
|
||||
opacity:.4; animation:scrollFar 40s linear infinite;
|
||||
background-image:
|
||||
radial-gradient(120px 120px at 120px 120px, #223052 0 99%, transparent 100%),
|
||||
radial-gradient(160px 160px at 460px 150px, #1c2743 0 99%, transparent 100%),
|
||||
radial-gradient(120px 120px at 700px 130px, #223052 0 99%, transparent 100%);
|
||||
}
|
||||
.hills{
|
||||
position:absolute; bottom:58px; left:0; right:0; height:90px;
|
||||
background-repeat:repeat-x; background-size:360px 90px;
|
||||
opacity:.7; animation:scrollx 18s linear infinite;
|
||||
background-image:
|
||||
radial-gradient(90px 90px at 70px 100px, #2a3a5f 0 99%, transparent 100%),
|
||||
radial-gradient(120px 120px at 250px 120px, #26355699 0 99%, transparent 100%);
|
||||
}
|
||||
.road{
|
||||
position:absolute; bottom:0; left:0; right:0; height:64px;
|
||||
background:#11151f; border-top:3px solid #1c2233;
|
||||
}
|
||||
.stripes{
|
||||
position:absolute; bottom:29px; left:0; right:0; height:5px;
|
||||
background-repeat:repeat-x; background-size:120px 5px;
|
||||
animation:scrollxFast .5s linear infinite;
|
||||
background-image:linear-gradient(90deg, rgba(228,0,43,.9) 0 60px, transparent 60px 120px);
|
||||
}
|
||||
|
||||
/* ---------- Bus ---------- */
|
||||
.bus{
|
||||
position:absolute; bottom:52px; left:0;
|
||||
width:clamp(380px,52vw,620px);
|
||||
will-change:transform;
|
||||
transform:translateX(-30%);
|
||||
}
|
||||
.bus__headlight{
|
||||
position:absolute; right:-40px; bottom:6px; width:120px; height:60px;
|
||||
background:radial-gradient(ellipse at left center, rgba(255,220,120,.5), transparent 70%);
|
||||
animation:headlightPulse 2s ease-in-out infinite;
|
||||
}
|
||||
.bus__body{
|
||||
position:relative;
|
||||
height:clamp(120px,17vw,178px);
|
||||
background:linear-gradient(180deg,#f2f0ea 0%,#dfdbd0 100%);
|
||||
border-radius:22px 30px 12px 12px;
|
||||
box-shadow:0 18px 30px -10px rgba(0,0,0,.6);
|
||||
overflow:hidden;
|
||||
}
|
||||
.bus__stripe{ position:absolute; bottom:24%; left:0; right:0; height:15%; background:var(--red); }
|
||||
.bus__windshield{
|
||||
position:absolute; top:14%; right:5%; width:20%; height:42%;
|
||||
background:linear-gradient(120deg,#8fb4d8,#4d6f96);
|
||||
border-radius:6px 14px 6px 6px;
|
||||
}
|
||||
.bus__windows{
|
||||
position:absolute; top:14%; left:6%; width:66%; height:42%; border-radius:6px;
|
||||
background-color:#4d6f96;
|
||||
background-image:linear-gradient(90deg, transparent 0 3%, #6f92b8 3% 15%, transparent 15% 18%);
|
||||
background-size:16.6% 100%; background-repeat:repeat-x;
|
||||
}
|
||||
.bus__brand{
|
||||
position:absolute; bottom:6%; left:7%;
|
||||
font-size:clamp(11px,1.5vw,15px); color:var(--ink); letter-spacing:1px;
|
||||
}
|
||||
.bus__door{
|
||||
position:absolute; top:14%; right:27%; width:8%; height:70%;
|
||||
background:#37506f; border-radius:4px;
|
||||
}
|
||||
.wheel{
|
||||
position:absolute; bottom:-14px;
|
||||
width:clamp(42px,6vw,60px); height:clamp(42px,6vw,60px);
|
||||
border-radius:50%; background:#14181f; border:6px solid #23262e;
|
||||
animation:wheel .5s linear infinite;
|
||||
}
|
||||
.wheel--front{ left:16%; }
|
||||
.wheel--rear{ right:18%; }
|
||||
.wheel__hub{ position:absolute; inset:34%; background:#3a3f49; border-radius:50%; }
|
||||
.wheel__spoke{
|
||||
position:absolute; top:2px; left:50%; width:2px; height:40%;
|
||||
background:#454a55; transform:translateX(-50%);
|
||||
}
|
||||
|
||||
/* ---------- Stats band ---------- */
|
||||
.stats{
|
||||
background:var(--red); color:#fff;
|
||||
padding:clamp(34px,5vw,54px) clamp(20px,5vw,60px);
|
||||
}
|
||||
.stats__grid{
|
||||
display:grid;
|
||||
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
|
||||
gap:30px;
|
||||
}
|
||||
.stat__big{ font-size:clamp(44px,6vw,72px); color:#fff; line-height:.85; }
|
||||
.stat__label{ font-size:14px; font-weight:600; margin-top:10px; color:rgba(255,255,255,.85); }
|
||||
|
||||
/* ---------- Generic section ---------- */
|
||||
.section{ padding:clamp(70px,10vw,130px) clamp(20px,5vw,60px); }
|
||||
.section--karriere{ padding:clamp(60px,8vw,110px) clamp(20px,5vw,60px); }
|
||||
|
||||
.section__head{
|
||||
display:flex; align-items:flex-end; justify-content:space-between;
|
||||
flex-wrap:wrap; gap:20px; margin-bottom:54px;
|
||||
}
|
||||
.section__head--stack{ display:block; margin-bottom:48px; }
|
||||
.section__title{ font-size:clamp(40px,7vw,90px); color:#fff; }
|
||||
.section__title--wide{ max-width:12ch; }
|
||||
.section__intro{ max-width:320px; color:var(--muted); font-size:16px; }
|
||||
|
||||
.eyebrow-label{
|
||||
font-size:12px; font-weight:700; letter-spacing:3px;
|
||||
text-transform:uppercase; color:var(--red); margin-bottom:16px;
|
||||
}
|
||||
|
||||
/* ---------- Leistungen ---------- */
|
||||
.services{
|
||||
display:grid;
|
||||
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
|
||||
gap:16px;
|
||||
}
|
||||
.service{
|
||||
position:relative;
|
||||
background:var(--card);
|
||||
border:1px solid var(--line);
|
||||
padding:38px 30px 34px;
|
||||
min-height:260px;
|
||||
display:flex; flex-direction:column; overflow:hidden;
|
||||
transition:background .3s ease, transform .3s ease;
|
||||
}
|
||||
.service:hover{ background:var(--card-hover); transform:translateY(-4px); }
|
||||
.service__no{ font-size:60px; color:rgba(228,0,43,.9); line-height:.8; }
|
||||
.service__title{
|
||||
font-size:22px; font-weight:800; margin:auto 0 10px;
|
||||
text-transform:uppercase; letter-spacing:.3px;
|
||||
}
|
||||
.service__desc{ font-size:15px; color:var(--muted); line-height:1.55; }
|
||||
|
||||
/* ---------- Photo band ---------- */
|
||||
.photo{
|
||||
position:relative; height:clamp(320px,48vw,520px);
|
||||
overflow:hidden; display:flex; align-items:center; justify-content:center;
|
||||
text-align:center;
|
||||
}
|
||||
.photo--fallback{ background:linear-gradient(135deg,#151d30,#0a0e18); }
|
||||
.photo__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
|
||||
.photo__overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,14,24,.55), rgba(10,14,24,.75)); }
|
||||
.photo__text{ position:relative; z-index:2; padding:20px; }
|
||||
.photo__headline{ font-size:clamp(30px,5vw,64px); color:#fff; max-width:16ch; margin:0 auto; }
|
||||
|
||||
/* ---------- Flotte ---------- */
|
||||
.fleet{
|
||||
display:grid;
|
||||
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
|
||||
gap:16px;
|
||||
}
|
||||
.fleetCard{ border:1px solid var(--line); background:var(--card); display:flex; flex-direction:column; }
|
||||
.fleetCard__head{
|
||||
padding:34px 30px 22px; border-bottom:1px solid var(--line);
|
||||
display:flex; align-items:center; justify-content:space-between; gap:16px;
|
||||
}
|
||||
.fleetCard__name{ font-size:30px; color:#fff; }
|
||||
.fleetCard__seats{ display:flex; align-items:baseline; gap:8px; white-space:nowrap; }
|
||||
.fleetCard__seatsWord{ font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:1px; }
|
||||
.fleetCard__seatsNum{ font-size:40px; color:var(--red); line-height:1; }
|
||||
.fleetCard__body{ padding:24px 30px 30px; }
|
||||
.fleetCard__desc{ font-size:15px; color:var(--muted); line-height:1.55; margin-bottom:20px; }
|
||||
.fleetCard__tags{ display:flex; flex-wrap:wrap; gap:8px; }
|
||||
.tag{ font-size:12px; font-weight:600; border:1px solid var(--line); padding:6px 13px; color:var(--body); }
|
||||
|
||||
/* ---------- Kontakt + Karte ---------- */
|
||||
.kontakt__grid{
|
||||
display:grid;
|
||||
grid-template-columns:1.35fr .95fr;
|
||||
gap:20px; align-items:stretch;
|
||||
}
|
||||
.mapPanel{
|
||||
position:relative; border:1px solid var(--line); background:#0d1420;
|
||||
overflow:hidden; min-height:440px; border-radius:2px;
|
||||
}
|
||||
.mapPanel__map{ position:absolute; inset:0; }
|
||||
.mapPanel__chip{
|
||||
position:absolute; left:16px; bottom:16px; z-index:2; pointer-events:none;
|
||||
background:rgba(10,14,24,.85); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
|
||||
border:1px solid var(--line); padding:10px 14px;
|
||||
display:flex; align-items:center; gap:10px;
|
||||
}
|
||||
.mapPanel__km{ font-size:20px; color:var(--red); }
|
||||
.mapPanel__chipLabel{
|
||||
font-size:11px; color:#9aa6c0; text-transform:uppercase;
|
||||
letter-spacing:1px; font-weight:700; line-height:1.2;
|
||||
}
|
||||
|
||||
.contactCard{
|
||||
border:1px solid var(--line); background:var(--card);
|
||||
padding:clamp(28px,3vw,40px);
|
||||
display:flex; flex-direction:column; gap:30px;
|
||||
}
|
||||
.contactCard__row{ display:flex; gap:16px; }
|
||||
.dot{ width:14px; height:14px; border-radius:50%; flex-shrink:0; margin-top:4px; }
|
||||
.dot--white{ background:#fff; border:4px solid var(--red); }
|
||||
.dot--red{ background:var(--red); border:4px solid rgba(255,255,255,.25); }
|
||||
.contactCard__label{
|
||||
font-size:11px; font-weight:800; letter-spacing:2px;
|
||||
text-transform:uppercase; color:var(--red); margin-bottom:6px;
|
||||
}
|
||||
.contactCard__addr{ font-size:17px; font-weight:700; color:#fff; line-height:1.4; }
|
||||
.contactCard__tel{ display:inline-block; margin-top:8px; font-size:15px; font-weight:600; color:var(--body); }
|
||||
.contactCard__divider{ height:1px; background:var(--line); }
|
||||
.contactCard__actions{ margin-top:auto; display:flex; flex-direction:column; gap:12px; }
|
||||
|
||||
/* ---------- Karriere ---------- */
|
||||
.karriere{
|
||||
border:1px solid var(--line); padding:clamp(34px,5vw,60px);
|
||||
display:flex; justify-content:space-between; align-items:center;
|
||||
flex-wrap:wrap; gap:28px;
|
||||
}
|
||||
.karriere__text{ max-width:600px; }
|
||||
.karriere__title{ font-size:clamp(34px,5vw,62px); color:#fff; margin-bottom:14px; }
|
||||
.karriere__lead{ font-size:16px; color:var(--muted); }
|
||||
|
||||
/* ---------- Footer ---------- */
|
||||
.footer{
|
||||
border-top:1px solid var(--line);
|
||||
padding:clamp(50px,6vw,80px) clamp(20px,5vw,60px) 40px;
|
||||
}
|
||||
.footer__grid{
|
||||
display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px;
|
||||
padding-bottom:44px; border-bottom:1px solid var(--line);
|
||||
}
|
||||
.footer__logo{ margin-bottom:18px; }
|
||||
.footer__blurb{ font-size:15px; color:var(--muted); max-width:300px; }
|
||||
.footer__col{ font-size:14.5px; color:var(--muted); line-height:1.9; }
|
||||
.footer__col a{ color:var(--muted); }
|
||||
.footer__colHead{
|
||||
color:#fff; font-weight:700; margin-bottom:12px;
|
||||
letter-spacing:1.5px; font-size:12px; text-transform:uppercase;
|
||||
}
|
||||
.footer__bar{
|
||||
display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px;
|
||||
padding-top:24px; font-size:13px; color:#5a6274;
|
||||
}
|
||||
.footer__legal{ display:flex; gap:22px; }
|
||||
.footer__legal a{ color:#5a6274; }
|
||||
|
||||
/* ---------- Reveal on scroll ---------- */
|
||||
[data-reveal]{
|
||||
opacity:0; transform:translateY(28px);
|
||||
transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
|
||||
}
|
||||
[data-reveal].is-visible{ opacity:1; transform:none; }
|
||||
|
||||
/* ---------- Responsive ---------- */
|
||||
@media (max-width:980px){
|
||||
.kontakt__grid{ grid-template-columns:1fr; }
|
||||
.footer__grid{ grid-template-columns:1fr; gap:30px; }
|
||||
.section__head{ margin-bottom:44px; }
|
||||
}
|
||||
|
||||
@media (max-width:680px){
|
||||
/* Nav → fixed mobile header + hamburger */
|
||||
.marquee{ display:none; }
|
||||
.nav, .nav.is-scrolled{
|
||||
position:fixed; top:0; left:0; right:0;
|
||||
background:rgba(10,14,24,.95);
|
||||
-webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
|
||||
padding:12px 20px;
|
||||
box-shadow:0 1px 0 rgba(255,255,255,.08);
|
||||
}
|
||||
.nav__links{ display:none; }
|
||||
.nav__cta{ display:none; }
|
||||
.nav__burger{ display:flex; }
|
||||
|
||||
/* Hero */
|
||||
.hero{ min-height:auto; }
|
||||
.hero__type{ padding:104px 20px 0; }
|
||||
.hero__h1{ font-size:clamp(44px,12vw,80px); }
|
||||
.hero__lead{ font-size:16px; margin-top:20px; }
|
||||
.hero__actions{ margin-top:28px; }
|
||||
.scene{ height:clamp(200px,32vh,300px); }
|
||||
.bus{ width:clamp(240px,62vw,440px); }
|
||||
.bus__body{ height:clamp(80px,15vw,150px); }
|
||||
.wheel{ width:clamp(34px,9vw,52px); height:clamp(34px,9vw,52px); }
|
||||
|
||||
/* Stats — 2 per row */
|
||||
.stats{ padding:36px 20px; }
|
||||
.stats__grid{ grid-template-columns:repeat(2,1fr); gap:22px; }
|
||||
.stat__big{ font-size:clamp(40px,13vw,58px); }
|
||||
|
||||
/* Sections */
|
||||
.section{ padding:64px 20px; }
|
||||
.section--karriere{ padding:56px 20px; }
|
||||
.section__head{ flex-direction:column; align-items:flex-start; gap:14px; margin-bottom:34px; }
|
||||
.section__intro{ max-width:none; }
|
||||
.section__title{ font-size:clamp(38px,10vw,60px); }
|
||||
|
||||
/* Photo band */
|
||||
.photo__headline{ font-size:clamp(28px,8vw,44px); }
|
||||
|
||||
/* Map + contact */
|
||||
.mapPanel{ min-height:300px; }
|
||||
|
||||
/* Karriere */
|
||||
.karriere{ flex-direction:column; align-items:flex-start; padding:32px 22px; }
|
||||
.karriere__cta{ width:100%; }
|
||||
|
||||
/* Footer */
|
||||
.footer__bar{ flex-direction:column; gap:10px; }
|
||||
}
|
||||
|
||||
@media (max-width:480px){
|
||||
.hero__actions{ flex-direction:column; align-items:stretch; }
|
||||
.hero__actions .btn{ width:100%; }
|
||||
.fleetCard__head{ flex-wrap:wrap; gap:10px; }
|
||||
.stats__grid{ gap:18px 20px; }
|
||||
}
|
||||
|
||||
/* ---------- MapLibre marker labels ---------- */
|
||||
.pin{ display:flex; flex-direction:column; align-items:center; gap:6px; }
|
||||
.pin__label{
|
||||
background:rgba(10,14,24,.9); border:1px solid rgba(255,255,255,.16);
|
||||
padding:5px 10px; white-space:nowrap; text-align:center; border-radius:2px;
|
||||
}
|
||||
.pin__title{
|
||||
font-family:'Anton',sans-serif; text-transform:uppercase; color:#fff;
|
||||
font-size:14px; letter-spacing:.5px; line-height:1.05;
|
||||
}
|
||||
.pin__sub{
|
||||
font-family:'Archivo',sans-serif; font-size:9px; font-weight:700;
|
||||
letter-spacing:1.5px; text-transform:uppercase; color:#9aa6c0; margin-top:2px;
|
||||
}
|
||||
.pin__dot{ width:18px; height:18px; border-radius:50%; }
|
||||
|
||||
/* ---------- Keyframes ---------- */
|
||||
@keyframes scrollx{ to{ background-position-x:-360px; } }
|
||||
@keyframes scrollxFast{ to{ background-position-x:-120px; } }
|
||||
@keyframes scrollFar{ to{ background-position-x:-800px; } }
|
||||
@keyframes wheel{ to{ transform:rotate(360deg); } }
|
||||
@keyframes marquee{ to{ transform:translateX(-50%); } }
|
||||
@keyframes headlightPulse{ 0%,100%{ opacity:.55; } 50%{ opacity:.9; } }
|
||||
|
||||
@media (prefers-reduced-motion:reduce){
|
||||
.hills,.hillsFar,.stripes,.marquee__track,.wheel,.bus__headlight{ animation:none !important; }
|
||||
html{ scroll-behavior:auto; }
|
||||
}
|
||||
Reference in New Issue
Block a user