/* Footer (templates/includes/footer.html), board „Logo aus Icon und Wortmarke,
   Footer mit Band aus der Vorlage, Favicon“. Tokens: agrex.css. */
.agx-footer {
  border-top: 1px solid var(--agx-line);
  background: var(--agx-white);
  color: var(--agx-ink);
}
.agx-footer__in {
  max-width: calc(var(--agx-content) + 2 * var(--agx-gutter));
  margin: 0 auto;
  padding: 40px 20px 0;
}
.agx-footer a { color: var(--agx-ink); text-decoration: none; }
.agx-footer a:hover,
.agx-footer a:focus-visible { color: var(--agx-teal); }

.agx-footer__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
/* a block of its own width: no text line (and descender space) below the logo */
.agx-footer__logo { display: block; width: fit-content; margin-bottom: 14px; }
.agx-footer__logo img { display: block; width: auto; height: 30px; }
.agx-footer__address,
.agx-footer__contact { margin: 0; font-size: 14px; line-height: 1.6; color: var(--agx-muted); }
.agx-footer__contact { display: flex; flex-direction: column; margin-top: 12px; }
.agx-footer__contact a { font-size: 14px; }

/* Link columns: Produkte and Kunden side by side, Unternehmen below (mobile) */
.agx-footer__columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
.agx-footer__label {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--agx-muted);
}
.agx-footer__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 10px 0 0;
  list-style: none;
  /* the rows take the link's size, not the body's 17px line box */
  font-size: 14px;
  line-height: 1.5;
}

.agx-footer__bottom {
  margin-top: 40px;
  padding: 20px 0 28px;
  border-top: 1px solid var(--agx-line);
  font-size: 13px;
  color: var(--agx-muted);
}
.agx-footer__bottom p { margin: 0; }

/* Band from the bottom edge of the AGREX template: full width, never squeezed
   (cropped at the sides, bottom edge kept). On phones the band extends into
   the home indicator area (safe-area inset, --agx-safe-bottom): the image
   fills only the content box, the extension below it runs from the band's
   gold (8px) into light teal (from 22px), the colour of the area below the
   page end (html background, theme-color). No background colour behind the
   image: its transparent top stays the footer's white.
   From 1512px (56px x the image's 27:1) cropping would leave only the thick
   lower part: there the whole wave is stretched to the width instead
   (agrex-band-weit.svg, preserveAspectRatio none). */
.agx-footer__band {
  --agx-band-image: url("../../img/brand/agrex-band.bb4e6c761496.svg");
  --agx-band-size: cover;
  box-sizing: content-box;
  height: 40px;
  padding-bottom: var(--agx-safe-bottom);
  background:
    var(--agx-band-image) center bottom / var(--agx-band-size) no-repeat content-box,
    linear-gradient(var(--agx-gold) 0, var(--agx-gold) 8px, var(--agx-teal-light) 22px, var(--agx-teal-light) 100%)
      left bottom / 100% var(--agx-safe-bottom) no-repeat;
}

/* Compact from 768px (tablet and desktop): footer about 350px high at
   1280-2560px */
@media (min-width: 768px) {
  .agx-footer__in { padding: 48px var(--agx-gutter) 0; }
  /* grid children: brand + the link columns that have links (--agx-footer-cols) */
  .agx-footer__grid { grid-template-columns: 1.4fr repeat(var(--agx-footer-cols, 3), 1fr); gap: 40px; }
  .agx-footer__columns { display: contents; }
  .agx-footer__links { gap: 8px; }
  .agx-footer__bottom { margin-top: 32px; padding: 14px 0 18px; }
  .agx-footer__band { height: 56px; }
}

@media (min-width: 1512px) {
  .agx-footer__band {
    --agx-band-image: url("../../img/brand/agrex-band-weit.a21eca8bb29d.svg");
    --agx-band-size: 100% 100%;
  }
}