/* ── Global resets ── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  max-width: 100%;
  overflow-x: clip; /* clip (not hidden) so position:sticky still works (M20 catalog map) */
}

/* ══════════════════════════════════════════════════════════════════════════════
   APP FOOTER
══════════════════════════════════════════════════════════════════════════════ */
.app-footer {
  margin-top: auto;
  background: #f4f6f9;
  border-top: 1px solid #e2e8f0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.app-footer__inner {
  width: min(var(--fewo-content-max), calc(100% - 2*var(--fewo-gutter)));
  margin: 0 auto;
  box-sizing: border-box;
  min-height: 520px;
  display: flex;
  flex-direction: column;
}

.app-footer__main {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 40px 0 0;
  min-height: 0;
}

.app-footer__left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 432px;
}

.footer-brand__title {
  margin: 0;
  width: max-content;
  font-size: 0;
  line-height: 0;
  font-weight: 800;
}

.footer-brand__logo {
  width: auto;
  height: 50px; /* UI/UX 1.1: PNG-логотип по высоте */
  display: block;
  object-fit: contain;
}

.footer-brand__subtitle {
  margin: 22px 0 0;
  max-width: 190px;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 600;
  color: #5A626E;
}

.app-footer__right {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  min-width: 0;
}

.app-footer__nav-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 110px;
}

.footer-links { width: 214px; }
.footer-links:last-child { width: 183px; }

.footer-links__title {
  margin: 0;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 600;
  color: #1c398e;
  hyphens: none;
}

.footer-list {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-list a, .footer-list button {
  color: #0063D1;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 400;
  transition: color 0.15s ease;
  background-color: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}

.footer-list a:hover,
.footer-list a:focus-visible,
.footer-list button:hover,
.footer-list button:focus-visible {
  color: #1c398e;
}

.footer-contacts {
  box-sizing: border-box;
  width: 100%;
  min-height: 80px;
  padding: 16px 0;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  /* C#32 (qa4): контакты повторяют раскладку .app-footer__nav-row (flex, те же ширины
     колонок и gap), чтобы правая колонка (email/телефон) на 1200–900px оставалась
     выровненной под колонку «Rechtliche Hinweise», а не съезжала (grid с фикс.
     217/149 не сжимался синхронно с flex-навигацией). */
  display: flex;
  flex-direction: row;
  gap: 110px;
  align-items: flex-start;
}
.footer-contacts__col:first-child { width: 214px; }
.footer-contacts__col:last-child  { width: 183px; }

.footer-contacts__col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-contacts__item {
  margin: 0;
  font-size: 15px; /* QA refactoring-3 C#32/П4: уменьшено с 17px под Airbnb-типографику */
  line-height: 1.35;
  font-weight: 500;
  color: #1c398e;
}
.footer-contacts__item--nowrap { white-space: nowrap; } /* QA refactoring-3 A#16: телефон в одну строку */

.newsletter {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 455px;
}

.newsletter__text {
  width: 267px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.newsletter__title {
  margin: 0;
  font-size: 17px;
  line-height: 16px;
  font-weight: 500;
  color: #1c398e;
}

.newsletter__hint {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 400;
  color: #5A626E;
  hyphens: none;
}

/* Einwilligungshinweis am Newsletter-Formular. Bewusst klein, aber lesbar —
   nicht als Grau-in-Grau, das ohnehin niemand liest. */
.newsletter__legal {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: #6D7580;
  max-width: 460px;
  hyphens: none;
}
.newsletter__legal a { color: #0063D1; }

.newsletter__form {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  width: 455px;
  height: 48px;
}

.newsletter__field-wrap {
  box-sizing: border-box;
  width: 308px;
  height: 48px;
  border: none;
  border-radius: 8px;
  flex-shrink: 0;
  background: #fff;
}

.newsletter__input {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 8px;
  background: #fff;
  padding: 0 16px;
  font-family: inherit;
  font-size: 14px;
  line-height: 16px;
  font-weight: 500;
  color: #1c398e;
  outline: none;
}

.newsletter__input::placeholder {
  color: #90a1b9;
  opacity: 1;
}

.newsletter__submit {
  box-sizing: border-box;
  width: auto;
  min-width: 120px;
  height: 48px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f1f5f9;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 600;
  color: #5B6472;
  padding: 0 24px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.newsletter__submit:hover,
.newsletter__submit:focus-visible {
  background: #e8edf5;
  color: #90a1b9;
}

.newsletter__msg {
  display: none;
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 500;
}

.locale-btn {
  box-sizing: border-box;
  width: 188px;
  height: 48px;
  margin-top: auto;
  border: 1px solid #bfdbff;
  border-radius: 8px;
  background: #fff;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s ease;
}

.locale-btn:hover,
.locale-btn:focus-visible {
  border-color: #9fc5ff;
}

.locale-btn__label {
  font-size: 17px;
  line-height: 16px;
  font-weight: 500;
  color: #1c398e;
}

.locale-btn__chevron,
.locale-btn__globe {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: none;
  stroke: #1c398e;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.locale-btn__globe {
  fill: #1c398e;
  stroke: none;
}

.footer-copy {
  box-sizing: border-box;
  margin: 0;
  width: 100%;
  min-height: 48px;
  padding: 16px 0;
  border-top: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 14px;
  line-height: 16px;
  font-weight: 500;
  color: #5A626E;
}

/* ── M24: long German words wrap, never overflow ──────────────────────────────
   S-footer-silbentrennung (Runde 8): Mit hyphens:auto trennte der Browser mitten
   in gewöhnlichen Wörtern — "Fewo.de erkun-den", "Impres-sum", "Rechtli-ches",
   "Wider-ruf". Der Zweck der Regel war, dass nichts über den Rand läuft, nicht
   der Blocksatz eines Buchs. Overflow-Schutz bleibt (break-word bricht nur, wenn
   ein Wort sonst NICHT passt), die automatische Silbentrennung entfällt. */
.footer-links__title,
.footer-list a,
.footer-list button,
.footer-contacts__item,
.newsletter__title,
.newsletter__hint,
.footer-brand__subtitle,
.footer-copy {
  overflow-wrap: break-word;
  word-break: normal;
  -webkit-hyphens: manual;
  hyphens: manual;
}

/* S-footer-zentrierung (Runde 8): "Rechtliches Problem melden" und
   "Cookie-Einstellungen" sind <button>-Elemente (sie öffnen Dialoge, sie führen
   nicht auf eine Seite). Ein Button richtet seinen Text vom Browser aus mittig
   aus — deshalb standen genau diese beiden, sobald sie zweizeilig umbrachen,
   zentriert zwischen linksbündigen Nachbarn. Sichtbar auf jeder Seite, auf allen
   Breiten bis 1920px. */
.footer-list button {
  text-align: left;
  display: block;
  width: 100%;
}

/* ── Overflow / min-width safety ── */
.app-footer__main,
.app-footer__left,
.app-footer__right,
.app-footer__nav-row,
.footer-contacts,
.newsletter,
.newsletter__form,
.footer-links {
  max-width: 100%;
  min-width: 0;
}

/* ── Responsive ── */
/* Punkt 7: Der Seitenabstand kommt zentral aus --fewo-gutter, das hier war ein
   zweiter Ort mit eigener Staffelung. */
@media (max-width: 1320px) {
  .app-footer__main { grid-template-columns: 1fr 1fr; gap: 32px; }
  .app-footer__right { width: 100%; }
  .footer-contacts { max-width: 100%; }
  .newsletter, .newsletter__form { width: 100%; max-width: 455px; }
  .newsletter__input { flex: 1; min-width: 0; width: auto; }
  .newsletter__field-wrap { width: auto; flex: 1; }
}

@media (max-width: 900px) {
  .app-footer__inner { width: calc(100% - 64px); }
  .app-footer__main { grid-template-columns: 1fr; padding-top: 24px; }
  .app-footer__left { min-height: auto; gap: 24px; }
  .locale-btn { margin-top: 0; }
  .app-footer__nav-row { flex-direction: row; gap: 24px; }
  .footer-contacts { flex-direction: column; height: auto; gap: 8px; }
  .footer-contacts__col:first-child,
  .footer-contacts__col:last-child { width: 100%; }
  .newsletter__form { flex-wrap: wrap; height: auto; }
}

@media (max-width: 580px) {
  .app-footer__inner {
    width: calc(100% - 40px);
  }

  .app-footer__main { width: 100%; }
  .app-footer__right { width: 100%; }

  .app-footer__nav-row {
    flex-direction: row;
    gap: 24px;
  }

  .footer-links,
  .footer-links:last-child {
    width: 100%;
    flex: 1 1 0;
  }

  .footer-contacts {
    width: 100%;
    flex-direction: column;
    gap: 8px;
  }

  .newsletter { width: 100%; }

  .newsletter__form {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    height: auto;
  }

  .newsletter__field-wrap,
  .newsletter__submit {
    width: 100%;
    flex: none;
    height: 48px;
  }

  .newsletter__text { width: 100%; }

  .footer-list a, .footer-contacts__item, .newsletter__title,
  .newsletter__input, .newsletter__submit, .locale-btn__label { font-size: 14px; }
  .footer-links__title { font-size: 14px; }
}

@media (max-width: 375px) {
  .app-footer__inner { width: calc(100% - 24px); }

  .locale-btn {
    width: 100%;
    max-width: 188px;
  }

  .footer-copy {
    text-align: left;
    justify-content: flex-start;
  }

  .footer-list a, .footer-contacts__item, .newsletter__title,
  .newsletter__input, .newsletter__submit, .locale-btn__label { font-size: 14px; }
  .footer-links__title { font-size: 14px; }
  .footer-brand__subtitle { font-size: 13px; }
  .newsletter__hint { font-size: 13px; }
}

@media (max-width: 320px) {
  .app-footer__inner { width: calc(100% - 16px); }
  .app-footer__main { padding-top: 16px; }

  .footer-list a,
  .footer-contacts__item {
    word-break: break-word;
  }

  .footer-list a, .footer-contacts__item, .newsletter__title,
  .newsletter__input, .newsletter__submit, .locale-btn__label { font-size: 13px; }
  .footer-links__title { font-size: 13px; }
  .footer-brand__subtitle, .newsletter__hint { font-size: 12px; }
  .footer-copy { font-size: 12px; line-height: 1.4; padding: 12px 0; }
  .locale-btn { height: 40px; max-width: 160px; }
  .newsletter__field-wrap, .newsletter__submit { height: 40px; }
  .footer-list { gap: 12px; }
}