/*
 * Multicity quality fixes 2026-08-28.
 * Kept in a separate file so the existing large stylesheet remains untouched.
 */
:root {
  --orange: #b24b16;
  --mail: #256d8b;
  --line: #0b7543;
}

.hero .hero-visual picture,
.hero .hero-mobile-main-image picture {
  display: block;
  width: 100%;
}

.cta,
.mini-btn,
.mobile-fixed-cta a {
  color: #fff !important;
}

#main a.cta.cta-tel,
body a.cta.cta-tel,
body .emergency-card > a {
  background: linear-gradient(135deg, #b64a16, #8f320b) !important;
}

#main a.cta.cta-mail,
body a.cta.cta-mail {
  background: linear-gradient(135deg, #256d8b, #1b5471) !important;
}

#main a.cta.cta-line,
body a.cta.cta-line {
  background: linear-gradient(135deg, #0b7543, #075c37) !important;
}

.mini-btn.mini-tel,
.mobile-fixed-cta .m-tel,
.fixed-bottom-cta .fixed-tel {
  background: #8f320b !important;
}

.mini-btn.mini-mail,
.mobile-fixed-cta .m-mail,
.fixed-bottom-cta .fixed-mail {
  background: #1b5471 !important;
}

.mini-btn.mini-line,
.mobile-fixed-cta .m-line,
.fixed-bottom-cta .fixed-line {
  background: #075c37 !important;
}

.cta:focus-visible,
.mini-btn:focus-visible,
.mobile-fixed-cta a:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

@media (max-width: 520px) {
  .hero h1 {
    word-break: normal !important;
    overflow-wrap: anywhere;
  }

  .hero-line-nowrap {
    white-space: normal !important;
  }
}