/* Final UI/UX polish: restrained motion, clearer interaction states and mobile safeguards. */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body { overflow-x: clip; }

a,
button,
[role="button"] {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.site-header {
  padding-top: calc(24px + env(safe-area-inset-top, 0px));
}

.site-header.compact {
  padding-top: calc(9px + env(safe-area-inset-top, 0px));
}

.site-header nav a::after {
  transform-origin: left center;
  transition: width .24s cubic-bezier(.2,.75,.25,1), opacity .2s ease;
}

.site-header nav a.is-current::after,
.site-header nav a[aria-current="location"]::after {
  width: 100%;
}

.text-link span { animation: none; }

.proof-strip > div {
  transform: translateZ(0);
  transition: background-color .25s ease, transform .25s cubic-bezier(.2,.75,.25,1);
}

.client-card svg {
  animation: none !important;
  transition: transform .32s cubic-bezier(.2,.75,.25,1), color .2s ease, stroke .2s ease;
}

.motion-enhanced .motion-item {
  transition-duration: .58s;
  transition-timing-function: cubic-bezier(.22,1,.36,1);
}

.motion-enhanced .product-photo img,
.motion-enhanced .operations-visual img,
.motion-enhanced .infra-photo > img,
.motion-enhanced .coop-visual img {
  will-change: auto;
}

.hero-media > img {
  transform: none !important;
  transition: none;
}

.js .hero-copy > .eyebrow,
.js .hero-copy > h1,
.js .hero-actions {
  animation: hero-copy-enter .7s both cubic-bezier(.22,1,.36,1);
}

.js .hero-copy > h1 { animation-delay: .08s; }
.js .hero-actions { animation-delay: .18s; }

@keyframes hero-copy-enter {
  from { opacity: 0; transform: translate3d(0, 16px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (hover:hover) and (pointer:fine) {
  .proof-strip > div:hover { transform: scale(1.025); }
  .client-card:hover svg { transform: translate3d(0,-4px,0) rotate(-3deg); }
  .product-card:hover .product-photo img { transform: translate3d(0,var(--media-y,0)) scale(calc(var(--media-scale,1.025) + .025)); }
}

@media (hover:none), (pointer:coarse) {
  .button:hover,
  .button-light:hover,
  .button-black:hover,
  .hero-actions .button:hover,
  .hero-actions .text-link:hover,
  .product-card:hover,
  .proof-strip > div:hover,
  .client-card:hover {
    transform: none;
  }

  .text-link:hover span,
  .button:hover::after,
  .product-card:hover .route-icon,
  .client-card:hover svg {
    transform: none;
  }

  .hero-media > img {
    transform: none !important;
    transition: none;
  }
}

@media (max-width:1080px) {
  .site-header nav.open a {
    align-items: center;
    display: flex;
    min-height: 48px;
  }
}

@media (max-width:760px) {
  .site-header,
  .site-header.compact {
    min-height: calc(82px + env(safe-area-inset-top, 0px));
    padding-bottom: 16px;
    padding-top: calc(16px + env(safe-area-inset-top, 0px));
  }

  .hero {
    grid-template-rows: minmax(660px, calc(88svh + env(safe-area-inset-top, 0px))) auto auto auto auto;
  }

  .hero-copy > .eyebrow { margin-top: calc(122px + env(safe-area-inset-top, 0px)); }

  .hero .proof-strip > div {
    min-width: 0;
  }

  .hero .proof-strip span {
    hyphens: auto;
    overflow-wrap: anywhere;
  }

  input,
  select,
  textarea { font-size: 16px; }

  .contact-form .button { width: 100%; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }

  .js .hero-copy > .eyebrow,
  .js .hero-copy > h1,
  .js .hero-actions {
    animation: none;
  }

  .hero-media > img { transform: none !important; transition: none; }
}

.form-honeypot {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.contact-form .button:disabled {
  cursor: wait;
  opacity: .62;
  transform: none;
}

.form-status.is-success { color: var(--emerald-dark, #245c46); }
.form-status.is-error { color: #9f2d22; }

/* Visual and copy refinement — 14.10.2026 */
.hero-badge {
  background: rgba(5,10,12,.66);
  border-left: 2px solid #eb821c;
  padding: 14px 18px;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.hero-badge > b { font-size: 36px; }
.hero-badge > b span { font-size: 18px; }
.hero-badge > span { font-size: 9px; }

@media (min-width: 761px) {
  .hero-badge {
    transform: scale(.7) !important;
    transform-origin: right bottom;
  }
}

@media (max-width: 760px) {
  /* The compact metric sits below both CTA links, inside the photo. */
  .hero-badge {
    bottom: 10px;
    gap: 10px;
    padding: 6px 10px;
    border-left-width: 1px;
  }
  .hero-badge > b { font-size: 24px; }
  .hero-badge > b span { font-size: 13px; }
  .hero-badge > span { font-size: 10px; line-height: 1.35; }

  /* Keep the original facade sign fully in the mobile crop. */
  .infra-photo > img {
    object-position: 20% center;
    transform: none !important;
    transition: none;
  }
}

/* A restrained fixed crop keeps attention on the central GERMES booth. */
.cooperation > .coop-visual {
  aspect-ratio: 3 / 2;
}
.motion-enhanced .coop-visual img,
.coop-visual img {
  object-position: center;
  transform: none !important;
  transition: none;
}

/* Local Natural Earth geometry has no baked-in multilingual labels. */
.map {
  background: #dfe8e5;
  position: relative;
  overflow: hidden;
}
.map-static, .map-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-static { object-fit: cover; }
.map-canvas { visibility: hidden; background: #dfe8e5; }
.map-ready .map-canvas { visibility: visible; }
.map-ready .map-static { visibility: hidden; }
.map .leaflet-control-attribution {
  background: rgba(255,255,255,.82);
  color: #53635c;
}
.map .leaflet-tooltip {
  color: #263b32;
  font-family: var(--font-body);
  font-weight: 600;
}

.hero-copy > .lead,
.hero-copy > .hero-note { align-self: start; padding-top: 70px; width: 100%; }
.hero-copy > .product-descriptor {
  align-items: center;
  display: flex;
  gap: .55em;
  justify-content: space-between;
  max-width: 620px;
  text-align: left;
  text-align-last: auto;
  width: 100%;
}
.hero-copy > .product-descriptor > span { white-space: nowrap; }
.hero-copy > .product-descriptor > i { font-style: normal; }

.footer-lang {
  align-items: center;
  display: inline-flex;
  gap: 2px;
}
footer .footer-lang [data-lang] {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  min-height: 38px;
  min-width: 38px;
  touch-action: manipulation;
}
footer .footer-lang [data-lang]:focus-visible {
  outline: 2px solid #eb821c;
  outline-offset: 2px;
}
footer .footer-lang [data-lang]:first-child {
  justify-content: flex-start;
  padding-left: 0;
}

.stat.orange { background: #eb821c; color: #fff; }
.stat.orange svg { stroke: #fff; }
.stat.orange span { color: #fff; }
.stat.centers b { color: #eb821c; }

.product-title-accent {
  display: inline-block;
  padding-bottom: .28em;
  position: relative;
  white-space: nowrap;
}
.product-title-accent::after {
  background: #eb821c;
  bottom: .02em;
  clip-path: inset(0 100% 0 0);
  content: '';
  height: 2px;
  left: 0;
  position: absolute;
  width: calc(100% - .2em);
}
.product-title-accent::before {
  border-right: 2px solid #eb821c;
  border-top: 2px solid #eb821c;
  bottom: -.13em;
  content: '';
  height: .24em;
  opacity: 0;
  position: absolute;
  right: .02em;
  transform: translateX(-1.1em) rotate(45deg);
  width: .24em;
}
.products .section-heading.route-active .product-title-accent::after { animation: product-route-line 1.05s cubic-bezier(.22,1,.36,1) forwards; }
.products .section-heading.route-active .product-title-accent::before { animation: product-route-arrow 1.05s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes product-route-line { to { clip-path: inset(0 0 0 0); } }
@keyframes product-route-arrow { to { opacity: 1; transform: translateX(0) rotate(45deg); } }

.hero-title-secondary::after,
.hero-title-secondary::before { animation: none; }
.hero h1.route-active .hero-title-secondary::after { animation: light-route 1.3s .12s cubic-bezier(.22,1,.36,1) forwards; }
.hero h1.route-active .hero-title-secondary::before { animation: light-arrow 1.3s .12s cubic-bezier(.22,1,.36,1) forwards; }

.product-photo img { transition: transform .52s cubic-bezier(.22,1,.36,1),filter .42s ease; }
@media (hover:hover) and (pointer:fine) {
  .product-card:hover .product-photo img,
  .product-card:focus-visible .product-photo img {
    transform: translate3d(0,var(--media-y,0)) scale(calc(var(--media-scale,1.025) + .045));
  }
}

.alex-credit {
  background: none;
  border: 0;
  color: #fff;
  display: inline-block;
  font-weight: 400;
  padding: 0;
  white-space: nowrap;
}
.alex-credit .credit-name { color: #eb821c; }

@media (max-width:760px) {
  .hero-copy > .lead { padding-top: 48px; }
  .hero-copy > .hero-note { padding-top: 25px; }
  .hero-copy > .product-descriptor {
    font-size: 10px;
    gap: .2em;
    letter-spacing: .035em;
    text-align: left;
    text-align-last: left;
  }
  footer .footer-lang [data-lang] { min-height: 44px; min-width: 44px; }
}

@media (prefers-reduced-motion:reduce) {
  .hero-title-secondary::after,.product-title-accent::after { clip-path: inset(0 0 0 0); }
  .hero-title-secondary::before,.product-title-accent::before { opacity: 1; transform: rotate(45deg); }
}

@media (hover: hover) and (pointer: fine) { footer .footer-lang [data-lang] { cursor: url('./assets/cursor-orange-v9.svg') 2 2, pointer; } }

/* Direct contact, below the geographic contact block. */
.contact-email {
  color: var(--green);
  display: inline-block;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  margin: 18px 0 0 98px;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 5px;
  transition: color .18s ease, text-decoration-color .18s ease;
}
.contact-email:hover { color: #EB821C; text-decoration-color: currentColor; }
.contact-departments { margin: 22px 0 0 98px; display: grid; gap: 18px; }
.contact-departments p { margin: 0 0 3px; font-size: 13px; color: var(--muted); }
.contact-departments a { display: inline-flex; align-items: center; min-height: 44px; color: var(--green); font-size: 18px; }
.contact-departments a:hover { color: #EB821C; }

/* Compact visible language spacing, with a full-height tap target. */
.lang, .footer-lang { gap: 4px; }
.lang [data-lang], footer .footer-lang [data-lang] {
  min-width: 28px;
  min-height: 44px;
  padding-inline: 0;
  justify-content: center;
}
footer .footer-lang [data-lang]:first-child { justify-content: flex-start; }
@media (max-width: 760px) {
  .contact-email { margin-left: 0; font-size: 17px; }
  .contact-departments { margin-left: 0; }
  .hero-actions { margin-bottom: 10px; gap: 14px; }
  .hero-actions .button { align-self: flex-end; }
  .hero-actions .text-link {
    width: calc(100% - 160px);
    margin-left: 0;
    min-height: 46px;
    padding: 6px 0;
    gap: 6px;
    white-space: normal;
    font-size: 10px;
    line-height: 1.4;
    letter-spacing: .02em;
    justify-content: space-between;
  }
  .hero-actions .text-link span { font-size: 20px; flex-shrink: 0; }
  .hero-badge { width: 148px; height: 46px; gap: 6px; padding: 6px; }
  .hero-badge > b { font-size: 22px; flex-shrink: 0; }
  .hero-badge > span { font-size: 9px; }
}

/* Keep inputs aligned within a grid row when a label wraps. */
.contact-form > label > span { flex: 1; }

.lang a[data-lang], .footer-lang a[data-lang] { display: inline-flex; align-items: center; text-decoration: none; }

/* Department phone and email share typography and align in separate rows. */
.contact-departments > div { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.contact-departments a { max-width: 100%; font-size: 18px; font-weight: 400; line-height: 1.5; overflow-wrap: anywhere; }

/* visual24: vector arrows cannot switch to colour emoji on iOS. */
.button::after,
.hero-actions .text-link span {
  content: '';
  display: inline-block;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  font-size: 0;
  background-color: #eb821c;
  -webkit-mask: url('/assets/action-arrow.svg') center / contain no-repeat;
  mask: url('/assets/action-arrow.svg') center / contain no-repeat;
}
.hero-actions .text-link span {
  -webkit-mask-image: url('/assets/action-arrow-down.svg');
  mask-image: url('/assets/action-arrow-down.svg');
}
.hero-actions .button::after { display: none; }
.button-small::after { width: 18px; height: 18px; flex-basis: 18px; }