/* MS-Baustatik 3.6.72: Desktop-Feinschliff fuer Ratgeber-Filter. */

/* Ratgeber Desktop: Obere vier Filter in einer Reihe belassen,
   den Einzel-Filter "Baugrund & Gruendung" darunter auf der Mittelachse platzieren. */
@media (min-width: 761px) {
  #main-content.site-main .ms-guide-hero .references-topic-filter .guide-filter {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
  }
  #main-content.site-main .ms-guide-hero .references-topic-filter .guide-filter__button[data-guide-topic="all"],
  #main-content.site-main .ms-guide-hero .references-topic-filter .guide-filter__button[data-guide-topic="planung"],
  #main-content.site-main .ms-guide-hero .references-topic-filter .guide-filter__button[data-guide-topic="umbau"],
  #main-content.site-main .ms-guide-hero .references-topic-filter .guide-filter__button[data-guide-topic="pruefung"] {
    grid-column: auto;
    width: 100%;
    margin-inline: 0;
    justify-self: stretch;
  }
  #main-content.site-main .ms-guide-hero .references-topic-filter .guide-filter__button[data-guide-topic="baugrund"] {
    grid-column: 2 / span 2;
    justify-self: center;
    width: min(100%, 420px);
    max-width: 100%;
    margin-inline: auto;
    text-align: center;
  }
}

/* Startseite: Projektbereiche-CTA in derselben Orange-Optik wie Hauptbuttons. */
body.home #main-content.site-main .home-projects > .container > a.button {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: #b84708 !important;
  border: 1px solid rgba(255, 163, 105, .65) !important;
  box-shadow: 0 8px 24px rgba(63, 25, 6, .2) !important;
}
body.home #main-content.site-main .home-projects > .container > a.button:hover,
body.home #main-content.site-main .home-projects > .container > a.button:focus-visible {
  background: #a33d06 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border-color: #ffad78 !important;
}

/* Kontakt: Auf Desktop und Mobil die linke Textkante der Karte verwenden. */
#main-content.site-main #kontakt .contact-details > .eyebrow,
#main-content.site-main #kontakt .contact-details > h2,
#main-content.site-main #kontakt .contact-details > p:first-of-type {
  width: 100%;
  max-width: none;
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
}


/* 3.6.73 – Ratgeber auf Mobilgeraeten: keine unleserlichen 4 Spalten.
   Vier Filter in zwei Spalten, der Baugrund-Filter allein und mittig. */
@media (max-width: 760px) {
  #main-content.site-main .ms-guide-hero .references-topic-filter .guide-filter {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    align-items: stretch;
  }
  #main-content.site-main .ms-guide-hero .references-topic-filter
  .guide-filter__button {
    grid-column: auto;
    justify-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
    min-height: 85px;
    margin: 0;
    padding: 11px 8px;
    gap: 7px;
    font-size: clamp(.8rem, 3.6vw, .93rem);
    font-weight: 700;
    line-height: 1.3;
    white-space: normal;
    overflow-wrap: break-word;
    text-align: center;
  }
  #main-content.site-main .ms-guide-hero .references-topic-filter
  .guide-filter__button > span {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    font-size: .75rem;
  }
  #main-content.site-main .ms-guide-hero .references-topic-filter
  .guide-filter__button[data-guide-topic="baugrund"] {
    grid-column: 1 / -1;
    justify-self: center;
    flex-direction: row;
    width: min(100%, 310px);
    min-height: 56px;
    margin-inline: auto;
    padding: 12px 16px;
    font-size: .88rem;
    gap: 9px;
  }
}