/* Force ALL pimcore_area_col4 images into 3:2 boxes */
.pimcore_area_col4 .pimcore_area_image { position: relative; width: 100%; overflow: hidden; }
.pimcore_area_col4 .pimcore_area_image::before { content: ""; display: block; padding-top: 66.666%; }
.pimcore_area_col4 .pimcore_area_image > img {
  position: absolute !important;
  top: 0; left: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  display: block;
}

/* Slogan under the logo (if you use the top-row version) */
.slogan {
  margin-top: 40px;     /* consistent gap below logo */
  margin-bottom: 0;
  font-size: clamp(0.9rem, 2.3vw, 1.2rem);
  font-weight: 600;
  text-align: center;
  letter-spacing: 1px;
  color: #1d3c6a;
  line-height: 1.3;
}


/*ADDED AFTER NEW LOGO*/


/* Keep default Bootstrap stacking on small screens */
.kontakt-map { row-gap: 2rem; }

/* Smaller contact text + tidy spacing */
.contact-text,
.contact-text * {
  font-size: 0.85rem !important;
  line-height: 1.4 !important;
}

/* Keep the contact title slightly bigger */
.contact-title {
  font-size: 1rem !important;
  font-weight: 700;
  margin: 0.25rem 0 0.5rem;
}


/* Small pin above each contact */
.contact-pin {
  display: block;
  width: 34px;          /* adjust as needed */
  height: auto;
  margin: 0 0 0.25rem 0; /* small gap below the pin */
}


.contact-pin-b {
  display: block;
  width: 120px;          /* adjust as needed */
  height: auto;
  margin: 0 0 0.25rem 0; /* small gap below the pin */
}


/* Enforce exact 30/70 on lg+ and prevent wrapping */
@media (min-width: 992px) {
  .kontakt-map {
    display: flex !important;
    flex-wrap: nowrap;
    column-gap: 2rem;
    align-items: flex-start;
  }
  .kontakt-map .kontakt {
    flex: 0 0 30%;
    max-width: 30%;


  }
  .kontakt-map .map {
    flex: 0 0 70%;
    max-width: 70%;
  }
  .map-figure {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    width: 100%;


  }
  .map-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
  }
  
  .icon {
  width: 16px;      /* smaller if you want */
  height: auto;
  margin-right: 6px;
  vertical-align: middle; /* keeps it aligned with text */
}




/* tighten text spacing */
.footer p { margin: 0; line-height: 1.5; }



/* Legal links – work on all sizes (esp. mobile) */
.legal-notes{
  display:flex !important;
  flex-wrap:wrap !important;          /* allow wrapping */
  justify-content:center !important;
  align-items:center;
  width:100%;
  gap:.5rem 1rem;                      /* space between items */
}

/* Fallback spacing if gap not supported */
@supports not (gap: 1rem){
  .legal-notes > *{ margin:0 .75rem .5rem; }
}

/* Each item (Impressum / AGB / Datenschutz) */
.legal-notes > *{ display:inline-flex; }
.legal-notes .legal-link{ white-space:nowrap; }  /* keep each label intact */




/* optional divider */
.footer .blue-divider {
  border: 0;
  border-top: 1px solid grey;
  opacity: 0.5;
  margin: 16px 0 0 0;
}





/*Footer*/
.footer .top-row { align-items: flex-start; }

/*FOOTER*/
/* PC size */
#footerBrand {
  height: 120px;
  width: auto;
  display: block;
  margin: 0 auto;
}





/* Target the container divs directly inside .legal-notes */
.legal-notes > .Impressum {
  margin-right: 20px !important;
}

.legal-notes > .Datenschutz {
  margin-left: 20px !important;
}

/**********************/

/* === Force ALL pimcore_area_col4 images into 3:2 boxes === */
.pimcore_area_col4 .pimcore_area_image {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Always create a 3:2 frame (height = 66.666% of width) */
.pimcore_area_col4 .pimcore_area_image::before {
  content: "";
  display: block;
  padding-top: 66.666%;
}

/* Make the <img> fill the frame and keep ratio */
.pimcore_area_col4 .pimcore_area_image > img {
  position: absolute !important;
  top: 0; left: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;    /* beats Bootstrap .img-fluid */
  object-fit: cover;             /* crop edges; or 'contain' for letterboxing */
  display: block;
}