/* =========================================================
   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; }
}