/*   
Theme Name: HAWKS Real Estate
Theme URI: https://inmedia-design.com
Description: This is a bespoke Theme for HAWKS
Author: INMEDIA
Author URI: https://inmedia-design.com
Version: 2
*/


body {
  font-family:  "Raleway", sans-serif;
  color: #333;
  margin: 0;
  padding: 0;
}

.listing-item-outer {
    background-color: #ffffff;
}
.listing-item-outer--alt {
    background-color: #E8E7E7;
}

.container-custom {
    width: 100%;
    max-width: 1400px;
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
}

.h1, h1,
.h2, h2,
.h3, h3,
footer
{font-family:  "Raleway", sans-serif;
color: black;}

a {
	color: black;
}

.hero h1 {
	color: white;
	width: 50%;
    text-align: center;
}

 [data-aos] {
      opacity: 0;
      transition-property: transform, opacity;
    }

    .aos-animate {
      opacity: 1;
    }

.footer .subline {
	font-size: 11px;
	padding-top: 5px;
}


 .navbar {
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 100;
  background-color: transparent;
  padding: 0.5rem 0;
}

.archive .navbar {
	background-color: black;
}

  .nav-link {
    font-family:  "Raleway", sans-serif;
    padding: 0 20px !important;
  }
  
  
.navbar-light a {
	color: white !important;
}
.dropdown-menu a {
	color: #000000 !important;
}


.sticky-navbar a {
	color: #000000 !important;
}
.navbar.sticky-navbar {
  position: fixed;
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}
.navbar .container-custom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.navbar-brand {
  min-height: 100px;
  display: flex;
  align-items: flex-end;
}
.navbar-brand img {
  max-height: 60px;
}
.navbar-toggler {
  border: none;
}
.navbar-nav {
  align-items: flex-end;
}
.logo-default,
.logo-sticky {
  max-height: 100px;
  transition: opacity 0.3s ease;
}
.logo-sticky {
  display: none;
}
.sticky-navbar .logo-default {
  display: none;
}
.sticky-navbar .logo-sticky {
  display: inline;
}

.navbar-toggler-icon {
  background-size: 100% 100%;
}


.defaultheader {
	  width: 100%;
	  background-color: #000000; 
	  margin-bottom: 3em;
}

.defaultheader h1 {padding: 5em 0 2em 0; color: white;}




.hero {
  position: relative;
  height: 100vh; /* Höhe des sichtbaren Bereichs */
  width: 100%;
  background-repeat: no-repeat;
  background-color: #000000; 
  background-attachment: fixed; /* Parallax-Effekt für Desktop */
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  overflow: hidden;
}

.hero > * {
  z-index: 2;
}

.hero h1 {
  font-size: 4rem;
  font-weight: 600;
  font-family:  "Raleway", sans-serif;
}

.hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1;
}

.hero--video .hero__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* --- KORREKTUR FÜR MOBILE GERÄTE --- */
@media (max-width: 768px) {
  .hero {
    background-attachment: scroll;
  }
  .grid-item-content h3 {
	  font-size: 1.5rem;
  }
  .sib-form-block {
	    padding: 0 !important;
	}
	.hero h1 {
	color: white;
    text-align: center;
}



}
























.h2, h2 {
	font-size: 3rem;
    font-weight: 600;
    margin-bottom: 30px;
}

.h3, h3 {
    font-size: 2.5rem;
    padding-bottom: 15px;
}

p {
	color: #000000;
	font-size: 18px;
}

a, a:hover {
	text-decoration: none;
}

.beige {
	color: #000000;
}
.white {
	color: white;
}

.frm_primary_label {
	font-size: 16px !important;
}

/*paddings & margins */

.dmt-05 {margin-top: 0.5em}
.dmt-1 {margin-top: 1em}
.dmt-2 {margin-top: 2em}
.dmt-3 {margin-top: 3em}
.dmt-4 {margin-top: 4em}
.dmt-5 {margin-top: 5em}
.dmt-6 {margin-top: 6em}
.dmt-7 {margin-top: 7em}
.dmt-8 {margin-top: 8em}
.dmt-9 {margin-top: 9em}
.dmt-10 {margin-top: 10em}

.dmb-05 {margin-bottom: 0.5em}
.dmb-1 {margin-bottom: 1em}
.dmb-2 {margin-bottom: 2em}
.dmb-3 {margin-bottom: 3em}
.dmb-4 {margin-bottom: 4em}
.dmb-5 {margin-bottom: 5em}
.dmb-6 {margin-bottom: 6em}
.dmb-7 {margin-bottom: 7em}
.dmb-8 {margin-bottom: 8em}
.dmb-9 {margin-bottom: 9em}
.dmb-10 {margin-bottom: 10em}

.dpt-05 {padding-top: 0.5em}
.dpt-1 {padding-top: 1em}
.dpt-2 {padding-top: 2em}
.dpt-3 {padding-top: 3em}
.dpt-4 {padding-top: 4em}
.dpt-5 {padding-top: 5em}
.dpt-6 {padding-top: 6em}
.dpt-7 {padding-top: 7em}
.dpt-8 {padding-top: 8em}
.dpt-9 {padding-top: 9em}
.dpt-10 {padding-top: 10em}


.dpb-05 {padding-bottom: 0.5em}
.dpb-1 {padding-bottom: 1em}
.dpb-2 {padding-bottom: 2em}
.dpb-3 {padding-bottom: 3em}
.dpb-4 {padding-bottom: 4em}
.dpb-5 {padding-bottom: 5em}
.dpb-6 {padding-bottom: 6em}
.dpb-7 {padding-bottom: 7em}
.dpb-8 {padding-bottom: 8em}
.dpb-9 {padding-bottom: 9em}
.dpb-10 {padding-bottom: 10em}

.dpr-5 {padding-right: 5em}
.dpr-8 {padding-right: 8em}
.dpr-9 {padding-right: 9em}
.dpr-10 {padding-right: 10em}

.dpl-5 {padding-left: 5em}
.dpl-8 {padding-left: 8em}
.dpl-9 {padding-left: 9em}
.dpl-10 {padding-left: 10em}

@media (max-width: 1199px) {
	.mmt-05 {margin-top: 0.5em}
	.mmt-1 {margin-top: 1em}
	.mmt-2 {margin-top: 2em}
	.mmt-3 {margin-top: 3em}
	.mmt-4 {margin-top: 4em}
	.mmt-5 {margin-top: 5em}
	.mmt-6 {margin-top: 6em}
	.mmt-7 {margin-top: 7em}
	.mmt-8 {margin-top: 8em}
	.mmt-9 {margin-top: 9em}
	.mmt-10 {margin-top: 10em}
	
	.mmb-0 {margin-bottom: 0em}
	.mmb-05 {margin-bottom: 0.5em}
	.mmb-1 {margin-bottom: 1em}
	.mmb-2 {margin-bottom: 2em}
	.mmb-3 {margin-bottom: 3em}
	.mmb-4 {margin-bottom: 4em}
	.mmb-5 {margin-bottom: 5em}
	.mmb-6 {margin-bottom: 6em}
	.mmb-7 {margin-bottom: 7em}
	.mmb-8 {margin-bottom: 8em}
	.mmb-9 {margin-bottom: 9em}
	.mmb-10 {margin-bottom: 10em}
	
	.mpt-05 {padding-top: 0.5em}
	.mpt-1 {padding-top: 1em}
	.mpt-2 {padding-top: 2em}
	.mpt-3 {padding-top: 3em}
	.mpt-4 {padding-top: 4em}
	.mpt-5 {padding-top: 5em}
	.mpt-6 {padding-top: 6em}
	.mpt-7 {padding-top: 7em}
	.mpt-8 {padding-top: 8em}
	.mpt-9 {padding-top: 9em}
	.mpt-10 {padding-top: 10em}
	
	.mpb-05 {padding-bottom: 0.5em}
	.mpb-1 {padding-bottom: 1em}
	.mpb-2 {padding-bottom: 2em}
	.mpb-3 {padding-bottom: 3em}
	.mpb-4 {padding-bottom: 4em}
	.mpb-5 {padding-bottom: 5em}
	.mpb-6 {padding-bottom: 6em}
	.mpb-7 {padding-bottom: 7em}
	.mpb-8 {padding-bottom: 8em}
	.mpb-9 {padding-bottom: 9em}
	.mpb-10 {padding-bottom: 10em}
	
	
	.mpr-0 {padding-right: 0em}
	.mpr-1 {padding-right: 1em}
	.mpr-2 {padding-right: 2em}
	
	.mpl-0 {padding-left: 0em}
	.mpl-1 {padding-left: 1em}
	.mpl-2 {padding-left: 2em}
	}
	
	.gray-bg {
		background-color: #C6C2BC;
		color: white !important;
	}
	.gray-bg p {
		color: white;
	}
	.expanding-button {
  display: inline-block;
  width: auto;
  height: 50px;
  line-height: 50px;
  background-color: #000000;
  color: white !important;
  text-align: center;
  text-decoration: none;
  font-weight: 500;
  overflow: hidden;
  white-space: nowrap;
  transition: width 0.4s ease;
  padding: 0px 15px;
  border: 2px solid #000000;
  background-clip: padding-box;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
}
	
	.expanding-button-white {
	  display: inline-block;
	  width: auto;
	  height: 50px;
	  line-height: 50px;
	  background-color: #fff;
	  color: black !important;
	  text-align: center;
	  text-decoration: none;
	  font-weight: 500;
	  overflow: hidden;
	  white-space: nowrap;
	  transition: width 0.4s ease;
	  padding: 0px 15px;
	  border: 1px solid #000000;
	  background-clip: padding-box;
	  -webkit-appearance: none;
	  appearance: none;
	  box-shadow: none;
	}
	
	#frm_field_6_container .submit .expanding-button {
	  display: inline-block;
	  width: auto;
	  height: 50px;
	  line-height: 50px;
	  background-color: #000000;
	  color: white !important;
	  text-align: center;
	  text-decoration: none;
	  font-weight: 500;
	  overflow: hidden;
	  white-space: nowrap;
	  transition: width 0.4s ease;
	  border-radius: 0;
	  padding: 0px 15px;;
	}
	
	/* Beim Hover auf 200px erweitern */
	.expanding-button:hover {
	  background-color: #fff;
	  color: black !important;
	  border: 1px black solid;
	}



.page-id-160 .two-col-h3-text,
.page-id-170 .two-col-h3-text {
	padding-bottom: 9em
}

.newsletter {
	background-color: black;
}

.newsletter p, .newsletter h2 {
	color: white;
}

/* ELEMENTS**/

.two-col-h2-p-img h2,
.two-col-h3-text h2,
.two-col-h3-text h3 {
	color: #000000;
}

.video-cta {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.video-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-wrapper iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}

.video-overlay {
  position: absolute;
  top: 0;
  right: 0;
  width: 33%;
  height: 100%;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  color: white;
  z-index: 2;
  background: rgba(0, 0, 0, 0.2); /* optional halbtransparentes Overlay */
}
.loop_video {
	width: 100%;
	height: 100%;
}

.video-overlay h5,
.video-overlay h4 {
  margin: 0 0 10px;
  text-align: right;
  
}

.video-overlay .cta-button {
  margin-top: 10px;
}



    .cta-button {
      display: inline-block;
      background-color: #888;
      color: white;
      padding: 15px 30px;
      text-decoration: none;
      position: relative;
      overflow: hidden;
      transition: color 0.3s ease;
    }
    .cta-button::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;
      background-color: white;
      transform: translateX(0);
      transition: transform 0.3s ease;
      z-index: -1;
    }
    .cta-button:hover {
      color: #333;
    }
    .cta-button:hover::before {
      transform: translateX(-100%);
    }
    /* Responsive Grid Fix */
    .section-grid {
      display: flex;
      flex-wrap: wrap;
    }
    .grid-item {
      width: 33.3333%;
      padding-top: 33.3333%;
      position: relative;
      border: 1px solid #000000;
      overflow: hidden;
    }
    @media (max-width: 768px) {
      .grid-item {
        width: 100%;
        padding-top: 100%;
      }
    }
    .grid-item-content {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      padding: 6em;
      z-index: 2;
    }
    .grid-item-content h3, .grid-item-content .miniheadline {
	    color: #000000;
	    font-weight: 600;
    }
    
    .grid-item:hover .grid-item-content h3,
    .grid-item a:hover,
	.grid-item:hover .grid-item-content .miniheadline {
	  color: white;
	}

  
    .grid-item-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .grid-item:hover .grid-item-bg {
      opacity: 1;
    }
    .grid-item:hover {
      color: white;
    }
    /* Neues Overlay */
	.grid-overlay {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background-color: rgba(30, 30, 30, 0.35); /* leichter Grauschleier */
	  opacity: 0;
	  transition: opacity 0.3s ease;
	  z-index: 1;
	}
	
	/* Beim Hover über das Item: Overlay einblenden */
	.grid-item:hover .grid-overlay {
	  opacity: 1;
	}

    .miniheadline {
    font-weight: 500 !important;
    padding-bottom: 1.5em;
    font-size: 18px;
	}

    /* Arrow Styles */
    .arrow-wrap {
      position: relative;
      width: 100px;
      height: 3px;
      margin-top: 10px;
    }
    .arrow-line {
      position: absolute;
      top: 0;
      left: 0;
      height: 3px;
      width: 0;
      background-color: currentColor;
      transition: width 0.4s ease;
    }
    .arrow-wrap::after {
      content: '';
      position: absolute;
      top: -6px;
      right: -10px;
      border-top: 6px solid transparent;
      border-bottom: 6px solid transparent;
      border-left: 8px solid currentColor;
      opacity: 0;
      transition: opacity 0.3s ease 0.3s;
    }
    .grid-item:hover .arrow-line {
      width: 100%;
    }
    .grid-item:hover .arrow-wrap::after {
      opacity: 1;
    }
    
    .instagram h2 {
	    color: #fff;
	    margin-bottom: 10px;
    }
    
    .instagram {
	    background-color: #000;
    }
    
	.instagram img {
		 width: 100%;
      height: auto;
      object-fit: cover;
	}

    .project-section .col-md-4 {
      padding: 0 17px;
      display: flex;
      flex-direction: column;
    }
    .project-section .project-link {
      display: flex;
      flex-direction: column;
      height: 100%;
    }
    .project-section .image-container {
      display: flex;
      align-items: flex-end;
      justify-content: center;
      flex-grow: 1;
      margin-bottom: 15px;
      height: auto;
    }
    .project-section img {
      max-width: 100%;
      object-fit: contain;
      align-self: flex-end;
    }
	.project-link h3 {
		padding-bottom: 0;
		color: #000000;
		font-weight: 400;
	}
    .project-section .location {
      color: #000000;
      font-size: 1.2rem;
      font-weight: 500;
    }
    .project-link {
      text-decoration: none;
      color: inherit;
    }
    
     .footer {
      background-color: #000000;
      color: white;
      padding: 5em 0;
    }
    .footer h3 {
      border-top: 1px solid white;
      list-style: none;
    }
    .social-icons a {
      display: inline-block;
      width: 30px;
      height: 30px;
      line-height: 40px;
      text-align: center;
      margin-right: 10px;
    }
    .social-icons img {
	    width: -webkit-fill-available;
    }
    .footer-logos img {
      width: 100%;
      aspect-ratio: 5/4;
      object-fit: contain;
    }
    .copyright {
	    color: white;
	    font-size: 12px;
	    text-align: center;
	    border-top: white solid 1px;
    }
    
    .square-image {
	  aspect-ratio: 1 / 1;
	  width: 100%;
	  object-fit: cover;
	}
	
	.image-text-section .col-md-8 {
	  padding-left: 9em;
	  padding-right: 9em;
	}
	.image-text-section h3 {
		color: #000000;
	}


.info-container {
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  padding: 5em 0;
  margin: 5em 0;
}

.info-box {
  text-align: left;
  margin-bottom: 2em;
  color: #000000;
}

.info-box p {
  margin-bottom: 0.3em;
  font-size: 0.9em;
  color: #000000;
}

.info-box .info-value {
  font-size: 1.9em;
  font-weight: bold;
}

.bloglist h4 {
	font-weight: 600;
	font-size: 20px;
	}

#customGoogleMap {
  width: 100%;
  height: 600px; /* Höhe für Desktop */
  margin-bottom: 6em;
}


.latest-post-item {
    padding-top: 15px;
    padding-bottom: 15px;
}

.latest-post-item .post-item-content {
    display: flex;             /* Aktiviert Flexbox */
    align-items: center;       /* Zentriert Bild und Text vertikal auf einer Höhe */
    gap: 15px;                 /* Abstand zwischen Bild und Text */
}

.latest-post-item .post-image-col {
    flex-shrink: 0;            /* Verhindert, dass das Bild gestaucht wird */
    width: 100px;
    height: 100px;
    overflow: hidden;
}

.latest-post-item .post-image-col img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Trennlinie */
.latest-post-item.with-separator {
    border-bottom: 1px solid #eaeaea; /* Deine 1px solid grey Linie */
}

/* Entfernt den Standard-Margin des h4, da es in Flexbox ist */
.latest-post-item .post-title-col h4 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #000;
}

/* Diese Stile MUSST du in deine style.css kopieren */

.categories-list-with-svg {
    /* 1. Entfert den Bullet Point */
    list-style: none !important; 
    /* 2. Entfernt den linken Rand, der Platz für den Bullet Point lässt */
    padding-left: 0 !important; 
    margin-left: 0 !important;
}

.categories-list-with-svg li {
    /* Verhindert, dass das <li> Element selbst Listenpunkte anzeigt */
    list-style: none !important;
    padding: 0;
    margin: 0;
    
    /* Fügt die Trennlinie hinzu */
    border-bottom: 1px solid #eaeaea; 
}

.categories-list-with-svg li:last-child {
    border-bottom: none;
}

/* Flexbox für die Ausrichtung des Inhalts */
.categories-list-with-svg li a {
    display: flex;             /* Aktiviert Flexbox für vertikale Ausrichtung */
    align-items: center;       /* Vertikale Zentrierung */
    text-decoration: none;
    padding: 10px 0;
	font-size: 13px;
    font-weight: 600;
    color: #000;
}

/* Icon-Wrapper (stellt die feste Breite von 50px her) */
.categories-list-with-svg .category-icon-wrapper {
    flex-shrink: 0;
    width: 38px;              
    height: 50px;             
    margin-right: 15px;       
    overflow: hidden;
}

.categories-list-with-svg .category-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;      
}

.single-post p img {
	padding: 1em 0;
}

/* Stile für die Überschrift im Hero Header */
.single-post .hero h1 {
  max-width: 75%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* Anpassung für mobile Geräte (max. 768px Breite) */
@media (max-width: 768px) {
  .single-post .hero h1 {
    max-width: 90%;
    text-align: center;
  }
}

.blogcard {
	margin-bottom: 5em;
}


.widget-title {
	font-size: 15px;
    font-weight: 700;
    background-color: #C2C7C3;
    padding-bottom: 8px;
    padding: 8px;
}

.prophead {
	background-color: #f1f1f1;
}


.single .hero {
    /* Stellt sicher, dass das Bild den gesamten Bereich füllt */
    background-size: cover;
    background-position: center center;
    /* Weitere Hero-Header Stile hier */
    position: relative;
    height: 100vh; /* Beispielhöhe */
}

/* 1. Auf Mobilgeräten das kleinere Bild als Hintergrund verwenden */
@media (max-width: 768px) {
    .single .hero {
        /* Nutzt die Mobile-URL, die durch das <picture>-Element geladen wurde */
        /* Wir zwingen den Browser, den kleineren Mobile-Asset zu verwenden. */
        background-image: url('<?php echo $mobile_url; ?>') !important;
    }
}

/* 2. Verstecke das <picture>-Element, das nur für den Ladevorgang da ist */
.single .hero-responsive-image {
    display: none;
}


.highlights {
	background-color: #E8E7E7;
}


	
.property-facts {
  padding: 2rem 0;
  border-bottom: 1px grey solid;
}

.facts-row {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 0;
}

.fact-item {
  flex: 1 1 16.66%; /* Bei 6 Spalten: 100/6 = 16.66% */
  padding-right: 2rem;
  box-sizing: border-box;
  min-width: 0; /* Kein Überlaufen */
}

.fact-label {
  font-size: 0.98rem;
  margin-bottom: 0.3rem;
  letter-spacing: 0.5px;
}

.fact-value {
  font-size: 1.99rem;
  font-weight: 500;
}

@media (max-width: 768px) {

  /* Der Container, der alle Fakten-Blöcke umschließt */
  .facts-row {
    flex-direction: column; /* Stellt sicher, dass die Items untereinander gestapelt werden */
  }

  /* Jedes einzelne Fakten-Item wird nun selbst zu einer Flex-Reihe */
  .fact-item {
    display: flex;
    justify-content: space-between; /* Schiebt Label nach links, Wert nach rechts */
    align-items: center;            /* Zentriert beide vertikal auf einer Linie */
    width: 100%;                    /* Nimmt die volle Breite ein */
    
    /* Die superfeine Trennlinie */
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid #e0e0e0; /* Helles Grau für die Linie */
  }

  /* Entfernt die Linie und den Abstand beim allerletzten Element */
  .fact-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
  }
  
  /* Verhindert, dass die <p>-Tags eigene Abstände hinzufügen */
  .fact-item p {
      margin: 0;
  }
}


.property-features-list__item {
    margin-left: 1.5em;
}



.features-icons {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}
.features-icons > div {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.features-icons img {
    width: 35px;
    height: 35px;
    object-fit: contain;
}

.title-with-price {

}

/* Stile für den Preis (optional, z.B. andere Farbe oder Schriftstärke) */
.title-with-price .property-price {
    font-weight: 600;
    color: #000443;
}

.features-icons span {
	font-size: 1.2rem;
}






/* CRM Suchformular: Select-Felder (inkl. Safari/WebKit-Anpassungen) */
.inmcrm-search-form .inmcrm-select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 100%;
	padding: 13px 40px 13px 12px;
	border: 1px solid #C6C2BC;
	border-radius: 0;
	background-color: #ffffff;
	color: #000000;
	font-size: 16px;
	line-height: 1.4;
	background-image:
		linear-gradient(45deg, transparent 50%, #000000 50%),
		linear-gradient(135deg, #000000 50%, transparent 50%);
	background-position:
		calc(100% - 18px) 50%,
		calc(100% - 12px) 50%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}

/* Verhindert blauen iOS/Safari-Fokus-Hintergrund und Rahmen-Sprünge */
.inmcrm-search-form .inmcrm-select:focus {
	outline: none;
	border-color: #000000;
	box-shadow: none;
}

/* IE / Edge Legacy: Standard-Pfeil ausblenden */
.inmcrm-search-form .inmcrm-select::-ms-expand {
	display: none;
}

/* Safari/iOS: verhindert Rundungen und System-Rendering soweit möglich */
@supports (-webkit-touch-callout: none) {
	.inmcrm-search-form .inmcrm-select {
		border-radius: 0;
		background-clip: padding-box;
	}
}


/* Mobile-Optimierungen ffcr Suche & Listing */
@media (max-width: 767.98px) {
	/* Suchbereich: Felder und Buttons stapeln, Buttons full-width */
	.inmcrm-search-form__row.inmcrm-search-form__row--primary {
		flex-direction: column;
		align-items: stretch;
	}
	.inmcrm-form-field {
	    flex: 1 1 42px !important;
	    display: flex;
	    flex-direction: column;
	    gap: 6px;
	}
	.inmcrm-search-form__row .expanding-button,
	.inmcrm-search-form__row .expanding-button-white {
		width: 100%;
		text-align: center;
	}

	/* Feature-Icons im Listing: besserer Umbruch auf kleinen Screens */
	.features-icons {
		flex-wrap: wrap;
		row-gap: 8px;
	}
	.features-icons img {
		width: 28px;
		height: 28px;
	}
	.features-icons span {
		font-size: 1rem;
	}

	/* Property-Listing: Bild immer vor Text auf Mobile,
	   links/rechts Wechsel bleibt auf Desktop erhalten */
	.listing .row.dpt-6.dpb-6 {
		flex-direction: column;
	}
	.listing .col-md-6.mmt-4 {
		order: 0; /* Bild-Spalte */
	}
	.listing .col-md-6.d-flex {
		order: 1; /* Text-Spalte */
	}
}


.carousel-gallery {
  padding: 2rem 0;
}

.carousel-gallery .swiper-container {
  width: 100%;
  overflow: hidden;
}

.carousel-gallery .swiper-wrapper {
  display: flex;
  align-items: center;
}

.carousel-gallery .swiper-slide {
  flex-shrink: 0;
  width: auto;
  margin-right: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.carousel-gallery .swiper-slide img {
  height: 500px;
  width: auto;
  object-fit: cover;
  display: block;
}

/* Optional: letzter Slide ohne rechten Abstand */
.carousel-gallery .swiper-slide:last-child {
  margin-right: 0;
}

/* Mobile Anpassung */
@media (max-width: 768px) {
  .carousel-gallery .swiper-slide img {
    height: 300px; /* Weniger Höhe auf kleinen Geräten */
  }
}





.page-id-323 .foox {
	display: none;
}





.text-image-section img {
  object-fit: cover;
  height: 100%;
  display: block;
}
.text-image-section h3 {
	color: #000000;
}

@media (max-width: 767.98px) {
  .swap .row {
    flex-direction: column-reverse;
  }
  .text-image-section h3 {
	  margin-top: 1em;
  }
  .image-text-section .col-md-8 {
	    padding-left: 1em;
	    padding-right: 1em;
	}
	.image-text-section h3 {
	    font-size: 1.9em;
	    padding-top: 1em;
	}
}




.text-image-section img {
  object-fit: cover;
  height: 100%;
  display: block;
}

@media (max-width: 767.98px) {
  .text-image-section .row {
    flex-direction: column-reverse;
  }
}

.custom-split-section .row {
  display: flex;
  align-items: center;
}

.custom-split-section .highlight-box {
  background-color: #000000;
  color: white;
  padding: 5em;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-split-section .highlight-box h3 {
  text-align: left;
  margin: 0 auto;
  width: 100%;
  max-width: 500px;
}

.custom-split-section p {
	    padding: 3em;
    margin-bottom: 0;
}


.cta-image-text-section {
  background: linear-gradient(135deg, #DADAD4 0%, #D5D0CC 100%);
  padding: 5em 0;
}

.cta-image-text-section .row {
  display: flex;
  align-items: center;
}

.cta-image-text-section img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  padding: 3em;
}

.cta-image-text-section .content {
  padding-left: 6em;
}

.cta-image-text-section .content p {
  font-size: 0.9em;
  color: #000000;
  margin-bottom: 0.5em;
}

.cta-image-text-section .content h3 {
  margin-bottom: 1.5em;
  font-size: 1.8em;
  color: #000000;
}

.contact-image-section h2 {
	color: #000000;
}

.frm_form_field {
}
#frm_field_6_container {
	border-bottom: none;
}

/* Desktop Layout */
.pdf-bg-desktop {
  
  background-size: cover;
  background-position: center;
  height: 700px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.pdf-info-box {
  width: 40%;
  padding: 2rem;
  color: white;
  text-align: left;
}

.preheadline {color: white}

/* Buttons */
.btn-outline-white {
  display: inline-block;
  width: 200px;
  margin-bottom: 1rem;
  padding: 0.75rem 1.5rem;
  border: 1px solid #fff;
  color: #fff;
  background: transparent;
  text-align: center;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-outline-white:hover {
  background: white;
  color: black;
}

/* Mobile Layout */
.pdf-image-mobile {
  width: 100%;
  padding-top: 80%;
  background-size: cover;
  background-position: center center;
}

.pdf-info-box-mobile {
  background-color: #999;
  color: white;
  padding: 2rem 1rem;
  text-align: center;
}





@media (max-width: 768px) {
	
	
	
		.navbar .container-custom {
		display: flex;
		justify-content: space-between;
		align-items: center;
		}
		
		.navbar-collapse {
		  background-color: #ffffff;
		  padding: 1.5rem;
		  border-radius: 0 0 12px 12px;
		  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		  position: absolute;
		  top: 110px; /* passe je nach Navbar-Höhe an */
		  right: 0;
		  width: 100%;
		  z-index: 1000;
		  transition: all 0.3s ease-in-out;
		}
		
		.navbar-nav {
		text-align: right;
		}
		
		.nav-link {
		padding: 0.5rem 1rem;
		color: #333;
		font-family:  "Raleway", sans-serif;
		}
		.nav-item {width: 100%; text-align: -webkit-center;}
		
		.footer ul li, address, .subline {
			font-size: 16px;
			list-style: none;
		}
		.footer ul li a {
			padding: 8px 0;
			display: block;
			list-style: none;
			font-size: 16px;
		}
		.hero {
		  padding: 0 1em;
		}
		.hero h1 {
		  font-size: 3rem;
		  width: 100%
		}
		
		.hero h6, .hero h5 {
			width: 100%
		}
		.navbar-brand img {
		  max-height: 35px;
		}
		.h2, h2 {
		font-size: 1.75rem;
		font-weight: 600;
		margin-bottom: 30px;
		}
		
		.h3, h3 {
		    font-size: 2.05rem;
		    padding-bottom: 15px;
		}
		p {
			padding-right: 15px;
		}
		.grid-item-content {
			padding: 4em;
		}
		.video-overlay {
			width: auto;
		} 
		.project-section .col-md-4 {
		  padding: 0 15px;
		}
		.navbar-light a {
		color: #000000 !important;
		padding: 7px 0 !important;
		}
		.custom-split-section p {
			background-color: #C6C2BC;
			color: white;
		}
		.navbar-light .navbar-toggler-icon {
		    background-image: url(data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E) !important
		    ;
		}
	
  
}





       /* 2. ROW: Flexbox-Container */
        .instagram-row {
            display: flex;
            flex-wrap: wrap; 
            margin: 0 -5px; /* Kompensiert den Padding der Items, um Full-Width zu ermöglichen */
            height: 361px;
        }

        /* 3. ITEM: Layout für jedes einzelne Bild */
        .instagram-item {
            padding: 0 5px; /* Kleiner Abstand zwischen den Bildern */
            margin-bottom: 10px;
            overflow: hidden;
        }

        /* 4. BILD: Das Seitenverhältnis (4:5) über Padding-Bottom erzeugen */
        .instagram-item a {
            display: block;
            position: relative;
            padding-bottom: 125%; /* Erzeugt ein 4:5 Hochformat (100% / 125% = 0.8 -> 4:5) */
        }

        .instagram-item img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover; /* Füllt den Container, schneidet Ränder zu */
            display: block;
        }

        /* ------------------------------------------------ */
        /* --- RESPONSIVE FLEXBOX-BREITEN --- */
        /* ------------------------------------------------ */

        /* Mobile Ansicht (Standard): 2 Bilder pro Reihe (50%) */
        @media (max-width: 767px) {
            .instagram-item {
                width: 50%; /* 100% / 2 = 50% */
                        position: relative;
            }
        }
        
        /* Tablet Ansicht (ab 768px): 4 Bilder pro Reihe (25%) */
        @media (min-width: 768px) {
            .instagram-item {
                width: 25%; /* 100% / 4 = 25% */
                        position: relative;
            }
        }

        /* Desktop Ansicht (ab 1200px): 6 Bilder pro Reihe (16.666%) */
        @media (min-width: 1200px) {
            .instagram-item {
                width: 16.6666%; /* 100% / 6 = 16.6666% */
                        position: relative;
            }
        }


.search {
	background-color: #E8E7E7;
}   
.page-id-422 .search {
	background-color: black;
	padding-top: 10em;
}      
        
.page-template-page-listing .inmcrm-search-form {
                margin: 0 auto;
                background: #E8E7E7;
                border-radius: 0px;
            }
            .inmcrm-search-form__row {
                display: flex;
                flex-wrap: wrap;
                gap: 16px;
            }
            .inmcrm-search-form__form {
                display: flex;
                flex-direction: column;
                gap: 24px;
            }
            .inmcrm-search-form__advanced {
                max-height: 0;
                overflow: hidden;
                padding-top: 0;
                margin-top: 0;
                transition: max-height 0.35s ease, padding-top 0.35s ease, margin-top 0.35s ease;
            }
            .search.search--advanced-open .inmcrm-search-form__advanced {
                max-height: 800px; /* ausreichend groß für Inhalte */
                padding-top: 24px;
                margin-top: 16px;
            }
            .inmcrm-form-section h3 {
                margin-bottom: 16px;
                font-size: 1.25rem;
                color: #1b2533;
            }
            .inmcrm-form-row {
                display: flex;
                flex-wrap: wrap;
                gap: 16px;
            }
            .inmcrm-feature-column {
                flex: 1 1 0;
                min-width: 0;
            }
            .inmcrm-form-field {
                flex: 1 1 240px;
                display: flex;
                flex-direction: column;
                gap: 6px;
            }
            .inmcrm-form-field label {
                font-weight: 600;
                color: #25324d;
            }
            .inmcrm-form-field input,
            .inmcrm-form-field select,
            .inmcrm-form-field textarea {
                padding: 10px 12px;
                border-radius: 0px;
                border: 1px solid #d5dce5;
                font-size: 0.95rem;
            }
            .inmcrm-form-field select[multiple] {
                min-height: 120px;
            }
            .inmcrm-checkbox-grid {
                display: grid;
                gap: 10px;
            }
            .inmcrm-checkbox-grid.columns-2 {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
            .inmcrm-checkbox-grid.columns-3 {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }
            .inmcrm-checkbox-grid.columns-4 {
                grid-template-columns: repeat(4, minmax(0, 1fr));
            }
            .inmcrm-checkbox-item {
                display: flex;
                align-items: center;
                padding: 10px 12px;
                border: 1px solid #dfe5ee;
                border-radius: 0px;
                background: #f7f9fc;
                transition: border-color 0.2s ease, box-shadow 0.2s ease;
                gap: 10px;
                cursor: pointer;
            }
            .inmcrm-checkbox-item input {
                width: auto;
            }
            .inmcrm-checkbox-item:hover {
                border-color: #7c5dfa;
                box-shadow: 0 6px 20px rgba(124, 93, 250, 0.15);
            }
            .inmcrm-checkbox-item--parent {
                font-weight: 600;
                background: #fff;
            }
            .locationgroup {
                padding: 18px;
                background: #f5f7fb;
                margin-bottom: 18px;
            }
            .locationgroup legend {
                margin-bottom: 14px;
            }
            .locationgroup__items {
                margin-top: 6px;
            }
            .inmcrm-feature-category {
                margin-bottom: 16px;
            }
            .inmcrm-feature-category__title {
	            font-size: 1.2rem
            }
            .inmcrm-feature-category h4 {
                margin-bottom: 12px;
                color: #4a5568;
            }
            .inmcrm-form-actions {
                text-align: center;
            }
            .inmcrm-button {
                padding: 12px 32px;
                background: #7c5dfa;
                color: #fff;
                border: none;
                border-radius: 999px;
                font-weight: 600;
                font-size: 1rem;
                cursor: pointer;
                transition: transform 0.2s ease, box-shadow 0.2s ease;
            }
            .inmcrm-button:hover {
                transform: translateY(-1px);
                box-shadow: 0 12px 24px rgba(124, 93, 250, 0.25);
            }
            @media (max-width: 768px) {
                .inmcrm-form-row {
                    flex-direction: column;
                }
            }
            
.listhead {
	border-bottom: solid black 1px;
}        

.page-id-388 label {
    margin-bottom: 0;
}    
.page-id-388 .inmcrm-form-section h3 {
	font-weight: 600;
}
.page-id-388 .inmcrm-form-row {
	margin-top: 1em;
}
.page-id-388 .inmcrm-checkbox-item span {
	font-size: 1.0rem;
}
.inmcrm-feature-category h4 {
	font-size: 1.0rem;
	font-weight: 600;
}


label {
    margin-bottom: 0 !important;
}

.inmcrm-form-field input {
    margin-bottom: 1em;
}

.inmcrm-contact-form {
    margin: 0 auto;
}

.inmcrm-contact-form__form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.inmcrm-form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.inmcrm-form-field label {
    font-weight: 400;
    color: #1b2533;
}

.inmcrm-form-field input,
.inmcrm-form-field textarea {
    border: 1px solid #d5dce5;
    padding: 10px 12px;
    font-size: 0.95rem;
}

.inmcrm-button {
    align-self: flex-start;
    padding: 12px 28px;
    background: #2f6fed;
    color: #fff;
    border-radius: 999px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.inmcrm-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(47, 111, 237, 0.25);
}

/* Kontaktformular: Feedback-Meldungen */
.inmcrm-contact-message {
    margin-bottom: 16px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.95rem;
    line-height: 1.5;
}

.inmcrm-contact-message--success {
    background: #e6f6f0;
    color: #146c43;
    border: 1px solid #b7e4c7;
}

.inmcrm-contact-message--error {
    background: #fde8e8;
    color: #b42318;
    border: 1px solid #f5c2c0;
}