/* ==========================================================================
   EuroTrans Logistik — Sektionen & Komponenten
   ========================================================================== */

/* 5. HEADER / NAVIGATION ================================================= */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  transition:background var(--t) var(--ease),box-shadow var(--t) var(--ease),
             border-color var(--t) var(--ease);
  border-bottom:1px solid transparent;
}
.site-header::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to bottom,rgba(5,15,29,.82) 0%,rgba(5,15,29,.5) 62%,rgba(5,15,29,0) 100%);
  opacity:1;transition:opacity var(--t) var(--ease);
}
.site-header.is-solid{background:#fff;border-bottom-color:var(--line);box-shadow:var(--shadow-xs)}
.site-header.is-solid::before{opacity:0}
.site-header--static{position:sticky}

.header-inner{
  height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}

/* Logo
   Zwei Bilddateien: --on-dark (helle Fassung) über dem Hero und im Footer,
   --on-light (farbige Fassung), sobald der Header weiß hinterlegt ist.
   .logo__fallback springt nur ein, wenn eine Datei fehlt. */
.logo{display:inline-flex;align-items:center;gap:13px;flex:none}
.logo__img{
  display:block;flex:none;
  height:clamp(38px,4.2vw,54px);width:auto;
  transition:opacity var(--t) var(--ease);
}
.logo__img--on-light{display:none}
.site-header.is-solid .logo__img--on-dark{display:none}
.site-header.is-solid .logo__img--on-light{display:block}
.footer .logo__img{height:clamp(46px,5vw,66px)}
.logo:hover .logo__img{opacity:.85}

.logo__fallback{display:none;align-items:center;gap:13px}
.logo--fallback .logo__img{display:none}
.logo--fallback .logo__fallback{display:inline-flex}

.logo__mark{width:42px;height:42px;flex:none}
.logo__type{display:flex;flex-direction:column;line-height:1}
.logo__name{
  font-family:var(--font-display);font-weight:700;font-size:1.5rem;
  letter-spacing:.02em;text-transform:uppercase;color:#fff;
  transition:color var(--t) var(--ease);
}
.logo__sub{
  font-size:.5625rem;font-weight:600;letter-spacing:.32em;text-transform:uppercase;
  color:var(--blue-400);margin-top:3px;transition:color var(--t) var(--ease);
}
.is-solid .logo__name,.site-header--light .logo__name{color:var(--navy-900)}
.is-solid .logo__sub,.site-header--light .logo__sub{color:var(--blue-600)}
.logo__mark .mark-bg{fill:var(--blue-600);transition:fill var(--t) var(--ease)}
.logo__mark .mark-fg{fill:#fff}
.logo:hover .logo__mark .mark-bg{fill:var(--blue-500)}

/* Desktop-Navigation */
.nav{display:none}
.nav__list{display:flex;align-items:center;gap:4px}
.nav__link{
  position:relative;display:block;padding:10px 16px;
  font-size:.9375rem;font-weight:500;letter-spacing:.005em;
  color:rgba(255,255,255,.86);
  transition:color var(--t-fast) var(--ease);
}
.nav__link::after{
  content:"";position:absolute;left:16px;right:16px;bottom:2px;height:2px;
  background:var(--blue-500);transform:scaleX(0);transform-origin:left;
  transition:transform var(--t) var(--ease-out);
}
.nav__link:hover::after,.nav__link[aria-current="page"]::after{transform:scaleX(1)}
.nav__link:hover{color:#fff}
.nav__link[aria-current="page"]{color:#fff;font-weight:600}
.is-solid .nav__link{color:var(--ink-600)}
.is-solid .nav__link:hover,.is-solid .nav__link[aria-current="page"]{color:var(--navy-900)}

.header-actions{display:flex;align-items:center;gap:12px;flex:none}
.header-phone{
  display:none;align-items:center;gap:9px;
  font-size:.875rem;font-weight:600;letter-spacing:.01em;
  color:rgba(255,255,255,.9);padding-right:18px;
  border-right:1px solid rgba(255,255,255,.2);
}
.header-phone svg{width:15px;height:15px;opacity:.75}
.is-solid .header-phone{color:var(--navy-800);border-right-color:var(--line)}
.header-cta{display:none;min-height:48px;padding:0 24px;font-size:.875rem}
@media (min-width:620px){.header-cta{display:inline-flex}}

/* Burger */
.burger{
  width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid rgba(255,255,255,.26);border-radius:var(--radius-sm);
  cursor:pointer;transition:border-color var(--t) var(--ease),background var(--t) var(--ease);
}
.is-solid .burger{border-color:var(--line)}
.burger:hover{background:rgba(255,255,255,.08)}
.is-solid .burger:hover{background:var(--silver-100)}
.burger__box{width:20px;height:14px;position:relative}
.burger__box span{
  position:absolute;left:0;height:2px;width:100%;background:#fff;
  transition:transform var(--t) var(--ease-out),opacity var(--t-fast) var(--ease),width var(--t) var(--ease);
}
.is-solid .burger__box span{background:var(--navy-900)}
.burger__box span:nth-child(1){top:0}
.burger__box span:nth-child(2){top:6px;width:70%}
.burger__box span:nth-child(3){top:12px}
.burger[aria-expanded="true"] .burger__box span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] .burger__box span:nth-child(2){opacity:0;width:0}
.burger[aria-expanded="true"] .burger__box span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Mobile-Navigation */
.mobile-nav{
  position:fixed;inset:0;z-index:999;
  background:var(--navy-950);
  display:flex;flex-direction:column;
  padding:calc(var(--header-h) + 20px) var(--gutter) 32px;
  transform:translateY(-100%);
  visibility:hidden;
  transition:transform .5s var(--ease-out),visibility .5s;
  overflow-y:auto;overscroll-behavior:contain;
}
.mobile-nav.is-open{transform:translateY(0);visibility:visible}
.mobile-nav__list{border-top:1px solid rgba(255,255,255,.1)}
.mobile-nav__item{border-bottom:1px solid rgba(255,255,255,.1)}
.mobile-nav__link{
  display:flex;align-items:baseline;gap:16px;padding:20px 4px;
  font-family:var(--font-display);font-size:2rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.01em;color:#fff;line-height:1;
  transition:color var(--t-fast) var(--ease),padding-left var(--t) var(--ease);
}
.mobile-nav__link:hover,.mobile-nav__link[aria-current="page"]{color:var(--blue-400);padding-left:12px}
.mobile-nav__num{
  font-family:var(--font-sans);font-size:.6875rem;font-weight:600;
  letter-spacing:.16em;color:rgba(255,255,255,.32);flex:none;
}
.mobile-nav__foot{margin-top:auto;padding-top:36px}
.mobile-nav__contact{
  display:grid;gap:6px;margin-top:24px;
  font-size:.9375rem;color:rgba(255,255,255,.6);
}
.mobile-nav__contact a{color:#fff;font-weight:500}
body.nav-open{overflow:hidden}

/* 6. HERO ================================================================ */
.hero{
  position:relative;
  background:var(--navy-950);
  color:#fff;
  padding-top:calc(var(--header-h) + clamp(36px,5.5vw,68px));
  padding-bottom:clamp(104px,11vw,140px);
  overflow:hidden;
  isolation:isolate;
  display:flex;flex-direction:column;justify-content:center;
  min-height:100svh;
}
@supports not (min-height:100svh){.hero{min-height:100vh}}
.hero__media{position:absolute;inset:0;z-index:-2;background:var(--navy-900);overflow:hidden}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.hero__slide{position:absolute;inset:0;opacity:0}
.hero__slide:first-child{opacity:1}
.hero__slide img{
  animation:heroDrift 22s ease-in-out infinite alternate;
}
@keyframes heroDrift{from{transform:scale(1.02)}to{transform:scale(1.09)}}
.hero__scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg,rgba(5,15,29,.97) 0%,rgba(5,15,29,.91) 36%,rgba(5,15,29,.6) 70%,rgba(5,15,29,.74) 100%),
    linear-gradient(to top,rgba(5,15,29,.94) 0%,rgba(5,15,29,0) 54%);
}
.hero__grid{
  display:grid;gap:clamp(32px,4vw,56px);
  grid-template-columns:1fr;
  align-items:end;
}
.hero__headline{margin-bottom:clamp(16px,1.8vw,22px);max-width:16ch;font-size:clamp(2.75rem,6.6vw,5.25rem)}
.hero__headline .accent{color:var(--blue-400)}
.hero__sub{
  font-size:clamp(1.0625rem,1.5vw,1.25rem);
  font-weight:600;line-height:1.4;letter-spacing:-.01em;
  color:#fff;max-width:40ch;margin-bottom:16px;
}
.hero__text{
  font-size:.9375rem;line-height:1.68;color:rgba(255,255,255,.66);
  max-width:62ch;margin-bottom:28px;
}
.hero__text + .hero__text{margin-top:-16px}
.hero__ctas{display:flex;flex-wrap:wrap;gap:14px}

/* Seitliche Index-Marken */
.hero__index{
  display:none;
  position:absolute;right:var(--gutter);top:50%;transform:translateY(-50%);
  z-index:2;text-align:right;
}
.hero__dot{
  display:block;background:none;border:0;cursor:pointer;
  font-family:var(--font-display);font-size:.9375rem;font-weight:600;
  letter-spacing:.16em;color:rgba(255,255,255,.36);
  padding:8px 0 8px 46px;position:relative;
  transition:color var(--t) var(--ease),font-size var(--t) var(--ease);
}
.hero__dot::after{
  content:"";position:absolute;right:0;top:50%;width:30px;height:1px;
  background:rgba(255,255,255,.24);
  transition:width var(--t) var(--ease-out),background var(--t) var(--ease),height var(--t) var(--ease);
}
.hero__dot:hover{color:rgba(255,255,255,.72)}
.hero__dot.is-active{color:#fff;font-size:1.375rem}
.hero__dot.is-active::after{width:56px;background:var(--blue-500);height:2px}

/* Spezifikationsleiste im Hero */
.hero__spec{
  margin-top:clamp(32px,3.6vw,48px);
  border-top:1px solid rgba(255,255,255,.16);
  padding-top:20px;
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:20px 24px;
}
.hero__spec div{display:flex;flex-direction:column;gap:4px}
.hero__spec dt{
  font-size:.6875rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--blue-400);
}
.hero__spec dd{margin:0;font-size:.9375rem;font-weight:500;color:rgba(255,255,255,.86)}

/* Scroll-Hinweis */
.hero__scroll{
  display:none;position:absolute;left:var(--gutter);bottom:26px;z-index:2;
  align-items:center;gap:12px;
  font-size:.6875rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
.hero__scroll span.line{width:52px;height:1px;background:rgba(255,255,255,.32);position:relative;overflow:hidden}
.hero__scroll span.line::after{
  content:"";position:absolute;inset:0;background:var(--blue-500);
  transform:translateX(-100%);animation:scrollLine 2.4s var(--ease) infinite;
}
@keyframes scrollLine{0%{transform:translateX(-100%)}55%{transform:translateX(0)}100%{transform:translateX(100%)}}

/* 7. KENNZAHLEN ========================================================== */
.stats-wrap{position:relative;margin-top:clamp(-96px,-9vw,-70px);z-index:5}
.stats{
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow-lg);
  display:grid;grid-template-columns:minmax(0,1fr);
}
.stat{
  padding:clamp(24px,3vw,40px) clamp(18px,2.4vw,34px);
  border-bottom:1px solid var(--line);
  position:relative;
}
.stat:last-child{border-bottom:0}
.stat__value{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.75rem,3.5vw,3rem);line-height:1.04;
  letter-spacing:.005em;color:var(--navy-900);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  display:block;margin-bottom:10px;
}
.stat__value .unit{color:var(--blue-600)}
.stat__label{
  font-size:.875rem;line-height:1.5;color:var(--text-muted);
  max-width:24ch;
}
.stat__tag{
  position:absolute;top:clamp(24px,3vw,40px);right:clamp(18px,2.4vw,34px);
  font-size:.625rem;font-weight:600;letter-spacing:.16em;color:var(--silver-400);
}

/* 8. SEKTIONSKOPF ======================================================== */
.section-head{
  display:grid;gap:clamp(20px,3vw,48px);
  align-items:end;margin-bottom:clamp(40px,5vw,72px);
}
.section-head__aside{max-width:46ch}
.section-head--split{grid-template-columns:1fr}

/* 8b. LEISTUNGEN / SERVICE CARDS ========================================= */
.services{display:grid;grid-template-columns:1fr;gap:clamp(16px,1.6vw,22px)}
.svc{
  position:relative;display:flex;flex-direction:column;
  min-height:340px;
  background:#fff;border:1px solid var(--line);
  overflow:hidden;isolation:isolate;
  transition:transform var(--t) var(--ease-out),box-shadow var(--t) var(--ease),
             border-color var(--t) var(--ease);
}
.svc:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--silver-400)}
.svc__media{position:relative;overflow:hidden;height:clamp(200px,26vw,290px);flex:none;background:var(--navy-800)}
.svc__media img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-out)}
.svc:hover .svc__media img{transform:scale(1.06)}
.svc__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(5,15,29,.55),rgba(5,15,29,0) 55%);
}
.svc__body{
  padding:clamp(24px,2.6vw,36px);
  display:flex;flex-direction:column;gap:14px;flex:1;
}
.svc__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.svc__icon{
  width:52px;height:52px;flex:none;
  display:grid;place-items:center;
  background:var(--blue-050);border-radius:var(--radius-sm);
  color:var(--blue-600);
  transition:background var(--t) var(--ease),color var(--t) var(--ease);
}
.svc__icon svg{width:26px;height:26px}
.svc:hover .svc__icon{background:var(--blue-600);color:#fff}
.svc__title{font-size:clamp(1.25rem,1.8vw,1.5rem);font-weight:700;letter-spacing:-.02em;line-height:1.2}
.svc__text{font-size:.9375rem;line-height:1.66;color:var(--text-muted);flex:1}
.svc__link{margin-top:auto;align-self:flex-start}

/* dunkle Variante */
.svc--dark{background:var(--navy-900);border-color:var(--navy-700);color:#fff}
.svc--dark .svc__text{color:rgba(255,255,255,.66)}
.svc--dark .svc__icon{background:rgba(255,255,255,.08);color:var(--blue-400)}
.svc--dark:hover .svc__icon{background:var(--blue-600);color:#fff}
.svc--dark .index-num{color:rgba(255,255,255,.38)}
.svc--dark::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:20px 20px;opacity:.6;
}
.svc--dark:hover{border-color:var(--blue-600)}

/* Eckmarken */
.corner-tick{position:absolute;width:12px;height:12px;pointer-events:none;opacity:.9}
.corner-tick--tr{top:-1px;right:-1px;border-top:2px solid var(--blue-600);border-right:2px solid var(--blue-600)}
.corner-tick--bl{bottom:-1px;left:-1px;border-bottom:2px solid var(--blue-600);border-left:2px solid var(--blue-600)}
.svc .corner-tick{opacity:0;transition:opacity var(--t) var(--ease)}
.svc:hover .corner-tick{opacity:1}

/* 9. PROZESSKETTE ======================================================== */
.process{position:relative}
.process__track{
  display:grid;gap:0;
  grid-template-columns:1fr;
  position:relative;
  border-left:2px solid var(--line);
  margin-left:14px;
}
.process__step{
  position:relative;padding:0 0 30px 30px;
}
.process__step:last-child{padding-bottom:0}
.process__dot{
  position:absolute;left:-9px;top:2px;
  width:16px;height:16px;border-radius:50%;
  background:#fff;border:2px solid var(--silver-400);
  transition:border-color var(--t) var(--ease),background var(--t) var(--ease),transform var(--t) var(--ease-out);
}
.process__step:hover .process__dot,.process__step.is-key .process__dot{
  border-color:var(--blue-600);background:var(--blue-600);transform:scale(1.15);
}
.process__num{
  font-family:var(--font-display);font-size:.8125rem;font-weight:600;
  letter-spacing:.16em;color:var(--blue-600);display:block;margin-bottom:4px;
}
.process__label{font-size:1rem;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.process__hint{font-size:.8125rem;color:var(--text-muted);margin-top:4px}
.section--dark .process__track{border-left-color:rgba(255,255,255,.16)}
.section--dark .process__dot{background:var(--navy-900);border-color:rgba(255,255,255,.3)}
.section--dark .process__num{color:var(--blue-400)}

/* 10. REFERENZ / VERTRAUEN =============================================== */
.trust{position:relative;overflow:hidden}
.trust__inner{display:grid;gap:clamp(36px,5vw,80px);align-items:center;position:relative;z-index:1}
.trust__plate{
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  padding:clamp(30px,4vw,52px);
  position:relative;
}
.trust__plate-label{
  font-size:.6875rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--blue-400);margin-bottom:18px;display:block;
}
.trust__partner{
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(2rem,4.4vw,3.25rem);line-height:1;color:#fff;letter-spacing:.01em;
}
.trust__partner-note{
  margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.14);
  font-size:.875rem;color:rgba(255,255,255,.6);
}
.trust__points{display:grid;gap:2px;margin-top:clamp(28px,3vw,40px)}
.trust__point{
  display:flex;gap:16px;align-items:flex-start;
  padding:18px 0;border-top:1px solid rgba(255,255,255,.12);
}
.trust__point:last-child{border-bottom:1px solid rgba(255,255,255,.12)}
.trust__point svg{width:20px;height:20px;color:var(--blue-400);flex:none;margin-top:3px}
.trust__point p{font-size:.9375rem;line-height:1.6}

/* 11. REGIONEN / KARTE =================================================== */
.map-block{display:grid;gap:clamp(32px,4vw,56px);align-items:center}
.map-figure{
  position:relative;
  background:var(--navy-900);
  border:1px solid var(--navy-700);
  padding:clamp(16px,2.4vw,28px);
  overflow:hidden;
}
.map-figure::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:40px 40px;pointer-events:none;
}
.map-figure__meta{
  position:absolute;left:clamp(16px,2.4vw,28px);top:clamp(16px,2.4vw,28px);
  font-size:.625rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.36);z-index:2;
}
.map-svg{width:100%;height:auto;position:relative;z-index:1}
.map-region{fill:rgba(45,110,200,.10);stroke:rgba(120,170,240,.42);stroke-width:2}
.map-river{fill:none;stroke:rgba(93,156,248,.5);stroke-width:3;stroke-linecap:round}
.map-corridor{fill:none;stroke:rgba(93,156,248,.28);stroke-width:1.5;stroke-dasharray:7 7}
.map-pin{cursor:pointer}
.map-pin__halo{fill:var(--blue-500);opacity:.16;transform-box:fill-box;transform-origin:center;transition:opacity var(--t) var(--ease)}
.map-pin__ring{fill:none;stroke:var(--blue-400);stroke-width:1.5;opacity:.55;transition:opacity var(--t) var(--ease)}
.map-pin__dot{fill:var(--blue-500);transition:fill var(--t) var(--ease),r var(--t) var(--ease-out)}
.map-pin__label{
  fill:#fff;font-family:var(--font-sans);font-size:25px;font-weight:600;
  letter-spacing:.01em;transition:fill var(--t) var(--ease);
}
.map-pin__sub{fill:rgba(255,255,255,.42);font-family:var(--font-sans);font-size:13px;letter-spacing:.14em}
@media (max-width:767px){
  .map-pin__label{font-size:32px}
  .map-pin__sub{display:none}
}
.map-pin:hover .map-pin__dot,.map-pin.is-active .map-pin__dot{fill:#fff;r:9}
.map-pin:hover .map-pin__halo,.map-pin.is-active .map-pin__halo{opacity:.34}
.map-pin:hover .map-pin__label,.map-pin.is-active .map-pin__label{fill:var(--blue-400)}
.map-pin:focus-visible{outline:none}
.map-pin:focus-visible .map-pin__ring{opacity:1;stroke:#fff;stroke-width:2.5}

.region-list{border-top:1px solid var(--line)}
.region-list__item{border-bottom:1px solid var(--line)}
.region-list__btn{
  width:100%;background:none;border:0;text-align:left;cursor:pointer;
  display:flex;align-items:center;gap:16px;padding:20px 4px;
  transition:padding-left var(--t) var(--ease),color var(--t-fast) var(--ease);
}
.region-list__btn:hover,.region-list__item.is-active .region-list__btn{padding-left:14px;color:var(--blue-600)}
.region-list__num{font-size:.6875rem;font-weight:600;letter-spacing:.16em;color:var(--ink-400);flex:none;width:26px}
.region-list__name{
  font-family:var(--font-display);font-size:clamp(1.5rem,2.6vw,2rem);font-weight:600;
  text-transform:uppercase;letter-spacing:.01em;line-height:1;flex:1;min-width:0;
}
.region-list__btn .chip{display:none;flex:none}
@media (min-width:620px){.region-list__btn .chip{display:inline-block}}
.region-list__arrow{width:18px;height:18px;opacity:0;transform:translateX(-6px);
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease-out);flex:none}
.region-list__btn:hover .region-list__arrow,.region-list__item.is-active .region-list__arrow{opacity:1;transform:translateX(0)}

/* 12. WERTE / UNTERNEHMEN ================================================ */
.about{display:grid;gap:clamp(36px,4.5vw,72px);align-items:center}
.about__media{position:relative}
.about__media .media{aspect-ratio:4/5}
.about__badge{
  position:absolute;right:clamp(-12px,-1vw,0px);bottom:clamp(20px,3vw,40px);
  background:var(--blue-600);color:#fff;
  padding:clamp(18px,2vw,26px) clamp(20px,2.4vw,32px);
  max-width:250px;box-shadow:var(--shadow-md);
}
.about__badge b{
  display:block;font-family:var(--font-display);font-weight:700;
  font-size:clamp(2.25rem,3.4vw,3rem);line-height:1;margin-bottom:6px;
}
.about__badge span{font-size:.8125rem;line-height:1.45;color:rgba(255,255,255,.86);display:block}

.values{display:grid;grid-template-columns:1fr;gap:0}
.value{
  padding:26px 0;border-top:1px solid var(--line);
  display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;
  transition:border-color var(--t) var(--ease);
}
.value:last-child{border-bottom:1px solid var(--line)}
.value:hover{border-top-color:var(--blue-600)}
.value__icon{
  width:44px;height:44px;display:grid;place-items:center;flex:none;
  border:1px solid var(--line);color:var(--blue-600);border-radius:var(--radius-sm);
  transition:background var(--t) var(--ease),color var(--t) var(--ease),border-color var(--t) var(--ease);
}
.value__icon svg{width:22px;height:22px}
.value:hover .value__icon{background:var(--blue-600);border-color:var(--blue-600);color:#fff}
.value__title{font-size:1.125rem;font-weight:700;letter-spacing:-.015em;margin-bottom:5px}
.value__text{font-size:.9375rem;color:var(--text-muted);line-height:1.6}
.section--dark .value{border-top-color:rgba(255,255,255,.14)}
.section--dark .value:last-child{border-bottom-color:rgba(255,255,255,.14)}
.section--dark .value__icon{border-color:rgba(255,255,255,.18);color:var(--blue-400)}
.section--dark .value__text{color:rgba(255,255,255,.64)}

/* 13. RECRUITING ========================================================= */
.recruit{
  position:relative;background:var(--navy-950);color:#fff;overflow:hidden;isolation:isolate;
}
.recruit__media{position:absolute;inset:0;z-index:-2}
.recruit__media img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.recruit__scrim{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(95deg,rgba(5,15,29,.96) 0%,rgba(5,15,29,.86) 40%,rgba(5,15,29,.34) 100%);
}
.recruit__inner{max-width:620px;padding-block:clamp(72px,10vw,140px)}
.recruit__regions{
  display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 32px;
}
.recruit__region{
  border:1px solid rgba(255,255,255,.24);padding:8px 16px;
  font-size:.8125rem;font-weight:500;letter-spacing:.04em;color:rgba(255,255,255,.86);
  transition:background var(--t) var(--ease),border-color var(--t) var(--ease);
}
.recruit__region:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5)}

/* Laufband */
.marquee{
  position:relative;overflow:hidden;background:var(--blue-600);color:#fff;
  padding:14px 0;border-block:1px solid var(--blue-700);
}
.marquee__track{display:flex;width:max-content;animation:marquee 34s linear infinite}
.marquee__item{
  display:inline-flex;align-items:center;gap:26px;padding-right:26px;
  font-family:var(--font-display);font-size:1.25rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;
}
.marquee__item svg{width:16px;height:16px;opacity:.7}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* 14. KONTAKT-CTA ======================================================== */
.cta-block{display:grid;gap:clamp(32px,4vw,64px);align-items:center}
.contact-card{
  border:1px solid var(--line);background:#fff;
  padding:clamp(26px,3vw,40px);position:relative;
}
.contact-card__row{
  display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;
  padding:16px 0;border-top:1px solid var(--line-soft);
}
.contact-card__row:first-of-type{border-top:0;padding-top:0}
.contact-card__row svg{width:20px;height:20px;color:var(--blue-600);margin-top:3px}
.contact-card__label{
  font-size:.625rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-400);display:block;margin-bottom:3px;
}
.contact-card__value{font-size:1rem;font-weight:500;line-height:1.5}
.contact-card__value a:hover{color:var(--blue-600)}

/* 15. FOOTER ============================================================= */
.footer{background:var(--navy-950);color:rgba(255,255,255,.66);position:relative;overflow:hidden}
.footer__wordmark{
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(4rem,17vw,15rem);line-height:.8;letter-spacing:.01em;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.07);
  position:absolute;left:50%;transform:translateX(-50%);bottom:-.08em;
  white-space:nowrap;pointer-events:none;user-select:none;
}
.footer__inner{position:relative;z-index:1;padding-block:clamp(56px,7vw,96px) 0}
.footer__top{display:grid;gap:clamp(36px,4vw,56px);padding-bottom:clamp(40px,5vw,64px)}
.footer__brand{max-width:34ch}
.footer__desc{font-size:.9375rem;line-height:1.7;margin-top:22px;color:rgba(255,255,255,.56)}
.footer__cols{display:grid;grid-template-columns:repeat(2,1fr);gap:32px}
.footer__title{
  font-size:.6875rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:#fff;margin-bottom:18px;
}
.footer__list li + li{margin-top:11px}
.footer__list a{
  font-size:.9375rem;color:rgba(255,255,255,.6);
  transition:color var(--t-fast) var(--ease),padding-left var(--t) var(--ease);
  display:inline-block;
}
.footer__list a:hover{color:#fff;padding-left:6px}
.footer__contact{font-size:.9375rem;line-height:1.8;color:rgba(255,255,255,.6)}
.footer__contact a{color:#fff}
.footer__contact a:hover{color:var(--blue-400)}
.footer__bottom{
  border-top:1px solid rgba(255,255,255,.12);
  padding-block:26px 30px;
  display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;align-items:center;
  font-size:.8125rem;color:rgba(255,255,255,.44);
}
.footer__legal{display:flex;flex-wrap:wrap;gap:20px}
.footer__legal a:hover{color:#fff}
.footer .logo__name{color:#fff}

/* Zum Seitenanfang */
.to-top{
  position:fixed;right:20px;bottom:20px;z-index:900;
  width:48px;height:48px;display:grid;place-items:center;
  background:var(--navy-900);color:#fff;border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius-sm);cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease-out),
             visibility var(--t),background var(--t) var(--ease);
}
.to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
/* Auf Smartphones ausgeblendet, damit Formularfelder frei bleiben. */
@media (max-width:619px){.to-top{display:none}}
.to-top:hover{background:var(--blue-600);border-color:var(--blue-600)}
.to-top svg{width:18px;height:18px}