/* user.css - Version 6.44
   - v6.44 (2026-10-20): Handy und Tablet (bis 991.98px): column-gap 0
     im .site-grid, damit der Inhalt die volle Breite nutzt (vorher gingen
     5 Spaltenabstände zu je 1em = 80px verloren und der Inhalt saß
     16px zu weit rechts). Sonst keine Änderungen.
   - v6.43 (2026-10-02): Alles eckig (Variante 1a, ohne Schatten).
     border-radius 0 bei: A-/A/A+, DE/EN, "Karte laden", Popup-x,
     Karten-Platzhalter (.map-consent), Popup-Kasten, Menü-Button am
     Handy (Button und ::after-Rahmen). Neuer Abschnitt am Ende:
     Kontaktformular eckig (.form-control, .form-select,
     .form-check-input), Captcha (altcha, Variable
     --altcha-border-radius), Zurück-nach-oben-Button (#back-top) und
     alle .btn. "E-Mail senden" (#contact-form .btn, Joomla-Klassen
     btn btn-primary validate) im Stil der übrigen Buttons:
     transparent, Rahmen 1px #b0aeae, Schrift #494646, Arial 0.875rem,
     Innenabstand 6px 16px, Hover #d7d5d5 / #656565 / #000000.
     Unverändert: runder Punkt unter dem Menü, Galerie-Fotos (4px),
     loader.css (v2.2, Import bleibt ?v=22), user.js v1.12.
     Basis: Joomla 6.1.4.
   - v6.42 (2026-10-02): Sprachumschalter im Stil der A-/A/A+-Buttons
     (Variante 1a, große Form): zwei einzelne Buttons, Schrift 12px
     (A-Buttons: 13px), normale Schriftstärke, Buchstabenabstand 0.5px,
     Rahmen 1px #b0aeae, Rundung 3px, Höhe wie die A-Buttons
     (line-height 18.2px, Innenabstand 2px 10px). Aktive Sprache:
     Hintergrund #d7d5d5, Rahmen #656565, Schrift #000000. Hover wie bei
     den A-Buttons. Trennstrich "|" und weißer Kasten entfernt.
   - v6.41 (2026-10-01): Zusammenführung der beiden Zweige. Basis ist die
     user.css 6.36 mit dem Karten-Styling (.map-consent). Dazu kommen:
     Menü-Button am Handy (.navbar-toggler dunkel #494646, Rahmen als
     ::after 2px, Hover/Aktiv #d7d5d5) und Sprachumschalter links in der
     Menüzeile (.container-language-switcher, Modulposition
     "language-switcher"). Umzug ins Child-Template
     cassiopeia_quartier26_2026. Passend zu user.js v1.12, index.php v1.2.
   - v6.36 (2026-10-01): Neuer Abschnitt am Ende - Google-Karte in
     .links-anzeigen wird erst nach Klick geladen (Platzhalter
     .map-consent, Button .map-consent-btn). Passend zu user.js v1.9
     und höher (aktuell v1.11). Sonst keine Änderungen.
   - v6.35 (2026-10-01): @import auf loader.css?v=22 (neue loader.css v2.2,
     Ladebalken-Ablauf überarbeitet). Sonst keine Änderungen. */
@import url('loader.css?v=22');

html {
  scrollbar-gutter: stable !important;
}

.header.container-header {
  background-color: #E6E5E5 !important;
  background-image: none !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  z-index: 999 !important;
  border-bottom: 1px solid #000000 !important;
  padding: 0 !important;
  margin: 0 !important;
}

body {
  padding-top: 140px !important; 
  background-color: #E6E5E5;
}

:root {
  --template-bg-light: #E6E5E5;
}

.site-grid, 
.container-component, 
.com-content-article, 
main,
.com-content-article__body {
  background-color: #E6E5E5 !important;
}

.com-content-article__body a,
main .com-content-article__body a {
  color: #5680c8 !important; 
  text-decoration: underline !important;
  font-weight: bold !important;
}

.com-content-article__body a:hover,
main .com-content-article__body a:hover {
  color: #3b5fa3 !important;
}

.site-grid {
  grid-template-columns: 1fr minmax(0, 1200px) 1fr !important;
  max-width: 100% !important;
  padding-left: 20px;
  padding-right: 20px;
}

.grid-child.container-component {
  grid-column: 2 / span 1 !important;
}

/* v6.44: Handy und Tablet: kein Spaltenabstand. Cassiopeia legt 6 Spalten
   an, hier werden nur 3 genutzt; die 5 Abstände zu je 1em würden sonst
   80px Breite wegnehmen und den Inhalt nach rechts schieben. */
@media (max-width: 991.98px) {
  .site-grid {
    column-gap: 0 !important;
  }
}

@media (min-width: 992px) {
  .com-content-article__body,
  .com-contact.contact {
    position: relative !important;
    display: block !important;
    padding-left: 48% !important;
  }

  .links-anzeigen {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 42% !important;
  }
}

details {
  background-color: transparent !important;
  margin-bottom: 4px !important;
  border-radius: 0px !important;
  border: none !important;
  box-shadow: none !important;
}

details summary {
  padding: 12px 20px !important;
  font-weight: 500 !important;
  font-size: 1rem !important;
  cursor: pointer !important;
  color: #333333 !important;
  list-style: none;
  background-color: #d7d5d5 !important;
  background: #d7d5d5 !important;
  border-bottom: 1px solid #656565 !important;
}

summary::-webkit-details-marker {
  display: none;
}

.com-content-article__body details summary span,
details summary span,
details summary i {
  background: #d7d5d5 !important;
  background-color: #d7d5d5 !important;
}

.com-content-article__body details[open] div,
.com-content-article__body details[open] p,
.com-content-article__body details[open] span:not([style*="font-size: 1.2rem"]), 
.com-content-article__body details[open] blockquote,
details[open] div,
details[open] p,
details[open] span {
  background-color: #efeeee !important; 
  background: #efeeee !important;
  box-shadow: none !important;
}

details[open] > div {
  padding: 20px !important;
  border-bottom: 1px solid #656565 !important; 
}

.header.container-header > .grid-child:not(.container-nav) {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  padding-top: 10px !important;
  padding-bottom: 6px !important;
  margin: 0 !important;
}

.header.container-header .navbar-brand {
  text-align: center;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

.header.container-header .brand-logo,
.header.container-header .brand-logo span,
.header.container-header a.brand-logo {
  color: #1a1a1a !important;
  text-decoration: none !important;
  border: none !important;
  box-shadow: none !important;
}

.header.container-header .brand-logo span {
  letter-spacing: 0.35em;
  font-weight: 400;
  text-transform: lowercase;
}

.header.container-header > .grid-child.container-nav {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important; 
  border-top: 1px solid #000000 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
  position: relative !important;
}

.header.container-header nav.navbar,
.header.container-header .navbar-collapse,
.header.container-header .container-nav {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  min-height: unset !important;
}

.header.container-header nav.navbar {
  position: relative !important;
}

@media (max-width: 991.98px) {
  .header.container-header nav.navbar {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
}

.header.container-header .mod-menu.mod-menu_dropdown-metismenu .metismenu-item > a,
.header.container-header nav .metismenu-item > a {
  color: #494646 !important;
  font-family: Arial, 'Arial Unicode MS', Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400 !important;
  letter-spacing: 1.5px !important;
  text-shadow: none !important;
  text-decoration: none !important; 
  border-bottom: none !important;    
  padding: 2px 15px !important;
  line-height: 1 !important;
}

.header.container-header .mod-menu.mod-menu_dropdown-metismenu .metismenu-item > a:hover,
.header.container-header .mod-menu.mod-menu_dropdown-metismenu .metismenu-item.active > a,
.header.container-header .mod-menu.mod-menu_dropdown-metismenu .metismenu-item.current > a,
.header.container-header nav .metismenu-item.active > a,
.header.container-header nav .metismenu-item.current > a,
.header.container-header nav a[aria-current="page"] {
  color: #000000 !important;
  font-weight: 400 !important;
  letter-spacing: 1.5px !important;
  text-shadow: 0.2px 0 0 currentColor, -0.2px 0 0 currentColor !important;
  text-decoration: none !important; 
  border-bottom: none !important;    
  box-shadow: none !important;
}

.header.container-header nav .metismenu-item a::after,
.header.container-header nav .metismenu-item a::before,
.header.container-header nav .metismenu-item::after,
.header.container-header nav .metismenu-item::before,
.header.container-header .mod-menu .metismenu-item a::after {
  display: none !important;
  content: none !important;
  border: none !important;
}

.header.container-header .mod-menu.mod-menu_dropdown-metismenu ul.metismenu,
.header.container-header nav ul.metismenu {
  margin: 0 !important;
  padding: 0 !important;
}

.header.container-header .mod-menu.mod-menu_dropdown-metismenu .metismenu-item,
.header.container-header nav .metismenu-item {
  margin: 0 !important;
}

/* v6.41: Menü-Button am Handy (Cassiopeia-Standardbutton).
   Cassiopeia färbt Symbol und Rahmen weiß (für den dunkelblauen
   Standard-Header) - hier auf hellgrauem Header daher dunkel (#494646).
   Der sichtbare Rahmen wird per ::after gezeichnet: 2px dick, 1px
   weiter innen als der Button-Rand. Der Button selbst behält einen
   transparenten 1px-Rand, damit sich seine Größe nicht ändert.
   v6.43: Button und Rahmen eckig (border-radius 0). */
.header.container-header .navbar-toggler,
.header.container-header .navbar-toggler .icon-menu {
  color: #494646 !important;
}

.header.container-header .navbar-toggler {
  position: relative !important;
  background-color: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 0 !important;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.header.container-header .navbar-toggler::after {
  content: "" !important;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  box-sizing: border-box;
  border: 2px solid #494646;
  border-radius: 0;
  pointer-events: none;
  transition: border-color 0.2s ease;
}

.header.container-header .navbar-toggler:hover,
.header.container-header .navbar-toggler:active,
.header.container-header .navbar-toggler[aria-expanded="true"] {
  background-color: #d7d5d5 !important;
}

.header.container-header .navbar-toggler:hover::after,
.header.container-header .navbar-toggler:active::after,
.header.container-header .navbar-toggler[aria-expanded="true"]::after {
  border-color: #000000;
}

.header.container-header .navbar-toggler:hover,
.header.container-header .navbar-toggler:hover .icon-menu,
.header.container-header .navbar-toggler:active,
.header.container-header .navbar-toggler:active .icon-menu,
.header.container-header .navbar-toggler[aria-expanded="true"],
.header.container-header .navbar-toggler[aria-expanded="true"] .icon-menu {
  color: #000000 !important;
}

.header.container-header .navbar-toggler:focus {
  box-shadow: none !important;
}

.header.container-header .navbar-toggler:focus-visible {
  box-shadow: 0 0 0 var(--navbar-toggler-focus-width, 0.25rem) !important;
}

.font-size-controls {
  position: absolute;
  top: 0;
  right: 20px;
  height: 30.8px;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 1001;
}

@media (min-width: 992px) {
  .font-size-controls {
    top: 0;
    bottom: 0;
    height: auto;
  }
}

.font-size-controls .font-size-btn {
  font-family: Arial, 'Arial Unicode MS', Helvetica, sans-serif;
  font-size: 13px;
  letter-spacing: 0.5px;
  color: #494646;
  background-color: transparent;
  border: 1px solid #b0aeae;
  border-radius: 0;
  padding: 2px 8px;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.font-size-controls .font-size-btn:hover {
  background-color: #d7d5d5;
  color: #000000;
  border-color: #656565;
}

/* v6.42: Sprachumschalter links in der Menüzeile, im Stil der
   A-/A/A+-Buttons (Spiegelbild zu .font-size-controls rechts).
   Markup laut Inspektor: div.mod-languages > ul.mod-languages__list.
   lang-inline > li(.lang-active) > a[aria-current="true"].
   Schrift 12px (A-Buttons: 13px), normale Stärke. Rahmenhöhe wie bei
   den A-Buttons (line-height 18.2px + 2x2px Innenabstand + 2x1px
   Rahmen = 24.2px). Aktive Sprache: Hintergrund #d7d5d5, Rahmen
   #656565, Schrift #000000. Kein Trennstrich, kein weißer Kasten.
   v6.43: eckig (border-radius 0). */
.container-language-switcher {
  position: absolute;
  top: 0;
  left: 20px;
  height: 30.8px;
  display: flex;
  align-items: center;
  z-index: 1001;
}

@media (min-width: 992px) {
  .container-language-switcher {
    top: 0;
    bottom: 0;
    height: auto;
  }
}

.container-language-switcher .mod-languages ul.lang-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.container-language-switcher .mod-languages ul.lang-inline li,
.container-language-switcher .mod-languages ul.lang-inline li.lang-active {
  display: flex;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

.container-language-switcher .mod-languages ul.lang-inline li + li::before {
  content: none !important;
  display: none !important;
}

.container-language-switcher .mod-languages a {
  display: inline-block;
  font-family: Arial, 'Arial Unicode MS', Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.5px;
  line-height: 18.2px;
  color: #494646;
  text-decoration: none;
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid #b0aeae;
  border-radius: 0;
  padding: 2px 10px !important;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.container-language-switcher .mod-languages a:hover {
  background-color: #d7d5d5 !important;
  color: #000000;
  border-color: #656565;
}

.container-language-switcher .mod-languages li.lang-active a,
.container-language-switcher .mod-languages a[aria-current="true"] {
  background-color: #d7d5d5 !important;
  color: #000000;
  font-weight: 400;
  border-color: #656565;
}

#nav-indicator {
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 6px;
  height: 6px;
  background-color: #000000;
  border-radius: 50%;
  pointer-events: none;
  transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1),
              background-color 0.3s ease,
              opacity 0.3s ease;
  transform: translateX(0px) scale(0);
  opacity: 0;
  z-index: 1000;
}

#nav-indicator.visible {
  opacity: 1;
  transform: translateX(0px) scale(1);
}

@media (max-width: 991.98px) {
  #nav-indicator {
    display: none !important;
  }
}

.com-content-article__body h1 {
  font-family: Arial, 'Arial Unicode MS', Helvetica, sans-serif !important;
  font-size: 1.1875rem !important;
  letter-spacing: 2px !important;
  font-weight: 400 !important;
  text-shadow: 0.2px 0 0 currentColor, -0.2px 0 0 currentColor !important;
  color: #000000 !important;
  margin-bottom: 20px !important;
}

.com-content-article__body h2 {
  font-family: Arial, 'Arial Unicode MS', Helvetica, sans-serif !important;
  font-size: 1.0625rem !important;
  font-weight: 400 !important;
  letter-spacing: 1px !important;
  text-shadow: 0.2px 0 0 currentColor, -0.2px 0 0 currentColor !important;
  color: #000000 !important;
  margin: 25px 0 10px 0 !important;
}

.com-content-article__body h3 {
  font-family: Arial, 'Arial Unicode MS', Helvetica, sans-serif !important;
  font-size: 1rem !important;
  font-weight: bold !important;
  color: #000000 !important;
  margin: 20px 0 8px 0 !important;
}

.com-content-article__body p,
.com-content-article__body li {
  font-family: Arial, 'Arial Unicode MS', Helvetica, sans-serif !important;
  font-size: 1rem !important;
  margin-bottom: 15px !important;
}

.com-content-article__body ul {
  margin: 0 0 20px 0 !important;
  padding-left: 20px !important;
}

.com-content-article__body ul li {
  margin-bottom: 5px !important;
}

.galleria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  margin: 20px 0;
}

.galleria a {
  display: block;
  overflow: hidden;
  border-radius: 4px;
  aspect-ratio: 4 / 3;
  text-decoration: none !important;
}

.galleria a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.com-contact__container {
  background-color: #efeeee !important;
  padding: 20px !important;
  margin-bottom: 20px !important;
}

.com-contact__container > h1 {
  font-family: Arial, 'Arial Unicode MS', Helvetica, sans-serif !important;
  font-weight: 500 !important;
  font-size: 1.1875rem !important;
  color: #333333 !important;
  background-color: #d7d5d5 !important;
  padding: 12px 20px !important;
  margin: -20px -20px 20px -20px !important;
  grid-column: 1 / -1 !important;
  border-bottom: 1px solid #656565 !important;
}

.com-contact__email-form-heading {
  font-weight: 500 !important;
  font-size: 1.1875rem !important;
  color: #333333 !important;
  background-color: #d7d5d5 !important;
  padding: 12px 20px !important;
  margin: 20px 0 0 0 !important;
  border-bottom: 1px solid #656565 !important;
}

.com-contact__form.contact-form {
  background-color: #efeeee !important;
  padding: 20px !important;
  margin: 0 0 20px 0 !important;
}

.com-contact__miscinfo-heading {
  display: none !important;
}

.com-contact__miscinfo dt {
  display: none !important;
}

.com-contact__miscinfo {
  margin-top: 20px !important;
}

/* v6.43: Captcha (altcha) eckig. Der Hersteller gibt die Rundung über
   die CSS-Variable --altcha-border-radius vor (Standard 3px). */
altcha-widget {
  margin-top: 8px !important;
  display: inline-block !important;
  --altcha-border-radius: 0;
}

.footer.container-footer.full-width {
  background-color: transparent !important;
  background-image: none !important;
  border-top: 1px solid #000000 !important;
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

.footer.container-footer .grid-child {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
}

.footer.container-footer .mod-menu {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 24px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.footer.container-footer .mod-menu .nav-item {
  display: inline-block !important;
  margin: 0 !important;
}

.footer.container-footer .mod-menu .nav-item > a {
  color: #494646 !important;
  font-family: Arial, 'Arial Unicode MS', Helvetica, sans-serif !important;
  font-size: 14px !important;
  letter-spacing: 1px !important;
  text-decoration: none !important;
}

.footer.container-footer .mod-menu .nav-item > a:hover {
  color: #000000 !important;
}

/* v6.34: Popup für die Kontaktformular-Erfolgsmeldung
   (siehe user.js Abschnitt 7). Overlay deckt den ganzen Bildschirm
   ab, Modal in der Mitte im gleichen Stil wie die restigen Boxen
   der Seite (helles Grau #efeeee, schwarzer 1px-Rahmen).
   v6.43: Modal und Schließen-Button eckig (border-radius 0). */
.contact-success-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.contact-success-modal {
  position: relative;
  background-color: #efeeee;
  border: 1px solid #000000;
  border-radius: 0;
  padding: 40px 48px;
  max-width: 480px;
  width: calc(100% - 40px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  text-align: center;
}

.contact-success-text {
  font-family: Arial, 'Arial Unicode MS', Helvetica, sans-serif;
  font-size: 1rem;
  color: #000000;
  margin: 0;
}

.contact-success-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border: 1px solid #b0aeae;
  border-radius: 0;
  background-color: transparent;
  color: #494646;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.contact-success-close:hover {
  background-color: #d7d5d5;
  color: #000000;
  border-color: #656565;
}

/* v6.36: Google-Karte in .links-anzeigen (siehe user.js Abschnitt 8).
   Der iframe im Beitrag hat nur data-src und bleibt unsichtbar, bis
   per Klick der src gesetzt wird. Bis dahin zeigt user.js den
   Platzhalter .map-consent.
   v6.43: Platzhalter und Button eckig (border-radius 0). */
.links-anzeigen iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  border: 0;
}

.links-anzeigen iframe[data-src]:not([src]) {
  display: none;
}

.map-consent {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 250px;
  padding: 24px;
  background-color: #efeeee;
  border: 1px solid #000000;
  border-radius: 0;
  text-align: center;
}

.com-content-article__body .map-consent .map-consent-text {
  font-family: Arial, 'Arial Unicode MS', Helvetica, sans-serif !important;
  font-size: 0.875rem !important;
  line-height: 1.5;
  color: #000000;
  margin: 0 !important;
}

.map-consent .map-consent-btn {
  font-family: Arial, 'Arial Unicode MS', Helvetica, sans-serif;
  font-size: 0.875rem;
  letter-spacing: 0.5px;
  color: #494646;
  background-color: transparent;
  border: 1px solid #b0aeae;
  border-radius: 0;
  padding: 6px 16px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.map-consent .map-consent-btn:hover {
  background-color: #d7d5d5;
  color: #000000;
  border-color: #656565;
}

/* v6.43: Kontaktformular und Joomla-Standardelemente eckig.
   Die Rundung kommt von Joomla 6.1.4 / Bootstrap 5.3, nicht aus
   dieser Datei. */
.form-control,
.form-select,
.form-check-input,
.com-contact__form input[type="text"],
.com-contact__form input[type="email"],
.com-contact__form textarea,
.com-contact__form select {
  border-radius: 0 !important;
}

.btn {
  border-radius: 0 !important;
}

/* v6.43: Zurück-nach-oben-Button unten rechts */
#back-top,
.back-to-top-link {
  border-radius: 0 !important;
}

/* v6.43: Button "E-Mail senden" im Stil der übrigen Buttons.
   Markup laut Inspektor: form#contact-form > div.control-group >
   div.controls > button.btn.btn-primary.validate[type="submit"].
   Die ID im Selektor sorgt dafür, dass Cassiopeia/Bootstrap
   (.btn-primary und dessen :hover/:active/:focus) überschrieben wird. */
#contact-form .btn,
#contact-form .btn-primary,
#contact-form button.validate {
  font-family: Arial, 'Arial Unicode MS', Helvetica, sans-serif !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.5px !important;
  color: #494646 !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 1px solid #b0aeae !important;
  border-radius: 0 !important;
  padding: 6px 16px !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

#contact-form .btn:hover,
#contact-form .btn:active,
#contact-form .btn-primary:hover,
#contact-form .btn-primary:active,
#contact-form button.validate:hover,
#contact-form button.validate:active {
  color: #000000 !important;
  background-color: #d7d5d5 !important;
  border-color: #656565 !important;
}

#contact-form .btn:focus-visible,
#contact-form .btn-primary:focus-visible,
#contact-form button.validate:focus-visible {
  outline: 2px solid #494646 !important;
  outline-offset: 2px;
}