/* ==========================================================================
   CityFoundry AG — Site footer

   Structure from the client's Figma frame `startseite-v2 > footer`: ground
   #004045, 1px top hairline #BCD8DA @ 30%, logo + tagline on the left, cyan
   uppercase column headings, bottom bar with copyright and legal links.

   The newsletter column is OURS. The Figma footer has no newsletter, but the
   client called it out — "Newsletter in the footer is also great" — so it
   stays and is styled onto the Figma palette. It carries a real consent
   checkbox: an email opt-in without one is not GDPR/revDSG-defensible, and
   the previous version had none.

   The street address moved out of the footer. In CH/DE the Impressum is the
   place that legally has to carry it, and the Figma footer does not show it.

   Requires: tokens.css
   ========================================================================== */

.cf-footer {
  background: var(--cf-teal);
  border-top: 1px solid var(--cf-line-sky-30);
}

.cf-footer__inner {
  max-width: calc(var(--cf-shell) + var(--cf-gutter) * 2);
  margin: 0 auto;
  padding: 72px var(--cf-gutter) 0;
}

.cf-footer__top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.4fr;
  gap: 48px;
  padding-bottom: 56px;
}

/* --- Brand column ------------------------------------------------------- */

.cf-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  max-width: 340px;
}

.cf-footer__logo {
  display: block;
  line-height: 0;
  border-radius: var(--cf-r-btn);
}

.cf-footer__logo img {
  width: 196px;
  height: auto;
  display: block;
}

.cf-footer__tagline {
  margin: 0;
  font-family: var(--cf-font-body);
  font-weight: 400;
  font-size: var(--cf-fs-body-xs);
  line-height: var(--cf-lh-body-dark);
  color: var(--cf-sky);
}

.cf-footer__mail {
  font-family: var(--cf-font-body);
  font-weight: 700;
  font-size: var(--cf-fs-body-xs);
  color: var(--cf-cyan);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--cf-ease);
}

.cf-footer__mail:hover { border-bottom-color: var(--cf-cyan); }

/* --- Link columns ------------------------------------------------------- */

.cf-footer__nav,
.cf-footer__news {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.cf-footer__heading {
  margin: 0 0 4px;
  font-family: var(--cf-font-body);
  font-weight: 700;
  font-size: var(--cf-fs-eyebrow);
  line-height: var(--cf-lh-eyebrow);
  letter-spacing: var(--cf-ls-caps);
  text-transform: uppercase;
  color: var(--cf-cyan);
}

.cf-footer__link {
  font-family: var(--cf-font-body);
  font-weight: 400;
  font-size: var(--cf-fs-body-xs);
  line-height: var(--cf-lh-body-xs);
  color: var(--cf-sky);
  text-decoration: none;
  transition: color .2s var(--cf-ease);
  /* `Personalprozesse verbessern` is 27 characters — it has to be allowed to
     wrap rather than push the grid wider. */
  overflow-wrap: break-word;
}

.cf-footer__link:hover,
.cf-footer__link:focus-visible { color: var(--cf-cyan); }

/* --- Newsletter — ours, client-requested -------------------------------- */

.cf-footer__news { gap: 14px; }

.cf-footer__pitch {
  margin: 0;
  font-family: var(--cf-font-body);
  font-weight: 400;
  font-size: var(--cf-fs-eyebrow);
  line-height: 1.55;
  color: var(--cf-sky);
}

.cf-newsletter {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.cf-newsletter__input {
  width: 100%;
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--cf-line-sky-30);
  border-radius: var(--cf-r-btn);
  background: var(--cf-line-light-10);
  color: var(--cf-white);
  font-family: var(--cf-font-body);
  font-weight: 400;
  font-size: var(--cf-fs-body-sm);
  transition: border-color .2s var(--cf-ease), background .2s var(--cf-ease);
}

.cf-newsletter__input::placeholder { color: rgb(var(--cf-sky-rgb) / .65); }

.cf-newsletter__input:hover { border-color: var(--cf-sky); }

.cf-newsletter__input:focus {
  outline: none;
  border-color: var(--cf-cyan);
  background: var(--cf-line-light-12);
}

/* Invalid styling only after the browser has something to judge, so an empty
   untouched field is never shown as an error. */
.cf-newsletter__input:not(:placeholder-shown):invalid { border-color: var(--cf-error); }

.cf-newsletter__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  font-family: var(--cf-font-body);
  font-weight: 400;
  font-size: var(--cf-fs-eyebrow);
  line-height: 1.5;
  color: var(--cf-sky);
  cursor: pointer;
}

.cf-newsletter__check {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: var(--cf-cyan);
  cursor: pointer;
}

.cf-newsletter__consent a {
  color: var(--cf-cyan);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cf-newsletter__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: flex-start;
  height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--cf-r-btn);
  background: var(--cf-cyan);
  color: var(--cf-teal);
  font-family: var(--cf-font-body);
  font-weight: 700;
  font-size: var(--cf-fs-label);
  cursor: pointer;
  transition: background .2s var(--cf-ease), transform .2s var(--cf-ease);
}

.cf-newsletter__submit:hover {
  background: var(--cf-cyan-hover);
  transform: translateY(-1px);
}

.cf-newsletter__icon { transition: transform .2s var(--cf-ease); }
.cf-newsletter__submit:hover .cf-newsletter__icon { transform: translateX(3px); }

/* --- Bottom bar --------------------------------------------------------- */

.cf-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 22px 0 26px;
  border-top: 1px solid var(--cf-line-light-10);
}

.cf-footer__copy,
.cf-footer__legal-link {
  font-family: var(--cf-font-body);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.4;
  color: var(--cf-sky);
}

.cf-footer__legal {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.cf-footer__legal-link {
  text-decoration: none;
  transition: color .2s var(--cf-ease);
}

.cf-footer__legal-link:hover,
.cf-footer__legal-link:focus-visible { color: var(--cf-cyan); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1439px) {
  .cf-footer__inner { padding-left: var(--cf-gutter-md); padding-right: var(--cf-gutter-md); }
}

@media (max-width: 1199px) {
  .cf-footer__top {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 40px;
  }
  /* The newsletter drops to its own full-width row rather than being squeezed
     into a third of the grid. */
  .cf-footer__news { grid-column: 1 / -1; max-width: 480px; }
}

@media (max-width: 767px) {
  .cf-footer__inner { padding: 48px var(--cf-gutter-sm) 0; }
  .cf-footer__top {
    grid-template-columns: 1fr;
    gap: 36px;
    padding-bottom: 40px;
  }
  /* The client singled the newsletter out, so on mobile it leads instead of
     sitting below three link lists nobody scrolls to. */
  .cf-footer__news { order: -1; grid-column: auto; max-width: none; }
  .cf-footer__brand { max-width: none; }
  .cf-newsletter__submit { align-self: stretch; }
  .cf-footer__bottom { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .cf-footer__link,
  .cf-footer__mail,
  .cf-footer__legal-link,
  .cf-newsletter__input,
  .cf-newsletter__submit,
  .cf-newsletter__icon { transition: none; }

  .cf-newsletter__submit:hover { transform: none; }
}