/* =========================================================
   Kontaktkarte (BEM)
   ========================================================= */

/* Base */
.kontaktkarte{
  box-sizing: border-box;
}

/* Kleine Typo-Korrektur in der Karte */
.kontaktkarte p.has-h-3-font-size{
  margin-top: -8px;
}

/* Pin-Icon (Bild) weiß einfärben */
.kontaktkarte .wp-block-image img{
  filter: brightness(0) invert(1);
}

/* Pin: figure-Default-Margins entfernen */
.kontaktkarte__pin figure{
  margin: 0;
}

/* Columns-Wrapper */
.kontaktkarte__cols{
  padding-top: var(--wp--preset--spacing--spacing-40);
  border-radius: 28px;
}

/* Desktop: 66/34 Spalten wirklich erzwingen */
.kontaktkarte .kontaktkarte__cols > .kontaktkarte__col-left{
  flex: 0 0 66% !important;  /* überschreibt WP/Gutenberg Columns-Flex */
}

.kontaktkarte .kontaktkarte__cols > .kontaktkarte__col-right{
  flex: 0 0 34% !important;
  padding: 0 0 var(--wp--preset--spacing--spacing-40) 0;
}

/* Header-Zeile: Pin + Headline nebeneinander */
.kontaktkarte .kontaktkarte__pin-headline.is-layout-flex{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 18px;
}

/* Pin-Box */
.kontaktkarte__pin{
  border-radius: 16px;
  padding: var(--wp--preset--spacing--spacing-8) var(--wp--preset--spacing--spacing-16);
}

/* Headline */
.kontaktkarte__title{
  margin: 0;
}

/* Rechte Spalte / Details */
.kontaktkarte .kontaktkarte__details{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start; /* Desktop: links */
  text-align: left;        /* Desktop: links */
}

/* Abstand vor Buttons */
.kontaktkarte__details .wp-block-buttons{
  margin-top: var(--wp--preset--spacing--spacing-40);
}

/* Button */
.kontaktkarte__btn{
  border-radius: 999px;
  padding: 14px 22px;
}

/* (Entfernt) .kontaktkarte__col-left/right flex-basis Regeln:
   Die sind redundant, weil oben flex: 0 0 xx% !important gesetzt ist. */


/* =========================================================
   Mobile
   ========================================================= */
@media (max-width: 781px){

  /* Ganzen Karteninhalt zentrieren */
  .kontaktkarte{
    text-align: center;
  }

  /* Columns untereinander */
  .kontaktkarte__cols{
    flex-direction: column;
    align-items: center;
  }

  /* Desktop 66/34 (mit !important) sauber aufheben */
  .kontaktkarte .kontaktkarte__cols > .kontaktkarte__col-left,
  .kontaktkarte .kontaktkarte__cols > .kontaktkarte__col-right{
    flex: 0 0 auto !important;
    width: 100%;
    padding-bottom: 0;
  }

  /* Details wirklich zentrieren */
  .kontaktkarte .kontaktkarte__details{
    margin-top: 2em;
    align-items: center;
    text-align: center;
  }

  /* Pin + Headline in zwei Zeilen */
  .kontaktkarte .kontaktkarte__pin-headline.is-layout-flex{
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  /* Button mittig */
  .kontaktkarte__btn{
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 1346px){
  .kontaktkarte{
    padding: 0 var(--wp--preset--spacing--spacing-32);
  }
}