:root {
  --gecko-button-ink: #231f1f;
  --gecko-button-white: #fff;
  --gecko-button-white-hover: #f3f3f1;
}

/*
 * Gemeinsame CTA-Basis nach dem Vorbild der KFZ-Seite.
 * Bedienelemente wie Filter, Slider, FAQ und Schritt-Navigation bleiben bewusst
 * bei ihren jeweiligen Komponenten.
 */
body :is(
  .header-btn-primary,
  .cta-beratung,
  .cta-call,
  .glass-btn,
  .hero-cta,
  .btn-outline,
  .more-btn,
  .ct-btn,
  .srv-link,
  .gk-cta,
  .wb-btn,
  .btn-primary1,
  .hs-btn,
  .ah-property-entry__button,
  .valuation-generator__success-link,
  .campaign-btn,
  .care-btn,
  .zz-btn,
  .kfz-btn,
  .home-preview-button,
  .ad-button,
  .ck-btn,
  .booking-widget__submit,
  .booking-widget__ghost,
  .eac-ctas .btn,
  .lead-form .btn-primary,
  #exposeForm .btn-primary
) {
  box-sizing: border-box;
  min-height: 48px !important;
  height: auto;
  padding: 0 24px !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-radius: 999px !important;
  font-family: "Noto Sans Extra Condensed", "Noto Sans", Arial, sans-serif !important;
  font-size: .95rem !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  gap: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease !important;
}

body :is(
  .header-btn-primary,
  .cta-beratung,
  .cta-call,
  .glass-btn,
  .hero-cta,
  .btn-outline,
  .more-btn,
  .ct-btn,
  .srv-link,
  .gk-cta,
  .wb-btn,
  .btn-primary1,
  .hs-btn,
  .ah-property-entry__button,
  .valuation-generator__success-link,
  .campaign-btn,
  .care-btn,
  .zz-btn,
  .kfz-btn,
  .home-preview-button,
  .ad-button,
  .ck-btn,
  .booking-widget__submit,
  .booking-widget__ghost,
  .eac-ctas .btn,
  .lead-form .btn-primary,
  #exposeForm .btn-primary
):hover {
  transform: translateY(-1px) !important;
  box-shadow: none !important;
}

body :is(
  .header-btn-primary,
  .cta-beratung,
  .cta-call,
  .glass-btn,
  .hero-cta,
  .btn-outline,
  .more-btn,
  .ct-btn,
  .srv-link,
  .gk-cta,
  .wb-btn,
  .btn-primary1,
  .hs-btn,
  .ah-property-entry__button,
  .valuation-generator__success-link,
  .campaign-btn,
  .care-btn,
  .zz-btn,
  .kfz-btn,
  .home-preview-button,
  .ad-button,
  .ck-btn,
  .booking-widget__submit,
  .booking-widget__ghost,
  .eac-ctas .btn,
  .lead-form .btn-primary,
  #exposeForm .btn-primary
):focus-visible {
  outline: 2px solid var(--gecko-button-ink) !important;
  outline-offset: 3px !important;
}

/* Schwarz auf hellen Flächen. */
body :is(
  .cta-beratung,
  .hero-cta,
  .btn-outline,
  .more-btn,
  .srv-link,
  .gk-cta,
  .wb-btn,
  .btn-primary1,
  .valuation-generator__success-link,
  .campaign-btn--primary,
  .care-btn--primary,
  .zz-btn--dark,
  .kfz-btn--primary,
  .home-preview-button--primary,
  .ad-button,
  .ck-accept,
  .booking-widget__submit,
  .lead-form .btn-primary,
  #exposeForm .btn-primary
) {
  border-color: var(--gecko-button-ink) !important;
  background: var(--gecko-button-ink) !important;
  color: var(--gecko-button-white) !important;
}

body :is(
  .cta-beratung,
  .hero-cta,
  .btn-outline,
  .more-btn,
  .srv-link,
  .gk-cta,
  .wb-btn,
  .btn-primary1,
  .valuation-generator__success-link,
  .campaign-btn--primary,
  .care-btn--primary,
  .zz-btn--dark,
  .kfz-btn--primary,
  .home-preview-button--primary,
  .ad-button,
  .ck-accept,
  .booking-widget__submit,
  .lead-form .btn-primary,
  #exposeForm .btn-primary
):hover {
  border-color: #000 !important;
  background: #000 !important;
  color: var(--gecko-button-white) !important;
}

/* Weiß als zweite Aktion oder auf dunklen Bild- und Farbflächen. */
body :is(
  .cta-call,
  .about-hero .glass-btn,
  .en-hero .hero-cta,
  .alt-card--color .btn-primary1,
  .hs-feature .hs-btn,
  .ah-property-entry__button,
  .campaign-btn--secondary,
  .care-btn--secondary,
  .zz-btn--light,
  .kfz-btn--secondary,
  .home-preview-button--secondary,
  .ck-btn:not(.ck-accept),
  .booking-widget__ghost,
  .eac-ctas .btn.light
) {
  border-color: var(--gecko-button-ink) !important;
  background: var(--gecko-button-white) !important;
  color: var(--gecko-button-ink) !important;
}

body :is(
  .cta-call,
  .about-hero .glass-btn,
  .en-hero .hero-cta,
  .alt-card--color .btn-primary1,
  .hs-feature .hs-btn,
  .ah-property-entry__button,
  .campaign-btn--secondary,
  .care-btn--secondary,
  .zz-btn--light,
  .kfz-btn--secondary,
  .home-preview-button--secondary,
  .ck-btn:not(.ck-accept),
  .booking-widget__ghost,
  .eac-ctas .btn.light
):hover {
  border-color: var(--gecko-button-ink) !important;
  background: var(--gecko-button-white-hover) !important;
  color: var(--gecko-button-ink) !important;
}

/*
 * Kontaktkarten greifen ihre beiden Farben wieder direkt auf:
 * Buttonfläche = Schriftfarbe der Karte, Buttontext = Kartenfläche.
 */
body .contact-teaser--overlay .ct-panel {
  --gecko-contact-panel-bg: var(--ct-bg, #b1d7d6);
  --gecko-contact-panel-ink: var(--ct-ink, #1f6e6a);
}

body.energie-page .contact-teaser--overlay .ct-panel {
  --gecko-contact-panel-bg: var(--ct-bg, #242424);
  --gecko-contact-panel-ink: var(--ct-ink, #909090);
}

body .contact-teaser--overlay .ct-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-color: var(--gecko-contact-panel-ink) !important;
  background: var(--gecko-contact-panel-ink) !important;
  color: var(--gecko-contact-panel-bg) !important;
}

body .contact-teaser--overlay .ct-btn:hover {
  border-color: color-mix(in srgb, var(--gecko-contact-panel-ink) 88%, #000) !important;
  background: color-mix(in srgb, var(--gecko-contact-panel-ink) 88%, #000) !important;
  color: var(--gecko-contact-panel-bg) !important;
}

/* Die Angebots-Teaser verwenden auf Start- und Immobilienseite dieselbe Zentrierung. */
body .estate-teaser .more-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle;
}

/* Ältere Link-Buttons mit fester Mindesthöhe brauchen eine echte Zentrierung. */
body :is(.services-alt .srv-link, .hs-feature .hs-btn) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle;
}

/* Bildheros nutzen eine weiße Hauptaktion; die zweite bleibt nur konturiert. */
body .campaign-hero .campaign-btn--primary,
body .zz-hero .zz-btn--light {
  border-color: var(--gecko-button-white) !important;
  background: var(--gecko-button-white) !important;
  color: var(--gecko-button-ink) !important;
}

body .campaign-hero .campaign-btn--primary:hover,
body .zz-hero .zz-btn--light:hover {
  border-color: var(--gecko-button-white-hover) !important;
  background: var(--gecko-button-white-hover) !important;
  color: var(--gecko-button-ink) !important;
}

body .zz-hero .zz-btn--ghost {
  border-color: rgba(255, 255, 255, .72) !important;
  background: transparent !important;
  color: var(--gecko-button-white) !important;
}

body .zz-hero .zz-btn--ghost:hover {
  border-color: var(--gecko-button-white) !important;
  background: rgba(255, 255, 255, .1) !important;
  color: var(--gecko-button-white) !important;
}

body .eac-ctas .btn.dark {
  border-color: var(--gecko-button-ink) !important;
  background: var(--gecko-button-ink) !important;
  color: var(--gecko-button-white) !important;
}

/* Der Header wechselt mit seinem Hintergrund zwischen Weiß und Schwarz. */
body .site-header:not(.scrolled) .header-btn-primary {
  border-color: var(--gecko-button-white) !important;
  background: var(--gecko-button-white) !important;
  color: var(--gecko-button-ink) !important;
  backdrop-filter: none !important;
}

body .site-header.scrolled .header-btn-primary {
  border-color: var(--gecko-button-ink) !important;
  background: var(--gecko-button-ink) !important;
  color: var(--gecko-button-white) !important;
}

/* Keine animierten oder diagonalen Pfeile in CTA-Schaltflächen. */
body :is(.cta-arrow, .btn-arrow) {
  display: none !important;
}

@media (max-width: 640px) {
  body :is(
    .cta-beratung,
    .cta-call,
    .glass-btn,
    .hero-cta,
    .btn-outline,
    .more-btn,
    .ct-btn,
    .srv-link,
    .gk-cta,
    .wb-btn,
    .btn-primary1,
    .hs-btn,
    .campaign-btn,
    .care-btn,
    .zz-btn,
    .kfz-btn,
    .home-preview-button
  ) {
    min-height: 48px !important;
    padding-inline: 22px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body :is(
    .header-btn-primary,
    .cta-beratung,
    .cta-call,
    .glass-btn,
    .hero-cta,
    .btn-outline,
    .more-btn,
    .ct-btn,
    .srv-link,
    .gk-cta,
    .wb-btn,
    .btn-primary1,
    .hs-btn,
    .ah-property-entry__button,
    .valuation-generator__success-link,
    .campaign-btn,
    .care-btn,
    .zz-btn,
    .kfz-btn,
    .home-preview-button
  ) {
    transition: none !important;
  }
}