/* ═══════════════════════════════════════════════════════════
   Benefits-Unterseite – ergänzt style.css
   ═══════════════════════════════════════════════════════════ */

/* ═══ HERO ═════════════════════════════════════════════ */
.bhero{
  position:relative; overflow:hidden; background:var(--black);
  padding:clamp(64px,9vw,120px) 0 clamp(56px,7vw,92px);
  border-bottom:1px solid var(--grey-dark);
}
.bhero__glow{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(700px 460px at 78% 30%, rgba(140,255,0,.16), transparent 66%),
    radial-gradient(520px 380px at 6% 90%, rgba(140,255,0,.09), transparent 68%);
}
.bhero::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(75% 75% at 50% 45%, #000, transparent);
}
.bhero__in{ position:relative; z-index:2; max-width:860px; }
.bhero h1{
  font-size:clamp(34px,5.6vw,64px); letter-spacing:-.03em; margin:0 0 22px;
}
.bhero h1 em{ font-style:normal; color:var(--lime); }
.bhero__sub{ font-size:clamp(16px,1.5vw,19px); color:var(--grey); max-width:60ch; margin-bottom:30px; }
.bhero__cta{ display:flex; flex-wrap:wrap; gap:13px; }

/* ═══ KATEGORIE-KARTEN ═════════════════════════════════ */
.bcards{ background:var(--black); }
.bcards__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }

/* Aussen sitzt die Scroll-Animation (transform), innen die Maus-Neigung –
   sonst ueberschreiben sich beide Transformationen gegenseitig. */
.bcard{ perspective:1000px; }
.bcard__in{
  position:relative; overflow:hidden; height:100%;
  background:var(--anthrazit); border:1px solid var(--grey-dark); border-radius:var(--r);
  padding:32px 28px 26px;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .35s var(--ease), border-color .35s var(--ease);
}
.bcard:hover .bcard__in{ border-color:rgba(140,255,0,.55); }
.bcard__in::after{
  content:""; position:absolute; inset:0; opacity:0; pointer-events:none;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%), rgba(140,255,0,.16), transparent 72%);
  transition:opacity .35s var(--ease);
}
.bcard:hover .bcard__in::after{ opacity:1; }

/* Gleiches Prinzip wie bei .perk__ico: Rahmen aus zwei gestapelten Flaechen,
   weil clip-path einen border an den Schraegen abschneidet. */
.bcard__ico{
  position:relative; z-index:2; --ico-bg:var(--anthrazit);
  width:50px; height:50px; display:grid; place-items:center; margin-bottom:20px;
  color:var(--lime);
  transition:transform .45s var(--ease);
}
.bcard__ico::before, .bcard__ico::after{
  content:""; position:absolute; pointer-events:none;
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
}
.bcard__ico::before{ inset:0; background:var(--lime); }
.bcard__ico::after{ inset:1.5px; background:var(--ico-bg); }
.bcard:hover .bcard__ico{ transform:rotate(180deg); }
.bcard__ico svg{ position:relative; z-index:2; width:23px; height:23px; }
.bcard h3{ position:relative; z-index:2; font-size:19px; margin-bottom:9px; }
.bcard p{ position:relative; z-index:2; font-size:14.5px; color:var(--grey); margin:0 0 18px; }
.bcard__tag{
  position:relative; z-index:2; display:inline-block;
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--lime); border:1px solid rgba(140,255,0,.3);
  padding:5px 12px; border-radius:var(--r-sm);
}

/* ═══ FIRMENWAGEN ══════════════════════════════════════ */
.car{
  background:var(--anthrazit); position:relative; overflow:hidden;
  border-top:1px solid var(--grey-dark); border-bottom:1px solid var(--grey-dark);
}
.car::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(680px 460px at 80% 50%, rgba(140,255,0,.10), transparent 64%);
}
.car__in{
  position:relative; z-index:2;
  display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(32px,5vw,64px); align-items:center;
}
.car__copy p{ color:var(--grey); }
.car__copy .btn{ margin-top:28px; }

.car__art{ position:relative; }
/* Die Linien werden beim Einblenden nachgezeichnet */
.js .car__draw path, .js .car__draw circle{
  stroke-dasharray:var(--len,1200); stroke-dashoffset:var(--len,1200);
}
.js .car__art.is-in .car__draw path,
.js .car__art.is-in .car__draw circle{
  animation:carDraw 1.5s var(--ease-out) forwards;
}
.js .car__art.is-in .car__draw > *:nth-child(1){ animation-delay:.05s }
.js .car__art.is-in .car__draw > *:nth-child(2){ animation-delay:.45s }
.js .car__art.is-in .car__draw > *:nth-child(3){ animation-delay:.55s }
.js .car__art.is-in .car__draw > *:nth-child(4){ animation-delay:.30s }
.js .car__art.is-in .car__draw > *:nth-child(5){ animation-delay:.40s }
.js .car__art.is-in .car__draw > *:nth-child(6){ animation-delay:.70s }
.js .car__art.is-in .car__draw > *:nth-child(7){ animation-delay:.78s }
.js .car__art.is-in .car__draw > *:nth-child(8){ animation-delay:.86s }
@keyframes carDraw{ to{ stroke-dashoffset:0; } }

/* Sitzt oben links ueber der Motorhaube – der einzige grosse freie Bereich
   der Illustration; rechts unten wuerde er das Hinterrad verdecken. */
.car__badge{
  position:absolute; left:0; top:2%;
  background:var(--black); border:1px solid var(--grey-dark); border-left:2px solid var(--lime);
  padding:12px 18px;
}
.car__badge span{ display:block; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--grey-soft); }
.car__badge strong{ display:block; font-size:17px; color:var(--lime); }

/* ═══ PRÄMIEN ══════════════════════════════════════════ */
.bonus{ background:var(--black); }
.bonus__in{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,64px); align-items:center;
}
.bonus__copy p{ color:var(--grey); }

.bonus__chart{
  display:flex; align-items:flex-end; gap:clamp(6px,1.2vw,14px);
  height:clamp(220px,26vw,320px);
  padding:0 6px 0 0;
  border-bottom:1px solid var(--grey-dark);
}
.bonus__chart span{
  flex:1 1 0; height:var(--h,40%);
  transform:scaleY(0); transform-origin:50% 100%;
}
.js .bonus__art.is-in .bonus__chart span{ animation:barRise 1.1s var(--ease-out) var(--d,0s) forwards; }
.bonus__chart i{
  display:block; width:100%; height:100%;
  background:linear-gradient(to top, rgba(140,255,0,.34), rgba(140,255,0,.05));
  border-top:2px solid var(--lime);
}
.bonus__chart span:last-child i{
  background:linear-gradient(to top, rgba(140,255,0,.6), rgba(140,255,0,.14));
  box-shadow:0 -10px 26px -6px rgba(140,255,0,.6);
}
.bonus__caption{
  margin:14px 0 0; text-align:right;
  font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--lime);
}

/* ═══ KARRIEREPFAD ═════════════════════════════════════ */
.path{ background:var(--anthrazit); border-top:1px solid var(--grey-dark); border-bottom:1px solid var(--grey-dark); }
.path__wrap{ position:relative; padding-top:46px; }
.path__track{
  position:absolute; top:12px; left:0; right:0; height:2px;
  background:var(--grey-dark); overflow:hidden;
}
/* --p wird beim Scrollen von JS gesetzt (0 … 1) */
.path__fill{
  display:block; width:100%; height:100%; background:var(--lime);
  transform:scaleX(var(--p,0)); transform-origin:0 50%;
  box-shadow:0 0 14px rgba(140,255,0,.8);
}
.path__list{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; }
.path__st{ position:relative; padding-top:18px; }
.path__dot{
  position:absolute; top:-42px; left:0;
  width:14px; height:14px; border-radius:50%;
  background:var(--anthrazit); border:2px solid var(--grey-dark);
  transition:border-color .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
}
.path__st.is-on .path__dot{
  border-color:var(--lime); background:var(--lime);
  box-shadow:0 0 0 5px rgba(140,255,0,.16), 0 0 18px rgba(140,255,0,.7);
}
.path__num{
  display:block; font-weight:800; font-size:13px; letter-spacing:.1em;
  color:var(--grey-soft); margin-bottom:8px; transition:color .4s var(--ease);
}
.path__st.is-on .path__num{ color:var(--lime); }
.path__st h3{ font-size:19px; margin-bottom:8px; }
.path__st p{ font-size:14px; color:var(--grey); margin:0; }

/* ═══ INCENTIVE-BILDER ═════════════════════════════════ */
.inc{ background:var(--black); }
.inc__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.inc__i{
  margin:0; position:relative; overflow:hidden; border-radius:var(--r);
  border:1px solid var(--grey-dark); aspect-ratio:4/5;
}
.inc__i img{
  width:100%; height:100%; object-fit:cover; object-position:center var(--pos,35%);
  filter:grayscale(.5) contrast(1.05); opacity:.86;
  transition:transform .7s var(--ease), filter .5s var(--ease), opacity .5s var(--ease);
}
.inc__i:hover img{ transform:scale(1.06); filter:grayscale(0); opacity:1; }
.inc__i figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:30px 18px 15px; z-index:2;
  background:linear-gradient(transparent, rgba(11,11,11,.92));
  color:var(--white); font-weight:700; font-size:14px;
}

/* ═══ KOMPLETTLISTE ════════════════════════════════════ */
.all{ background:var(--anthrazit); border-top:1px solid var(--grey-dark); }
.all__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:var(--grey-dark); border:1px solid var(--grey-dark); }
.all__col{ background:var(--black); padding:30px 26px 32px; }
.all__col h3{
  display:flex; align-items:baseline; gap:10px;
  font-size:16px; margin-bottom:18px; padding-bottom:16px;
  border-bottom:1px solid var(--grey-dark);
}
.all__col h3 span{ font-size:12px; font-weight:800; color:var(--lime); letter-spacing:.08em; }
.all__col .ticks{ margin:0; gap:12px; }
.all__col .ticks li{ font-size:14px; font-weight:500; }

/* ═══ RESPONSIVE ═══════════════════════════════════════ */
@media (max-width:1080px){
  .bcards__grid{ grid-template-columns:repeat(2,1fr); }
  .all__grid{ grid-template-columns:repeat(2,1fr); }
}

/* Der Pfad kippt frueher als der Rest in die Senkrechte – fuenf Stationen
   nebeneinander werden unter etwa 1024 px zu schmal. */
@media (max-width:1024px){
  .path__wrap{ padding-top:0; padding-left:32px; }
  .path__track{ top:0; bottom:0; left:6px; right:auto; width:2px; height:auto; }
  .path__fill{ transform:scaleY(var(--p,0)); transform-origin:50% 0; }
  .path__list{ grid-template-columns:1fr; gap:34px; }
  .path__st{ padding-top:0; }
  .path__dot{ top:4px; left:-32px; }
}

@media (max-width:900px){
  .car__in, .bonus__in{ grid-template-columns:1fr; }
  .bonus__art{ order:2; }
  .inc__grid{ grid-template-columns:1fr 1fr; }
  .inc__i:first-child{ grid-column:span 2; aspect-ratio:3/2; }
}

@media (max-width:620px){
  .bcards__grid{ grid-template-columns:1fr; }
  .all__grid{ grid-template-columns:1fr; }
  .inc__grid{ grid-template-columns:1fr; }
  .inc__i, .inc__i:first-child{ grid-column:auto; aspect-ratio:4/5; }
  .bhero__cta .btn{ width:100%; }
  .car__badge{ left:0; top:0; padding:10px 14px; }
}

@media (prefers-reduced-motion:reduce){
  .js .car__draw path, .js .car__draw circle{ stroke-dasharray:none; stroke-dashoffset:0; }
  .bonus__chart span{ transform:none; }
  .path__fill{ transform:none; }
  .path__st .path__dot{ border-color:var(--lime); background:var(--lime); }
  .path__num{ color:var(--lime); }
}