/**
 * HEROSE – Footer (Redesign nach Figma node 60-118)
 * Alle Werte aus Footer.png (3844x1040 = 2x) ausgemessen.
 *
 * WICHTIG: Jede Regel ist unter .site-footer gescoped.
 * Solange kein Element die Klasse .site-footer traegt, hat diese Datei
 * keinerlei Wirkung – sie kann also gefahrlos vor der HTML-Umstellung
 * hochgeladen werden. Der alte Footer (<footer class="darker ...">)
 * bleibt unberuehrt, obwohl einige Klassennamen gleich heissen
 * (.footer-menu-wrapper, .footer-menu, .footer-menu-item,
 * .footer-legal-item, .footer-logo).
 *
 * Einbinden nach footer.css.
 */

footer.site-footer {
  /* Farben */
  --footer-bg: #022636;
  --footer-text: #708497;
  --footer-text-hover: #ffffff;
  --footer-rule: #415d75;
  --footer-bottom-text: #ffffff;

  /*
   * Raster – Breiten identisch zur Live-Seite (bootstrap-grid + grid.css).
   * Werte stehen weiter unten in den Breakpoints.
   */
  --footer-container-width: 100%;
  --footer-container-padding: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
  --footer-columns: 1;
  --footer-column-gap: 30px;
  --footer-row-gap: 40px;

  /* Typo */
  --footer-font-size: 18px;
  --footer-line-height: 20px;
  --footer-item-gap: 10px;
  --footer-title-mb: 16px;
  --footer-bottom-font-size: 13px;

  /* Abstaende */
  --footer-padding-top: 60px;
  --footer-padding-bottom: 45px;
  --footer-brand-mt: 60px;
  --footer-brand-mb: 20px;
  --footer-bottom-py: 22px;

  background: var(--footer-bg);
  color: var(--footer-text);
  padding-top: var(--footer-padding-top);
  padding-bottom: var(--footer-padding-bottom);
  font-family: "Inter-Regular", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--footer-font-size);
  line-height: var(--footer-line-height);
}

.site-footer .site-footer__inner {
  width: 100%;
  max-width: var(--footer-container-width);
  margin-inline: auto;
  padding-inline: var(--footer-container-padding);
}

.site-footer a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--footer-text-hover);
}

.site-footer a:focus-visible {
  outline: 1px solid var(--footer-text-hover);
  outline-offset: 3px;
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ---------------------------------------------------------------- Menue */

.site-footer .footer-menu-wrapper {
  display: grid;
  grid-template-columns: repeat(var(--footer-columns), minmax(0, 1fr));
  column-gap: var(--footer-column-gap);
  row-gap: var(--footer-row-gap);
}

.site-footer .footer-menu-title {
  margin: 0 0 var(--footer-title-mb);
  font-family: "Inter-Bold", "Inter", system-ui, sans-serif;
  font-size: var(--footer-font-size);
  font-weight: 700;
  line-height: var(--footer-line-height);
  color: var(--footer-text);
  letter-spacing: 0;
}

.site-footer .footer-menu {
  display: flex;
  flex-direction: column;
  gap: var(--footer-item-gap);
}

/* font-size explizit, sonst greift `footer li` aus der alten footer.css */
.site-footer .footer-menu-item {
  font-size: var(--footer-font-size);
  line-height: var(--footer-line-height);
  letter-spacing: 0;
}

/* Trennlinie innerhalb einer Menuespalte (siehe Spalte "Kontakt") */
.site-footer .footer-menu-separator {
  border-top: 1px solid var(--footer-rule);
  margin-block: var(--footer-item-gap);
}

/* -------------------------------------------------------- Logo/Socials */

.site-footer .footer-brand {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: var(--footer-brand-mt);
  margin-bottom: var(--footer-brand-mb);
}

.site-footer .footer-logo {
  display: block;
  flex: none;
}

/* Nativ ist die SVG 79,597 x 60 – im Figma steht sie auf 64 px Hoehe (= 85 px breit). */
.site-footer .footer-logo img,
.site-footer .footer-logo svg {
  display: block;
  height: 64px;
  width: auto;
}

.site-footer .footer-socials {
  display: flex;
  align-items: center;
  gap: 20px;
}

.site-footer .footer-socials a {
  display: block;
  width: 30px;
  height: 30px;
  color: var(--footer-text);
}

.site-footer .footer-socials svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/*
 * Alternative, falls die bestehenden <img src="/images/logo-social-*.svg">
 * beibehalten werden sollen – faerbt die SVGs ueber eine Maske ein:
 *
 * .site-footer .footer-socials img { width: 100%; height: 100%; }
 * .site-footer .footer-socials a {
 *   background-color: currentColor;
 *   -webkit-mask: var(--icon) center / contain no-repeat;
 *           mask: var(--icon) center / contain no-repeat;
 * }
 * .site-footer .footer-socials a img { visibility: hidden; }
 */

/* ------------------------------------------------------- untere Leiste */

.site-footer .footer-bottom {
  border-top: 1px solid var(--footer-rule);
  padding-block: var(--footer-bottom-py);
  font-size: var(--footer-bottom-font-size);
  line-height: 1.4;
  color: var(--footer-bottom-text);
}

.site-footer .footer-bottom__inner {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.site-footer .footer-copyright {
  margin: 0;
}

.site-footer .footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
}

/* dito: schlaegt `footer li` aus der alten footer.css */
.site-footer .footer-legal-item {
  font-size: var(--footer-bottom-font-size);
  line-height: 1.4;
}

.site-footer .footer-legal-item:not(:last-child)::after {
  content: "|";
  margin-left: 9px;
  color: var(--footer-bottom-text);
}

/* ---------------------------------------------------------- Breakpoints */

@media (min-width: 576px) {
  footer.site-footer {
    --footer-container-width: 540px;
    --footer-columns: 2;
  }
}

@media (min-width: 768px) {
  footer.site-footer {
    --footer-container-width: 720px;
    --footer-columns: 3;
  }

  .site-footer .footer-bottom__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

@media (min-width: 992px) {
  footer.site-footer {
    --footer-container-width: 960px;
    --footer-columns: 4;
  }
}

@media (min-width: 1200px) {
  footer.site-footer {
    --footer-container-width: 1140px;
  }
}

@media (min-width: 1400px) {
  footer.site-footer {
    --footer-container-width: 1320px;
    --footer-columns: 6;
  }

  /*
   * Im Figma sitzen Socials und Rechtslinks nicht rechtsbuendig, sondern
   * linksbuendig auf Rasterspalte 5. Darum liegen beide Zeilen auf dem
   * gleichen 6er-Raster wie das Menue.
   */
  .site-footer .footer-brand,
  .site-footer .footer-bottom__inner {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: var(--footer-column-gap);
  }

  .site-footer .footer-brand {
    align-items: end;
  }

  .site-footer .footer-bottom__inner {
    align-items: center;
  }

  .site-footer .footer-logo {
    grid-column: 1;
  }

  .site-footer .footer-copyright {
    grid-column: 1 / span 4;
  }

  .site-footer .footer-socials,
  .site-footer .footer-legal {
    grid-column: 5 / span 2;
    justify-self: start;
  }

  /* Rechtsbuendig stattdessen: die beiden Regeln oben durch
   *   grid-column: 5 / -1; justify-self: end;
   * ersetzen. */
}

@media (min-width: 1580px) {
  footer.site-footer {
    --footer-container-width: 1480px;
  }
}

@media (min-width: 1800px) {
  footer.site-footer {
    --footer-container-width: 1640px;
  }
}