/* =========================================================
   Spedition Hütter GmbH – Karriere-Website
   Design-System: Lichtblau + Graphitgrau, Roboto
   Modern, mit Scroll-Animationen
   ========================================================= */

:root {
  --tlm-blue: #009CE1;              /* Primärfarbe: Lichtblau */
  --tlm-blue-2: #00b4f0;            /* helle Gradient-Spitze */
  --tlm-blue-dark: #007ab3;         /* Text/Hover auf Weiß */
  --tlm-blue-deep: #005f8c;         /* tiefes Blau */
  --tlm-grad: linear-gradient(135deg, #00b4f0 0%, #0082c8 100%);
  --tlm-graphite: #2b2e33;          /* Sekundärfarbe: Graphitgrau */
  --tlm-graphite-dark: #191b1e;     /* dunkler Footer / Hero */
  --tlm-light: #f4f8fc;             /* heller Sektionshintergrund */
  --tlm-muted: #64707d;             /* Fließtext gedämpft */
  --tlm-border: #e6edf4;
  --tlm-shadow: 0 .6rem 1.6rem rgba(25, 27, 30, .07);
  --tlm-shadow-lg: 0 1.4rem 3rem rgba(25, 27, 30, .13);
  --tlm-shadow-blue: 0 .8rem 1.8rem rgba(0, 156, 225, .32);
}

/* ---------- Basis ---------- */
html { scroll-behavior: smooth; }
body {
  font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--tlm-graphite);
  line-height: 1.65;
  overflow-x: hidden;
}
h1, h2, h3, h4, h5, .display-4, .display-5 { font-weight: 700; letter-spacing: -.015em; }
h2.section-title { font-size: clamp(1.75rem, 3.4vw, 2.6rem); line-height: 1.12; }
.text-graphite { color: var(--tlm-graphite) !important; }
.text-blue { color: var(--tlm-blue-dark) !important; }
.bg-graphite { background-color: var(--tlm-graphite) !important; }
.bg-graphite-dark { background-color: var(--tlm-graphite-dark) !important; }
.bg-light-blue { background-color: var(--tlm-light) !important; }
a { color: var(--tlm-blue-dark); }
a:hover { color: var(--tlm-blue-deep); }

/* Gradient-Text für Akzente/Zahlen */
.text-gradient {
  background: var(--tlm-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* Eyebrow-Label */
.eyebrow {
  display: inline-flex; align-items: center; gap:.5rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tlm-blue-dark); margin-bottom: .8rem;
}
.eyebrow::before { content:""; width:1.6rem; height:2px; background:var(--tlm-blue); display:inline-block; }
.eyebrow.on-dark { color: #fff; }
.eyebrow.on-dark::before { background:var(--tlm-blue); }
.eyebrow.center { justify-content:center; }

.section { padding: 6rem 0; overflow-x: hidden;}
@media (max-width: 767.98px) { .section { padding: 3.75rem 0; } }
.lead-muted { color: var(--tlm-muted); font-size: 1.1rem; }

/* verhindert horizontalen Overflow durch große Gutter auf schmalen Screens */
@media (max-width: 991.98px) {
  .row.g-4, .row.g-5 { --bs-gutter-x: 1.5rem; }
}

/* ---------- Scroll-Reveal-Animationen ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
[data-reveal].in-view { opacity: 1; transform: none; }
[data-reveal="left"]  { transform: translateX(-40px); }
[data-reveal="right"] { transform: translateX(40px); }
[data-reveal="zoom"]  { transform: scale(.94); }
[data-reveal].in-view { transform: none; }
/* Stagger */
.stagger > * { opacity:0; transform:translateY(28px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1); }
.stagger.in-view > * { opacity:1; transform:none; }
.stagger.in-view > *:nth-child(1){transition-delay:.05s}
.stagger.in-view > *:nth-child(2){transition-delay:.13s}
.stagger.in-view > *:nth-child(3){transition-delay:.21s}
.stagger.in-view > *:nth-child(4){transition-delay:.29s}
.stagger.in-view > *:nth-child(5){transition-delay:.37s}
.stagger.in-view > *:nth-child(6){transition-delay:.45s}
@media (prefers-reduced-motion: reduce) {
  [data-reveal], .stagger > * { opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ---------- Buttons ---------- */
.btn { border-radius: 2rem; font-weight: 600; padding: .7rem 1.7rem; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; }
.btn-lg { padding: .85rem 2rem; }
.btn-tlm {
  background: var(--tlm-grad); border: none; color: #fff;
  box-shadow: var(--tlm-shadow-blue);
}
.btn-tlm:hover, .btn-tlm:focus { color:#fff; transform: translateY(-2px); box-shadow: 0 1rem 2.2rem rgba(0,156,225,.42); }
.btn-tlm .arrow, .btn-outline-tlm .arrow { display:inline-block; transition: transform .2s ease; }
.btn-tlm:hover .arrow, .btn-outline-tlm:hover .arrow { transform: translateX(4px); }
.btn-outline-tlm {
  border: 2px solid var(--tlm-blue); color: var(--tlm-blue-dark); background: transparent;
}
.btn-outline-tlm:hover { background: var(--tlm-blue); color: #fff; transform: translateY(-2px); }
.btn-outline-light-tlm { border: 2px solid rgba(255,255,255,.55); color:#fff; background:rgba(255,255,255,.06); }
.btn-outline-light-tlm:hover { background:#fff; color:var(--tlm-graphite); border-color:#fff; transform:translateY(-2px); }

/* ---------- Navbar ---------- */
.navbar {
  transition: padding .3s ease, background-color .3s ease, box-shadow .3s ease;
  padding-top: 1rem; padding-bottom: 1rem;
  background-color: rgba(255,255,255,.9);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.navbar .navbar-brand img { height: 46px; transition: height .3s ease; }
.navbar.scrolled { padding-top: .4rem; padding-bottom: .4rem; box-shadow: var(--tlm-shadow); background-color: rgba(255,255,255,.96); }
.navbar.scrolled .navbar-brand img { height: 38px; }
.navbar .nav-link { color: var(--tlm-graphite); font-weight: 500; margin: 0 .3rem; position: relative; }
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--tlm-blue-dark); }
.navbar .nav-link.active::after {
  content:""; position:absolute; left:.8rem; right:.8rem; bottom:.05rem; height:2px; background:var(--tlm-blue);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: radial-gradient(1200px 600px at 70% 15%, #3a4048 0%, var(--tlm-graphite) 45%, var(--tlm-graphite-dark) 100%);
  color: #fff; padding: 10rem 0 8rem; overflow: hidden;
}
/* animierte Farb-Glows */
.hero::before {
  content:""; position:absolute; top:-20%; right:-10%; width:60%; height:140%;
  background: radial-gradient(closest-side, rgba(0,156,225,.35), rgba(0,156,225,0));
  filter: blur(10px); animation: floatGlow 9s ease-in-out infinite alternate; pointer-events:none;
}
.hero::after {
  content:""; position:absolute; bottom:-30%; left:-10%; width:45%; height:120%;
  background: radial-gradient(closest-side, rgba(0,180,240,.18), rgba(0,180,240,0));
  animation: floatGlow 11s ease-in-out infinite alternate-reverse; pointer-events:none;
}
@keyframes floatGlow { from{transform:translate(0,0)} to{transform:translate(-30px,30px)} }
.hero-content { position: relative; z-index: 2; }
.hero h1 { font-size: clamp(2.3rem, 5.2vw, 3.9rem); line-height: 1.05; }
.hero .hero-sub { color: rgba(255,255,255,.85); font-size: 1.18rem; max-width: 34rem; }
.hero-badge {
  display:inline-flex; align-items:center; gap:.5rem;
  background: rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22);
  padding:.45rem 1.05rem; border-radius:2rem; font-size:.85rem; margin-bottom:1.6rem;
  backdrop-filter: blur(6px);
}
.hero-badge .dot { width:.55rem; height:.55rem; border-radius:50%; background: var(--tlm-blue); box-shadow:0 0 0 0 rgba(0,156,225,.6); animation: pulse 2s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(0,156,225,.55)} 70%{box-shadow:0 0 0 .5rem rgba(0,156,225,0)} 100%{box-shadow:0 0 0 0 rgba(0,156,225,0)} }

/* LKW fährt beim Laden von links herein */
.hero-truck {
  position: relative; z-index: 2; width: 100%; height: auto;
  transform: translateX(-130%); opacity: 0;
  filter: drop-shadow(0 1.6rem 2.2rem rgba(0,0,0,.5));
}
.hero-truck.drive-in { animation: truckDriveIn 1.6s cubic-bezier(.22,.61,.36,1) .3s forwards; }
@keyframes truckDriveIn { 0%{transform:translateX(-130%);opacity:0} 55%{opacity:1} 100%{transform:translateX(0);opacity:1} }
@media (prefers-reduced-motion: reduce) { .hero-truck{transform:none;opacity:1;animation:none} }

/* Scroll-Cue */
.scroll-cue { position:absolute; left:50%; bottom:2.2rem; transform:translateX(-50%); z-index:3; color:rgba(255,255,255,.7); font-size:1.5rem; animation: bounce 2s infinite; }
@keyframes bounce { 0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,10px)} }

/* Diagonaler Abschluss */
.diagonal-bottom { clip-path: polygon(0 0, 100% 0, 100% 94%, 0 100%); }

/* ---------- Hero-Szene: LKW fährt über den Hof ein (GSAP) ---------- */
.hero-scene { position: relative; height: 92vh; min-height: 560px; overflow: hidden; background:#c7cdd3; }
.hero-bg2 { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.hero-shade { position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(90deg, rgba(15,18,22,.8) 0%, rgba(15,18,22,.5) 38%, rgba(15,18,22,0) 68%); }
.hero-copy2 { position: absolute; z-index: 6; top: 50%; left: 6%; transform: translateY(-50%); color:#fff; max-width: 42rem; }
.hero-copy2 h1 { font-size: clamp(2.2rem, 5vw, 3.9rem); line-height: 1.05; }
.hero-copy2 .hero-sub { color: rgba(255,255,255,.9); font-size: 1.15rem; max-width: 36rem; }
.truck-scroll { position: absolute; z-index: 5; right: -21vw; bottom: 6%; width: 66%; max-width: 1100px; will-change: transform; }
.hero-truck2 { height: auto; display:block; filter: drop-shadow(0 1.2rem 1.4rem rgba(0,0,0,.4)); will-change: transform, opacity; }
.scroll-cue2 { position:absolute; left:50%; bottom:1.6rem; transform:translateX(-50%); z-index:7; color:#fff; font-size:1.5rem; animation: bounce 2s infinite; }
.scroll-cue2:hover { color:#fff; }
@media (max-width: 991.98px){ .truck-scroll {     right: -35vw; } }
@media (max-width: 767.98px){
  /* gestapeltes Layout: Text oben, LKW darunter – keine Überlappung */
  .hero-scene { height: auto; min-height: 0; }
  .hero-copy2 { position: relative; top: auto; left: auto; transform: none; max-width: 100%; padding: 7rem 1.2rem 0; }
  .truck-scroll { position: relative; right: auto;left: 45vw; bottom: auto;margin: 1.25rem 0 -1% -13%; }
  .hero-shade { background: linear-gradient(180deg, rgba(15,18,22,.72) 0%, rgba(15,18,22,.32) 62%, rgba(15,18,22,.5) 100%); }
  .scroll-cue2 { display: none; }
}


/* ---------- Werte-/Benefit-Karten ---------- */
.value-card {
  background:#fff; border:1px solid var(--tlm-border); border-radius:1.1rem;
  padding:2.1rem 1.7rem; height:100%; position:relative; overflow:hidden;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.value-card::after { content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--tlm-grad); transform:scaleX(0); transform-origin:left; transition:transform .3s ease; }
.value-card:hover { transform: translateY(-8px); box-shadow: var(--tlm-shadow-lg); border-color:transparent; }
.value-card:hover::after { transform:scaleX(1); }
.value-icon {
  width:3.6rem; height:3.6rem; border-radius:1rem; display:flex; align-items:center; justify-content:center;
  background: rgba(0,156,225,.12); color: var(--tlm-blue-dark); font-size:1.6rem; margin-bottom:1.15rem;
  transition: transform .28s ease;
}
.value-card:hover .value-icon { transform: scale(1.08) rotate(-4deg); }

/* Zahlen/Counter */
.stat-num { font-size: clamp(2rem,4vw,2.8rem); font-weight:900; line-height:1; }

/* ---------- Positions-Karten ---------- */
.job-card {
  background:#fff; border:1px solid var(--tlm-border); border-radius:1.1rem;
  overflow:hidden; height:100%; transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
  position:relative;
}
.job-card:hover { transform: translateY(-8px); box-shadow: var(--tlm-shadow-lg); border-color:transparent; }
.job-card .job-top { padding:1.7rem 1.7rem 1rem; border-top:4px solid transparent; border-image:var(--tlm-grad) 1; }
.job-card .job-icon { width:3rem;height:3rem;border-radius:.8rem;background:rgba(0,156,225,.12);color:var(--tlm-blue-dark);display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:.9rem; }
.job-card .job-tag { font-size:.72rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color: var(--tlm-blue-dark); }
.job-card .job-body { padding:0 1.7rem 1.9rem; }
.job-card p.desc { color:var(--tlm-muted); font-size:.97rem; }

/* ---------- Overlay-/Split-Block ---------- */
.overlay-block { position: relative; color:#fff; border-radius:1.25rem; overflow:hidden; background: var(--tlm-graphite); }
.overlay-block .overlay-img { min-height: 340px; background-size:cover; background-position:center; }
.overlay-block .overlay-text { padding: 2.5rem; }
@media (min-width: 992px){ .overlay-block .overlay-text { padding: 3.75rem; } }

/* ---------- Standort / Maps ---------- */
.map-frame { border:0; width:100%; height:100%; min-height:360px; border-radius:1.25rem; filter:grayscale(.15); }
.map-wrap { border-radius:1.25rem; overflow:hidden; box-shadow: var(--tlm-shadow); height:100%; }
.region-chip { display:inline-block; background:var(--tlm-light); border:1px solid var(--tlm-border); color:var(--tlm-graphite); border-radius:2rem; padding:.3rem .9rem; font-size:.82rem; margin:.25rem .3rem .25rem 0; }

/* ---------- kununu ---------- */
.kununu-badge {
  display:flex; align-items:center; justify-content:center; width:160px; height:160px; border-radius:50%;
  background:#fff; color:#3caf45; border:3px solid #3caf45; font-weight:700; text-align:center; line-height:1.2;
  margin:0 auto; box-shadow: var(--tlm-shadow); transition: transform .3s ease;
}
.kununu-badge:hover { transform: scale(1.05); }
.kununu-badge .score { font-size:2.6rem; line-height:1; }
.kununu-badge .stars { color:#f5a623; font-size:1rem; letter-spacing:1px; }

/* ---------- Formular (Kurzbewerbung) ---------- */
.form-wrap { background:#fff; border-radius:1.25rem; box-shadow: var(--tlm-shadow-lg); padding:2rem; }
@media (min-width:992px){ .form-wrap { padding:2.9rem; } }
.form-label { font-weight:500; font-size:.92rem; }
.form-control, .form-select { border-radius:.7rem; padding:.75rem .95rem; border-color:var(--tlm-border); }
.form-control:focus, .form-select:focus { border-color: var(--tlm-blue); box-shadow: 0 0 0 .2rem rgba(0,156,225,.2); }
.contact-item { display:flex; gap:.9rem; margin-bottom:1.4rem; align-items:flex-start; }
.contact-item .ci-icon { flex:0 0 auto; width:2.7rem; height:2.7rem; border-radius:.8rem; background: rgba(0,156,225,.12); color:var(--tlm-blue-dark); display:flex; align-items:center; justify-content:center; font-size:1.15rem; }

/* Erfolgs-/Prozess-Bereich */
.process-step { display:flex; gap:1.1rem; margin-bottom:1.6rem; }
.process-step .step-num {
  flex:0 0 auto; width:2.8rem; height:2.8rem; border-radius:50%; background:var(--tlm-grad); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; box-shadow:var(--tlm-shadow-blue);
}
.process-step h5 { margin-bottom:.25rem; }
.trust-quote { border-left:4px solid var(--tlm-blue); padding:1rem 0 1rem 1.4rem; font-style:italic; color:var(--tlm-graphite); }

/* ---------- Seiten-Banner (Stellenseiten) ---------- */
.page-banner {
      background-position: 0 87px;
  position: relative; color:#fff; padding: 9rem 0 4.5rem;
  background-size: cover; background-repeat: no-repeat;
}
.page-banner::before { content:""; position:absolute; inset:0; z-index:0;
  background: linear-gradient(rgba(25,27,30,.72), rgba(25,27,30,.82)); }
.page-banner .container { position: relative; z-index: 1; }
.page-banner .breadcrumb a { color: rgba(255,255,255,.75); text-decoration:none; }
.page-banner .breadcrumb-item.active { color:#fff; }
.page-banner .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.5); }

/* Aufgaben-/Profil-Listen */
.check-list { list-style:none; padding-left:0; }
.check-list li { position:relative; padding-left:2rem; margin-bottom:.75rem; }
.check-list li::before {
  content:"\2713"; position:absolute; left:0; top:.15rem; width:1.35rem; height:1.35rem; border-radius:50%;
  background: var(--tlm-grad); color:#fff; font-size:.78rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}

/* Info-Karten für Aufgaben-Gruppen */
.info-card { background:#fff; border:1px solid var(--tlm-border); border-radius:1.1rem; padding:1.9rem; transition:transform .28s ease, box-shadow .28s ease; }
.info-card:hover { transform:translateY(-6px); box-shadow:var(--tlm-shadow-lg); }
.info-card h3, .info-card h4 { display:flex; align-items:center; gap:.6rem; }

/* Sticky Sidebar auf Stellenseiten */
@media (min-width: 992px){ .sticky-side { position: sticky; top: 6rem; } }

/* ---------- Footer ---------- */
.footer { background: var(--tlm-graphite-dark); color: rgba(255,255,255,.72); }
.footer img.footer-logo { height:50px; filter: brightness(0) invert(1); opacity:.92; }
.footer a { color: rgba(255,255,255,.72); text-decoration:none; transition:color .2s ease; }
.footer a:hover { color:#fff; }
.footer h6 { color:#fff; font-weight:700; letter-spacing:.03em; }
.footer .footer-bottom { border-top:1px solid rgba(255,255,255,.12); }

.iso-chip { display:inline-flex; align-items:center; gap:.5rem; border:1px solid var(--tlm-border); border-radius:2rem; padding:.45rem 1rem; font-size:.85rem; color:var(--tlm-muted); background:#fff; }