/*
Theme Name: Impreza Child
Template: Impreza
Version: 1.0
Author:	UpSolution / Katja Rohleder
Theme URI: http://impreza.us-themes.com/
Author URI: http://us-themes.com/
*/


/* ==============================
   1. Allgemeine Einstellungen
   ============================== */

@font-face {
  font-family: 'Satoshi-Light';
  src: url('fonts/Satoshi-Light.woff2') format('woff2'),
       url('fonts/Satoshi-Light.woff') format('woff'),
       url('fonts/Satoshi-Light.ttf') format('truetype');
  font-weight: 300;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Satoshi-LightItalic';
  src: url('fonts/Satoshi-LightItalic.woff2') format('woff2'),
       url('fonts/Satoshi-LightItalic.woff') format('woff'),
       url('fonts/Satoshi-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'Satoshi-Regular';
  src: url('fonts/Satoshi-Regular.woff2') format('woff2'),
       url('fonts/Satoshi-Regular.woff') format('woff'),
       url('fonts/Satoshi-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Satoshi-Italic';
  src: url('fonts/Satoshi-Italic.woff2') format('woff2'),
       url('fonts/Satoshi-Italic.woff') format('woff'),
       url('fonts/Satoshi-Italic.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'Satoshi-Medium';
  src: url('fonts/Satoshi-Medium.woff2') format('woff2'),
       url('fonts/Satoshi-Medium.woff') format('woff'),
       url('fonts/Satoshi-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Satoshi-MediumItalic';
  src: url('fonts/Satoshi-MediumItalic.woff2') format('woff2'),
       url('fonts/Satoshi-MediumItalic.woff') format('woff'),
       url('fonts/Satoshi-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'Satoshi-Bold';
  src: url('fonts/Satoshi-Bold.woff2') format('woff2'),
       url('fonts/Satoshi-Bold.woff') format('woff'),
       url('fonts/Satoshi-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Satoshi-BoldItalic';
  src: url('fonts/Satoshi-BoldItalic.woff2') format('woff2'),
       url('fonts/Satoshi-BoldItalic.woff') format('woff'),
       url('fonts/Satoshi-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'Satoshi-Black';
  src: url('fonts/Satoshi-Black.woff2') format('woff2'),
       url('fonts/Satoshi-Black.woff') format('woff'),
       url('fonts/Satoshi-Black.ttf') format('truetype');
  font-weight: 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Satoshi-BlackItalic';
  src: url('fonts/Satoshi-BlackItalic.woff2') format('woff2'),
       url('fonts/Satoshi-BlackItalic.woff') format('woff'),
       url('fonts/Satoshi-BlackItalic.ttf') format('truetype');
  font-weight: 900;
  font-display: swap;
  font-style: italic;
}

@font-face {
  font-family: 'Satoshi-Variable';
  src: url('fonts/Satoshi-Variable.woff2') format('woff2'),
       url('fonts/Satoshi-Variable.woff') format('woff'),
       url('fonts/Satoshi-Variable.ttf') format('truetype');
  font-weight: 300 900;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Satoshi-VariableItalic';
  src: url('fonts/Satoshi-VariableItalic.woff2') format('woff2'),
       url('fonts/Satoshi-VariableItalic.woff') format('woff'),
       url('fonts/Satoshi-VariableItalic.ttf') format('truetype');
  font-weight: 300 900;
  font-display: swap;
  font-style: italic;
}


:root {
    --gwgdunkelgruen: #0F403F;  
    --gwghellgruen: #2EA967;   
    --gwgkashmir: #F9F6EE;
    --gwglichtgruen: #BAE8B6; 
	--orange: #FFB649;
	--nordmanngruen: #0C7D5A;
	--maigruen: #2EA967;
}




body, h1, h2, h3, .meta, .post_content, .subline, #immobilienliste a {color: var(--gwgdunkelgruen) !important;}
body, .post_content, .small-text, .medium, .download-file, .immo-details.secondar .post_custom_field {font-family: "Satoshi-Medium" !important;}
body {font-size: 18px; line-height: 30px;}
.post_content {font-size: 18px;  color: var(--gwgdunkelgruen) !important; line-height: 30px;}

.more, .expose, .grundriss, h3, .g-breadcrumbs-item:last-child, .newsticker, .rs-slider-button, .teaserbox-headline, .termine td:first-child, .w-form-row-label, .btn.orange .w-tabs-section-header, .headline-with-arrow-left, .thumb-overlay span, .immo-pagination, .orange-headline-arrow,  div.tipps, .download-title, .w-tabs-item, .category-label, .category-filter, .mobil-haverie a {font-family: 'Satoshi-Black' !important;}
.breadcrumb, h1, .counter-title, .counter h2, h2, .meta, .subline, .slide-content, .headline, .regular, .headerimage-text, #page-footer { font-family: 'Satoshi-Regular' !important; }
ul.level_1 a, strong, .strong, a.btn, .w-form-row.for_file .w-form-row-field, li.highlight-text, .immo-details .post_custom_field, .immo-ort, .immobilien-title-single, .w-tabs-section-title, .btn.orange, .headline-with-shadow, .counter-number, .kashmir h3, .headline-contactbox, .contactperson, .black, .contactbox .w-post-elm-before  {font-family: 'Satoshi-Bold' !important; letter-spacing: 0.2px !important;} 


main a,
.content a,
article a,
section a {
  color: var(--nordmanngruen);  text-decoration: underline;
}

ol {
   
    margin-left: 1.5rem !important;
}

ul {margin-left: 0 !important;}

a.w-btn, #page-footer a, .pagination_regular a, .breadcrumb a, .immo-pagination a, #immobilienliste a, .immowelt-galerie-thumbs a {text-decoration: none !important;}

/*.immo-pagination a, .posts-slider a, .breadcrumb a, .w-nav-list.level_2 li a, footer a {
    text-decoration: none !important;
}





a {
    text-decoration: underline;
}*/

.pt-70 {padding-top: 70px !important;}
.pt-60 {padding-top: 60px !important;}
.pt-80 {padding-top: 80px !important;}
.pt-100 {padding-top: 100px !important;}
.pt-120 {padding-top: 120px !important;}

.pt-200 {padding-top: 200px !important;}
.pt-600 {padding-top: 600px !important;}
.pt-170 {padding-top: 170px !important;}
.pb-125 {padding-bottom: 125px !important;}
.pb-100 {padding-bottom: 100px !important;}
.pb-180 {padding-bottom: 180px !important;}
.pb-80 {padding-bottom: 80px !important;}
.pb-90 {padding-bottom: 90px !important;}
.pb-160 {padding-bottom: 160px !important;}
.pb-120 {padding-bottom: 120px !important;}
.pb-130 {padding-bottom: 120px !important;}
.pb-200 {padding-bottom: 200px !important;}

.height-110 {height: 110px}
.height-150 {height: 150px}


ul:not(nav ul):not(nav ul ul):not(#wpadminbar ul):not(#wpadminbar ul ul) {
    list-style: none;
    padding: 0;
}

ul:not(nav ul):not(nav ul ul):not(#wpadminbar ul):not(#wpadminbar ul ul) > li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 10px;
	 position: relative; /* Wichtig, damit das Pseudoelement richtig positioniert wird */
	 padding-left: 42px; /* Platz für den Pfeil schaffen */
}


#immobilienliste .w-grid-list article {background: #fff !important;}

ul:not(nav ul):not(nav ul ul):not(#wpadminbar ul):not(#wpadminbar ul ul) > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%; /* Zentriert das Icon vertikal */
    transform: translateY(-50%); /* Korrigiert die Positionierung */
    width: 20px;
    height: 20px;
    background-image: url('/wp-content/themes/Impreza-child/elements/arrow-dunkelgruen.svg');
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 0.8rem;
}

#page-content {overflow: hidden !important;}

h1 {font-size: 3rem !important; line-height: 1.3; margin-bottom: 30px !important}
h1.start {font-size: 66px !important; line-height: 1.1; margin-bottom: 30px !important; display: block !important; }
h2 {font-size: 2.5rem !important; }
h3 {line-height: 30px !important;}


/* ==============================
   2. Header
   ============================== */

.l-subheader.at_middle {border-bottom: 1px solid var(--orange);}

.w-nav-list.level_2 li a {color: var(--gwgdunkelgruen) !Important;}


/* Standard Hover-Underline-Effekt */
.current-menu-item .w-nav-anchor.level_1 .w-nav-title:after {
    display: block;
    position: absolute !important;
    left: 0 !important;
    bottom: -0.4em !important;
    margin: 0 auto 0px !important;
    height: 4px !important;
    width: 100% !important;
    background: var(--gwghellgruen) !important;
    opacity: 1 !important;
    transition: all 0.3s !important;
}

.no-touch .w-nav.type_desktop .hover_underline .w-nav-anchor.level_1 .w-nav-title:after { height: 4px !important; bottom: -0.4em !important; margin: 0 auto 0px !important;}
	
ul.w-nav-list.level_2::after {
  content: "";
  position: absolute;
  bottom: 0px; /* hängt es unter das letzte li */
	margin-top: -130px;
  left: 9px;
  width: 94%;
  height: 10px;
  background-color: transparent;
  z-index: -1; /* optional: hinter dem Menü */
	 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* gleichmäßiger Schatten */
 /* box-shadow: 0 6px 6px -2px rgba(0, 0, 0, 0.1);  optionaler Schatten */
	overflow: hidden;
}

ul.level_1 li.menu-item-has-children a:hover::after {background-image: url('/wp-content/themes/Impreza-child/elements/dropdownelement.png') !important; display: block !important; height: 100px !important; width:100px}


.w-search .fa-search:before {content: url('/wp-content/themes/Impreza-child/elements/search-header.svg') !important; width: 26px;
	display: block; margin-top: 10px}

	
/* ==============================
   3. Navigation / Buttons
   ============================== */

/* Floating Buttons*/

.floating-buttons {
  position: fixed;
  right: 0px;
  top: 180px;
  z-index: 40;
}


.floating-button {
  position: relative;
  margin-bottom: 6px;
  width: 220px;
  max-width: 220px;
  transform: translateX(170px);  
  height: 45px;
  display: flex;
  justify-content: flex-start;
  align-items: center;  
  transition: transform 0.3s ease;
  overflow: visible;
  background: none;
  z-index: 10;
}

 
.button-text {
  display: flex;
  position: absolute;
  left: 55px;
  opacity: 0;
  width: 140px;
  color: white;
  align-items: center;
  height: 42px;
  font-size: 14px;
  white-space: nowrap;
  transition: opacity 0.3s ease, transform 0.3s ease;
  padding-left: 10px;
  transform: translateY(-3px);  
  z-index: 2;
  pointer-events: none;
}

.floating-button:hover .button-text,
.floating-button:focus-visible .button-text {
  opacity: 1;
  transform: translateX(0) translateY(-3px);
}

 
.button-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 260px;
  height: 45px;
  background-image: url('/wp-content/themes/Impreza-child/elements/floating-menu-bg.png');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: cover;
  z-index: 0;
  transition: background-image 0.3s ease;
  pointer-events: none;
}

.floating-button:hover .button-bg {
  background-image: url('/wp-content/themes/Impreza-child/elements/floating-menu-bg-hover.png');
}

/* Aktiver Zustand */
.floating-button.is-active .button-bg {
  background-image: url('/wp-content/themes/Impreza-child/elements/floating-menu-bg-aktiv.png');  
}

.floating-button.is-active .icon-ansprechpartner {
  background-image: url('/wp-content/themes/Impreza-child/elements/icon-slide-ansprechpartner-aktiv.svg');  
}

.floating-button.is-active .icon-wohnungssuche {
  background-image: url('/wp-content/themes/Impreza-child/elements/icon-slide-wohnungssuche-aktiv.svg');  
}

.floating-button.is-active .icon-haverie {
  background-image: url('/wp-content/themes/Impreza-child/elements/icon-slide-haverie-aktiv.svg');  
}

 
.floating-button.is-active {
  transform: translateX(170px);  
}

 
.floating-button:hover {
  transform: translateX(0);  
}

 
.icon-ansprechpartner,
.icon-haverie,
.icon-wohnungssuche {
  display: block;
  width: 40px;
  height: 42px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  margin: 0 10px;
  transition: background-image 0.3s ease;
  z-index: 1;
  transform: translateY(-3px);
}

 
.icon-ansprechpartner {
  background-image: url('/wp-content/themes/Impreza-child/elements/icon-slide-ansprechpartner.svg');
  background-size: 24px 24px;
}
.icon-wohnungssuche {
  background-image: url('/wp-content/themes/Impreza-child/elements/icon-slide-wohnungssuche.svg');
  background-size: 24px 24px;
}
.icon-haverie {
  background-image: url('/wp-content/themes/Impreza-child/elements/icon-slide-haverie.svg');
  background-size: 24px 24px;
}


 
.floating-button:hover .icon-ansprechpartner,
.floating-button:focus-visible .icon-ansprechpartner, .floating-button.is-active:hover .icon-ansprechpartner {
background-image: url('/wp-content/themes/Impreza-child/elements/icon-slide-ansprechpartner-hover.svg');
background-size: 24px 24px
}
.floating-button:hover .icon-wohnungssuche,
.floating-button:focus-visible .icon-wohnungssuche, .floating-button.is-active:hover .icon-wohnungssuche {
background-image: url('/wp-content/themes/Impreza-child/elements/icon-slide-wohnungssuche-hover.svg');
background-size: 24px 24px
}
.floating-button:hover .icon-haverie,
.floating-button:focus-visible .icon-haverie, .floating-button.is-active:hover .icon-haverie {
background-image: url('/wp-content/themes/Impreza-child/elements/icon-slide-haverie-hover.svg');
background-size: 24px 24px
}

.floating-button.is-active:hover .button-bg {
  background-image: url('/wp-content/themes/Impreza-child/elements/floating-menu-bg-hover.png');  
}



/*Breadcrumb*/
.breadcrumb,  .breadcrumb a {font-size: 14px;  color: var(--gwgdunkelgruen) !important; }
.breadcrumb {margin-top: 20px !important}

/*Navigation*/
/* Dropdown-Hintergrund und Styling für Submenü */

ul.w-nav-list.level_2 {
	
	background-image: url('/wp-content/themes/Impreza-child/elements/Dropdown.svg') !important;
	background-repeat: no-repeat !important;
	background-size: cover !important;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
	margin-top: 0px;
	width: 220px;
	padding: 40px 20px 20px 20px;
	left: -50% !important;
	height: auto !important;
}

/* Listeneinträge im Submenü */
ul.w-nav-list.level_2 li {
	width: 190px;
	line-height: 1.2;
	height: auto;
	display: flex;
	align-items: center; /* Vertikale Ausrichtung */
	border-bottom: 1px solid var(--orange);
}

/* Pfeil vor Listeneinträgen */
ul.w-nav-list.level_2 li:before {
	content: url('/wp-content/themes/Impreza-child/elements/arrow-right-orange.svg') !important;
	width: 20px;
	display: block;
}

/* Link-Styling im Dropdown */
ul.w-nav-list.level_2 li a {
	display: block;
	width: 190px;
	white-space: normal !important; /* wrap statt nowrap */
}

.w-nav.type_desktop .w-nav-list:not(.level_1) {
    box-shadow: none !Important;
}

/*Buttons*/



/* Standard Button mit Pfeil */
.btn.standard.arrow, .more  {
    margin-top: 50px;
    display: inline-flex;
    align-items: center; /* Vertikale Zentrierung von Text und Icon */
    justify-content: center;
    color: white;
    transition: all 0.3s ease;
    position: relative;
    padding-right: 30px; /* Platz für das Icon schaffen */
    white-space: nowrap; /* Verhindert Textumbruch */
}

.grundriss .w-btn-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  position: relative;
}

.grundriss .w-btn-label::after {
  content: '';
  display: inline-block;
  width: 25px;
  height: 20px;
  background-image: url('/wp-content/themes/Impreza-child/elements/eye.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: background-image 0.2s ease-in-out;
}

.grundriss:hover .w-btn-label::after {
  background-image: url('/wp-content/themes/Impreza-child/elements/eye-white.svg');
}

/* Button-Label in verschiedenen Button-Varianten */
.btn.standard.arrow .w-btn-label, .w-filter-item-title
.more .w-btn-label,
.grundriss .w-btn-label,
.expose .w-btn-label,
.btn.orange.arrow .w-btn-label {
    display: inline-flex; /* Flexbox für die Ausrichtung des Texts */
    align-items: center; /* Vertikale Ausrichtung */
    position: relative;
}

/* Zentriertes Pfeil-Icon */
.btn.standard.arrow .w-btn-label::after, .more .w-btn-label::after, .btn.orange.arrow .w-btn-label::after, .expose .w-btn-label::after  {
    content: "";
 
    width: 20px; /* Breite anpassen */
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 10px; /* Abstand zwischen Text und Icon */
    transition: background-image 0.3s ease;
    background-image: url('/wp-content/themes/Impreza-child/elements/pfeil-button.svg') !important;
    position: relative;
}

/* Sicherstellen, dass der Button und das Icon richtig ausgerichtet sind */
.more .w-btn-label {
    display: flex; /* Flexbox für die gesamte Button-Beschriftung */
    align-items: center; /* Vertikale Ausrichtung von Text und Icon */
    justify-content: center;
     /* Geringer Abstand nach dem Text */
}


.flipbook img {width: 400px !important;}




.expose .w-btn-label::after {
    background-image: url('/wp-content/themes/Impreza-child/elements/download.svg') !important;
}

/* Pfeil ändert sich beim Hover */
.btn.standard.arrow:hover .w-btn-label::after, .more:hover .w-btn-label::after, .btn.orange.arrow:hover .w-btn-label::after, .rs-slider-button:hover .w-btn-label::after {
    background-image: url('/wp-content/themes/Impreza-child/elements/pfeil-button-weiss.svg') !important;
}



.expose:hover .w-btn-label::after {
    background-image: url('/wp-content/themes/Impreza-child/elements/download-white.svg') !important;
}

/* ==============================
   4. Wiederholende Elemente
   ============================== */

/*Counter*/

.counter h2 {color: var(--gwgkashmir) !important; font-size: 48px; padding-bottom: 70px }
.counter-number {color: var(--gwgkashmir) !important; font-size: 90px; display: block; height: 70px; text-align: center;  }
.counter-title {color: var(--gwgkashmir) !important; font-size: 21px; text-align: center }
.counter {padding: 70px 0 85px 0 !important;}


/* Leistungen mit Icon */
.leistungen {
  padding: 70px 0 85px 0 !important;
}

.haverie,
.ansprechpartner,
.service,
.gaestewohnungen,
.reparatur {
  display: flex !important;
  align-items: center;
  font-size: 24px !important;
  height: 40px;
}

h3.haverie::before,
h3.ansprechpartner::before,
h3.service::before,
h3.gaestewohnungen::before,
h3.reparatur::before {
  display: inline-block;
  margin-right: 12px;
  flex-shrink: 0;
  min-width: 40px;
  height: 40px;
}

/* Icons für die einzelnen Leistungen */
h3.haverie::before {
  content: url('/wp-content/themes/Impreza-child/elements/icon-service-haverie.svg');
}

h3.ansprechpartner::before {
  content: url('/wp-content/themes/Impreza-child/elements/icon-service-ansprechpartner.svg');
}

h3.service::before {
  content: url('/wp-content/themes/Impreza-child/elements/icon-service.svg');
  width: 60px;
}

h3.gaestewohnungen::before {
  content: url('/wp-content/themes/Impreza-child/elements/icon-service-gaestewohnung.svg');
  width: 44px;
}

h3.reparatur::before {
  content: url('/wp-content/themes/Impreza-child/elements/icon-service-reparaturanzeige.svg');
}


/*Pfeil mit Freisteller Mitglied werden*/
.cutout-left {position: absolute; height: 380px; bottom: -304px}
.headline-left {position: absolute;}
.arrow-with-cutout-left {background-image: url('/wp-content/themes/Impreza-child/elements/pfeilelement-klein.svg'); background-repeat: no-repeat; background-size: cover !important; height: 330px !important; position: relative; float: left;max-width: 1585px;  width: 100%; background-position: right center; margin-top: -300px;}
.headline-with-shadow {text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.5); color: var(--gwgkashmir); font-size: 54px; line-height: 1.2; max-width: 540px; padding-top: 95px !important;}

/*Pfeil mit Freisteller Karriere*/

.overlap-row .headline-with-shadow {text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.5); color: var(--gwgkashmir); font-size: 54px; line-height: 1.2; max-width: 820px; padding-top: 0px !important;}
.overlap-row.g-cols.cols_1-2 {
    grid-template-columns: 0.8fr 2.2fr;
}


.overlap-row-hidden {
 position: relative;
 
  overflow: hidden; /* Verhindert, dass das Bild unten überläuft */
}


#immobilienliste {background-color: var(--gwgkashmir)}



.overlap-row  {
 padding-top: 70px;
  height: 430px; /* Höhe der Zeile nach Bedarf anpassen */
padding-left: calc((1920px - 1350px) / 2); /* = 335px */
}


.overlap-image img {
 position: absolute;
  top: -130px; /* Bild ragt oben um 50px heraus */
  left: 0;
  right: 0;
  bottom: 0; /* Das Bild endet mit der unteren Kante des Containers */
  height: 547px; /* Bildhöhe bleibt proportional */
  width: 100%; /* Bild passt sich der Breite des Containers an */
  clip-path: inset(0 0 0 0); /* Bild wird an den unteren Rand des Containers abgeschnitten */
}


/* ==============================
   5. Startseite
   ============================== */

.headerimage-images {
	float: right;
	
}


.headerimage-images img {
	margin-left: 10px;
	margin-top: 20px
	
}



.headerimage-images-mobile {
margin: 63px 0px 0px 0px !important;
	width: 100% !important;
	height: 170px;
	display: flex; align-items: flex-end;
}

.polygon-nordmanngruen {
  fill: var(--nordmanngruen); /* Dein Grün */
  display: none; /* Standardmäßig unsichtbar */
}

.headerimage-images-mobile img {margin-left: 30%; width: 100%; height: 240px; margin-top: -100px}

.headerimage-content{
 padding: 63px 0px 0px 0px !important;
	width: 503px !important;
}
.headerimage {padding: 0px !important; height: 708px;  }
.newsticker {padding: 25px 0px !important; font-size: 24px}
.headerimage-text {font-size: 24px !important; line-height: 36px; }
.highlight, .maigruen {color: var(--maigruen)}

.svg-wrapper {
  width: 1249.7px;
 
  margin: 0 auto;
}

.svg-wrapper-small {
  float: right;
  width: 728px;
  margin: 0px;
}



.svg-wrapper svg, .svg-wrapper-small svg {
  width: 100%;
  height: auto;
  display: block;
}

/* ==============================
   6. Seiten
   ============================== */







/*Download*/
#infos-downloads {position: relative;
  
  overflow: hidden;}

/* Inhalt nach vorne holen */
#infos-downloads .wpb_column,
#infos-downloads .wpb_wrapper {
  position: relative;
  z-index: 2;
}


#infos-downloads::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 210px; /* Oberes Drittel */
  background: white;
  z-index: 1;
}

a.download-file  {color: var(--gwgdunkelgruen) !Important; text-decoration: none; float:right !important;}
a.download-file::after {content: url('/wp-content/themes/Impreza-child/elements/download.svg') !important; width: 29px; margin-left: 16px  }
.download-tab .vc_column-inner {padding-left: 0px}
.download-tab {padding: 35px 0px; border-bottom: 1px solid var(--gwgdunkelgruen)}
.download-file, .download-title {font-size: 21px}
#infos-downloads .w-tabs-section-content {padding: 190px 0px 120px 0px !important; border: none !Important;}
.w-tabs-item.active {border-bottom: 4px solid var(--orange); background-color: transparent !Important}
.w-tabs-item {border-bottom: 1px solid var(--orange); border-radius: 0px !Important; margin-right: 50px !important}

/*Wohnen*/

.teaserimage {
  height: 458px; /* Deine gewünschte Höhe */
  overflow: hidden;
  z-index: 1;
  background-size: cover; /* Bild so anpassen, dass es das div abdeckt */
  background-position: center center; /* Bild zentrieren */
  background-repeat: no-repeat; /* Wiederholung verhindern */
}


.teaserbox-headline { background-image: url('/wp-content/themes/Impreza-child/elements/pfeilelement-klein.png');
    background-size: cover;
    background-repeat: no-repeat;  width: 102.8%; height: 130px;
    background-position: right bottom;
     display: flex;
    padding: 40px 20px 45px 20px;
    align-items: center;
    color: white;
    text-decoration: none;
    border-radius: 0px;
    text-align: center;
	margin-top: -58px;
	justify-content: center;
	font-size: 30px;
	position: relative;
	z-index: 10;  
	margin-left: -2px;
		
}




.teaserbox:hover .teaserbox-headline {
  background-image: url('/wp-content/themes/Impreza-child/elements/pfeilelement-klein-hover.png');
}

.teaserimage img {
  width: 110%;
  height: 110%;
  object-fit: cover; /* Bild so anpassen, dass es das div ausfüllt */
  object-position: center center; /* Bild zentrieren */
}

/*Service*/

.orange-headline-arrow {color: var(--orange); font-size: 30px; letter-spacing: 0.2px; display: inline-flex}
.orange-headline-arrow:after {
 content: url('/wp-content/themes/Impreza-child/elements/pfeil-button-orange.svg') !important; margin-left: 25px; width: 26px 
}


.arrow-wrapper {
  width: 100%;
  background-image: url('/wp-content/themes/Impreza-child/elements/pfeilelement-klein-1.png');
  background-repeat: no-repeat;
  background-position: calc(0% - 185px) center;
  background-size: cover;
  position: relative;
  height: 220px;
  margin-top: -95px;
  display: flex;
	justify-content: center; /* horizontal zentriert */
  align-items: center;
	/*max-width: 1585px;*/
}



.arrow-content {
  width: 100%;
  max-width: 1250px; /* oder z.B. 1170px je nach Theme */
  margin: 0 auto;
  padding: 0 20px;
   color: var(--orange); /* Beispiel-Farbe */
  font-size: 30px;
	margin-top: -30px !important;
}

.arrow-wrapper:hover {
  background-image: url('/wp-content/themes/Impreza-child/elements/pfeilelement-klein-1-hover.png');
}


/*Wohngebiete*/

#impressionen .w-hwrapper {justify-content: space-between !important;}
#impressionen .w-image img, .w-image picture {width: 100% !Important;}
#impressionen .col-1 .caption, #impressionen .col-3 .caption {margin-top: -6px !important; margin-bottom: 25px }
#impressionen .col-1 img, #impressionen .col-2 img, #impressionen .col-3 img {object-fit: cover !important;}


.caption {margin-top: -6px !important; font-size: 14px !important;}


.slide-content {
    display: flex;
    width: 100%;
  
	align-items: flex-start;
	text-align: left;
	justify-content: space-between;
	flex-direction: row; /* Horizontale Ausrichtung */
height: 100%
	
	
}



.swiper-wrapper {align-items: flex-start}
.swiper-slide.swiper-slide-active {display: block !important}
.swiper-button-next  {right: -40px !Important; top: 70px; z-index: 500}
.swiper-button-prev {left: -40px !Important; top: 70px;  z-index: 50}
.swiper-button-next:after, .swiper-button-prev:after {color: #fff !important;}
.swiper-container {
    width: 100%;
    
    margin: 20px auto;
}


.gaestewohnung-details .w-btn {margin-top: 30px; margin-bottom: 40px}
ul.legende, .details-gw ul {margin-left: 0px !important;}

.legende li {
    font-weight: normal;
    transition: font-weight 0.2s;
    cursor: pointer;
}

/*
.legende li:before {
	content: url('/wp-content/themes/Impreza-child/elements/arrow-right-maigruen.svg') !important;
	width: 20px
}*/

.legende li.highlight, li.highlight-text {
    
    color: #0F403F;
}


.swiper-container {
    width: 100%;
   transition: height 0.3s ease;
    margin: 20px auto;
}




.highlight-area {
    fill: #0F403F !important; /* Dunkelgrüne Füllung */
    stroke: #f9f6ee  !important; /* Keine Linie */
    fill-opacity: 1; /* Volle Deckkraft */
    transition: fill 0.2s ease-in-out;
}


.swiper-slide {
    padding: 20px;
    background-color: transparent;
    text-align: center;
    font-size: 18px;
    border-radius: 10px;
    color: #fff;
	display: flex;
    align-items: flex-start; /* Ausrichtung der Elemente nach oben */
    justify-content: flex-start; /* Elemente werden nebeneinander angeordnet */
    
	
}

.swiper-slide.swiper-slide-next, .swiper-slide.swiper-slide-prev {opacity: 0}

.stadtteil {display: block; margin-bottom: 30px; font-size: 36px }

.slide-text {
    width: 50%;
    font-size: 1.2rem;
	
	flex: 1;
    margin-right: 10px; /* Optionaler Abstand zum Icon */
}



.slide-image {
    width: 45%;
	 margin-left: auto; /* Bild nach rechts schieben */
    align-self: flex-end; /* Bild nach unten schieben */
}

.slide-icon {
    width: 4%;
	display: flex;
	height: 40px
}

.slide-image img {
    width: 100%;
    height: auto;
    border-radius: 0px; /* Abgerundete Ecken, optional */
}


/*Kontakt*/
.arrow-wrapper.contact {
  width: 100%;
  background-image: url('/wp-content/themes/Impreza-child/elements/pfeilelement-links.svg');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
  position: relative;
  height: 600px;
  display: flex;
  align-items: center;
  max-width: 1365px;
  margin: 0 auto;
  padding-left: calc((1920px - 1250px) / 2); /* = 335px */
  box-sizing: border-box;
  margin-top: -260px;
	float: left;
}

.arrow-content.contact {
  max-width: 610px;
  margin-left: 0; /* beginnt direkt beim Layout */
  color: #fff;
  font-size: 18px;
	padding: 0px !important
}

.arrow-wrapper.contact2 {
  width: 100%;
  background-image: url('/wp-content/themes/Impreza-child/elements/pfeilelement-rechts-gruen.svg');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: cover;
  position: relative;
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  max-width: 945px;
  margin: 0 auto;

  padding-right: calc((1920px - 1250px) / 2); /* = 335px */
  box-sizing: border-box;
  margin-top: -457px;
	float: right
}



.arrow-content.contact2 {
  min-width: 388px; /* Mindestbreite sichern */
  max-width: 388px; /* Optional: falls nicht größer werden soll */
  flex-shrink: 0; /* Verhindert, dass flexbox die Breite schrumpft */
  color: #fff;
  font-size: 18px;
  margin-left: -100px !important
	
}

/* ==============================
   7. Beiträge / Wohnungen / Wohnungseinzelansicht
   ============================== */
/*Beiträge*/


.filter-dropdown ul > li::before {
      background-image: url('/wp-content/themes/Impreza-child/elements/arrow-right-orange.svg') !important;
    
}

.w-grid.type_grid .w-grid-list {margin-top: 80px !important;}
body.page-id-2 .w-grid.type_grid .w-grid-list {
  margin-top: 0 !important;
}

.category-filter {text-align: left; background-color: transparent}
.filter-button {text-align: left; text-transform: uppercase; border: 2px solid var(--gwgdunkelgruen); font-size: 14px; width: 290px !important; float: right !important; height: 42px !Important; padding: 0px 10px 0px 30px !Important; background: transparent; }
.category-label:after {
    content: url('/wp-content/themes/Impreza-child/elements/filter.svg') !important; border: 0px solid !important; top: 20% !important; width: 28px; margin-right: 20px; display: inline-flex; margin-left: 10px;
}

.post_content ul {margin-left: 0px}
.post-thumbnail-title {
    text-align: left;
    font-size: 14px;
	color: var(--gwgdunkelgruen);
    
    margin-top: 8px;
}

.filter-wrapper {
    position: relative;
    display: inline-block;
	float: right
}



.filter-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--gwgkashmir);
    border: none;
    width: 200px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    z-index: 1000;
   width: 290px
}

.filter-dropdown.open {
    display: block;
}

.filter-dropdown ul {
    list-style: none;
    padding: 10px 10px 10px 30px !important;
    margin: 0;
	
}

.filter-dropdown ul li a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #333;
	
}

.filter-dropdown ul li  {
font-size: 16px !important;
	}

.filter-dropdown ul li a:hover {
    background-color: #f0f0f0;
}


/*Wohnungsübersicht*/

.w-hwrapper.property-details.no-border {border: 0px solid var(--gwgdunkelgruen); justify-content: space-between !important; display: flex !important; padding-bottom: 20px !Important;}
.property-location {border: 0px solid var(--gwgdunkelgruen); border-bottom: 4px solid var(--gwgdunkelgruen); }
.property-details {border: 0px solid var(--gwgdunkelgruen); border-bottom: 1px solid var(--orange); padding-bottom: 20px}
.property-col1 {flex: 0.8; }
.property-col2 {border: 0px solid var(--gwgdunkelgruen); border-right: 1px solid var(--gwgdunkelgruen); border-left: 1px solid var(--gwgdunkelgruen); flex: 1.5;   }
.property-col3 {flex: 2.5; }
.small-text {font-size: 14px; text-align: center; margin-bottom: 0px !important;}
.property-col1 .small-text {text-align: left !important;}
._immobilien_rooms, ._immobilien_living_area {text-align: center;}
._immobilien_price {text-align: right}
.property-details.no-border.col-1 {flex: 0.8;}
.middle {flex: 1}

/*Blättern zwischen Beiträgen / Wohnungen*/


.immo-pagination  {
	display: flex;
	font-size: 14px;
	padding-top: 50px;
	justify-content: space-between;
}

.immo-pagination a {
	letter-spacing: 0.25;
	text-transform: uppercase;
	color: var(--gwgdunkelgruen)
}

.prev, .next {display: flex;
    align-items: center;  /* Vertikale Ausrichtung */
    justify-content: center;  /* Horizontale Zentrierung */}
.prev a, .next a {
    display: flex;  /* Damit der Link als Flexbox agiert */
    align-items: center;  /* Vertikal zentrieren */

}

.prev a::before {content: url('/wp-content/themes/Impreza-child/elements/arrow-left-orange.svg') !important; width: 29px; display:inline-block; margin-right: 20px; }
.next a::after {content: url('/wp-content/themes/Impreza-child/elements/arrow-right-orange.svg') !important; width: 29px; margin-left: 20px; display:inline-block; }



/*Style Einzelansicht*/
.titel-expose-details {align-items: center !Important; padding-bottom: 16px; border-bottom: 4px solid var(--gwgdunkelgruen) !Important; margin-bottom: 40px !Important; font-size: 34px}
.titel-liste-details {align-items: center !Important; padding-bottom: 16px; font-size: 22px}



.headline-contactbox {font-size: 30px !Important; border-top: 4px solid #fff; padding-top: 35px; margin-top: -10px; padding-bottom: 35px}
.contactbox {background-color: var(--gwgdunkelgruen); color: white; padding: 24px 24px 90px 24px; margin-top: 90px}
.contactperson {margin-right: 10px !important; }
.role {}
.w-hwrapper.profilbild.valign_top {margin-bottom: 0px !important;  align-items: flex-end !important; flex-direction: column !important; margin-top: -80px !important; margin-left: 30px !important;}
.contactbox a:hover {color: var(--maigruen); }
.contactbox a {text-decoration: underline !important; color: #fff !important;}
.energy-details a {text-decoration: underline}



ul.equipment-list {
    list-style: none; /* Standard-Punkte der Liste entfernen */
    padding: 0;
Margin-left: 0px;
}

ul.equipment-list li, .energy-details div, .energy-details a {
    display: flex;
    align-items: center; /* Sorgt dafür, dass das Icon oben beginnt */
    gap: 8px; /* Abstand zwischen Icon und Text */
    margin-bottom: 10px; /* Abstand zwischen den Listenpunkten */
}



ul.equipment-list li::before, .energy-details div::before, .energy-details a::before {
    content: "";
    display: inline-block;

    width: 20px;
    height: 20px;
    background-image: url('/wp-content/themes/Impreza-child/elements/arrow-dunkelgruen.svg');
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 0.8rem;
}






.immo-details {padding-bottom: 18px }
.immo-details .wpb_text_column {width: 33%}
.immo-details.secondar .wpb_text_column {width: 3%}
.immo-details.secondar .post_custom_field {font-size: 18px !important;}
.immo-details .post_custom_field {font-size: 24px}
.immobild img { width: 110% !important;
    height: 100% !important;
    object-fit: cover !important;  display: block; max-width: 110%}
.gesamt {margin-top: 10px !important; border-top: 1px solid #FFB649; padding-top: 24px}



/*Wohnungen - Galerie Einzelseite*/
.immowelt-galerie {
  max-width: 900px;
  margin: 0 auto;
}

.immowelt-galerie-main img {
  width: 100%;
  border-radius: 0px;
  
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.immowelt-galerie-thumbs {
    display: flex;
    gap: 17px;
    margin-top: 10px;
}

.immowelt-galerie-thumbs a img,
.immowelt-thumb-more .thumb-overlay {
    width: 108px;
    height: 72px;
    object-fit: cover;
    
    border-radius: 0px;
}

.immowelt-galerie-thumbs img:hover {
  transform: scale(1.05);
}


.immowelt-thumb-more {
    position: relative;
    width: 108px;
    height: 72px;
    border-radius: 0px;
    overflow: hidden;
	
}

.thumb-overlay {
    background-color: #0F403F;
    width: 100%;
    height: 100%;
    border-radius: 4px;

    display: flex;
    align-items: center;  /* vertikal zentrieren */
    justify-content: center;  /* horizontal zentrieren */
  
}

.thumb-overlay span {
        text-align: center;
    color: #FFB649;
    padding: 5px 10px;

  
    font-size: 21px;
	
}


/* ==============================
   8. Suche
   ============================== */


/* ==============================
   9. Formulare
   ============================== */

/*Suchformular*/

.w-form-row.for_agreement label, .w-form-row.for_checkboxes label, .w-form-row.for_radio label {align-items: flex-start !important}

.w-form textarea {margin-bottom: 24px !important;}

.w-form .btn.orange {
margin-top: 30px !important;}

.immobilien-suchformular label {color: var(--gwgkashmir); }
.counter .more {
		 margin-top: -20px !important;}

input[name="zimmer_min"], input[name="zimmer_max"], input[name="max_miete"] {
  border: none;
	border-bottom: 1px solid var(--gwgkashmir);
  background-color: transparent;
	border-radius: 0px;
	width: 15%;
	color: var(--gwgkashmir);
	-webkit-appearance: none;  /* Entfernt die Pfeile in Webkit-basierten Browsern (Chrome, Safari) */
  -moz-appearance: textfield;  /* Entfernt die Pfeile in Firefox */
  appearance: none;  /* Entfernt die Pfeile auch in anderen Browsern */
	margin-left: 18px;
	margin-right: 32px;
	padding: 0px 5px
}

.zimmer {width: 36%; float: left}
.miete {width: 31%; float: left}
/* Entfernt die Auf- und Ab-Pfeile (Spin-Buttons) in Chrome/Safari */
input[name="zimmer_min"]::-webkit-outer-spin-button,
input[name="zimmer_min"]::-webkit-inner-spin-button, input[name="zimmer_max"]::-webkit-outer-spin-button,input[name="zimmer_max"]::-webkit-inner-spin-button, input[name="max_miete"]::-webkit-inner-spin-button, input[name="max_miete"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.immobilien-suchformular input {
    min-height: 0px !important; 
  line-height: 0px !important;}

.w-search.layout_fullwidth.active .w-search-form {
    height: 99%;
}



/* Wenn das Feld im Fokus ist (beim Klicken oder Tippen) */
input[name="zimmer_min"]:focus, input[name="zimmer_max"]:focus{
  outline: none;  /* Entfernt den Standard-Fokusrahmen */
  border-bottom: 2px solid #fff;  /* Weißer Strich bleibt */
  color: #fff;  /* Weißer Text bleibt */
  background-color: transparent;  /* Keine Hintergrundfarbe */
}

input[name="max_miete"] {width: 120px; margin-right: 40px}


/* Fokusrahmen für Formularfelder ändern */
input:focus, textarea:focus, select:focus {
    outline: none !important;
    border: 1px solid var(--orange) !important;
    box-shadow: 0 0 5px rgba(255, 102, 0, 0.5) !important;
}







#kontaktformular {border-bottom: 4px solid var(--gwgdunkelgruen) !important;}
#kontaktformular, #kontaktformular h1 {color: var(--gwgdunkelgruen) !important;}
#kontaktformular .for_agreement.required {margin-top: 20px !important;}
input[type="file"] {background-color: transparent !important; border-radius: 0px !Important; color: #fff}
#kontaktformular .w-form textarea, 
#kontaktformular .w-form input[type="text"], 
#kontaktformular .w-form input[type="email"], 
#kontaktformular .w-form input[type="checkbox"]  {
border: 1px solid rgba(12, 125, 90, 1) !important;
opacity: 1 !important;
background-color: transparent !important; border-radius: 0px !important;}
#kontaktformular .w-form input[type="checkbox"] {
border: 1px solid var(--orange) !important;
opacity: 1 !important;
background-color: transparent !important;}
input[type=checkbox]:before {color: var(--gwgdunkelgruen) !important; }
.w-form-row.for_info p {border-bottom: 2px dotted var(--orange) !important; display: flex; height: 30px; align-items: center; margin-bottom: 20px}
.w-form textarea, .w-form input[type="text"], .w-form input[type="email"], .w-form input[type="checkbox"] {
border: 1px solid rgba(12, 125, 90, 1) !important;
opacity: 1 !important;
background-color: rgba(249, 246, 238, 1) !important; border-radius: 0px !important;}
.w-form-row-label {font-size: 16px !important; }
.w-form-row {margin-bottom: 10px !important;}
.textlink-formular {color: var(--nordmanngruen); text-decoration: underline}
.textlink-formular:hover {color: var(--maigruen); text-decoration: underline !important;}
.w-form input[type="text"], .w-form input[type="email"] {
height: 40px !important; }
a.mail {color: var(--nordmanngruen) !important;}
.w-form input[type="checkbox"] {
height: 24px !important; }



/*Dateiupload stylen und ergänzen*/

/* --Verstecke das originale Input-Feld */
.w-form-row.for_file input[type="file"] {
  opacity: 0;
  position: absolute;
  z-index: 2;
  cursor: pointer;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
	 z-index: 99;
}

.w-form-row.for_file .w-form-row-field {
  position: relative;
  display: inline-flex;
  align-items: center;
	justify-content: center;
  background-color: transparent;
  color: var(--gwgdunkelgruen) !important;	
  /*padding: 12px 20px;*/
	padding: 12px 20px ;
  border-radius: 0px;
  font-size: 16px;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  min-width: 250px;
  white-space: nowrap;
  text-overflow: ellipsis;
  
	border: 2px solid var(--gwgdunkelgruen) !important;
	width: auto;

}

.w-form-row.for_agreement.required {margin-top: 10px !important;}

.w-form-row.for_file .w-form-row-field::before {
  content: url('/wp-content/themes/Impreza-child/elements/upload.svg'); /* Beispiel für ein Icon */
  margin-right: 10px; 
  display: inline-block;
  width: 20px; 
  height: 20px; 
}


.w-form-row.for_file .w-form-row-field.has-file::before {
  content: url('/wp-content/themes/Impreza-child/elements/upload-white.svg');
}

/* --Standardtext für den Fall, dass noch keine Datei ausgewählt wurde */
.w-form-row.for_file .w-form-row-field::after {
  content: 'Datei auswählen' !important;
  font-size: 14px;
  color: var(--gwgdunkelgruen);
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
	text-transform: uppercase
}


/* --Der Dateiname im Button wird angezeigt, wenn eine Datei ausgewählt wurde */
.w-form-row.for_file .w-form-row-field[data-file-name]:after {
  content: attr(data-file-name); /* Zeigt den Dateinamen an */
}


/* --Sichtbar, wenn Datei ausgewählt */
.w-form-row.for_file .w-form-row-field.has-file {
  background-color: var(--gwgdunkelgruen);
  color: #fff !important;
  border-color: var(--gwgdunkelgruen);
}




/* --Text im Button */
.w-form-row.for_file .w-form-row-field.has-file::after {
  content: attr(data-file-name);
  color: #fff !important;
  font-weight: bold;
  max-width: 100%;
	content: none !important;
}


.w-form-row.for_file .file-name {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  color: var(--gwgdunkelgruen);
  margin-left: 10px;
}

.w-form-row.for_file .w-form-row-field.has-file .file-name {
  color: #fff;
  font-weight: bold;
}




/* ==============================
   10. Footer
   ============================== */




#menu-wichtige-links li {
    display: flex;
    align-items: flex-start; /* Sorgt dafür, dass das Icon oben beginnt */
    gap: 8px; /* Abstand zwischen Icon und Text */
    margin-bottom: 10px; /* Abstand zwischen den Listenpunkten */
}

#menu-wichtige-links li::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url('/wp-content/themes/Impreza-child/elements/arrow-weiss.svg') !important;
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 0.8rem;
}

#page-footer {font-size: 16px !Important; letter-spacing: 0.5px}
.footer-top {padding: 60px 0px !Important;}
.footer-bottom {padding: 0px 0px !Important; font-size: 14px !Important;}
.headline-footer { display: flex; align-items: flex-end; height: 85px; margin-bottom: 15px}





/* ==============================
   11. Media Queries (Responsives Design)
   ============================== */


/* ========== Smartphones (max-width: 767px) ========== */
@media screen and (max-width: 767px) {

  /* Allgemeine Layout-Anpassungen */
  .vc_column_container > .vc_column-inner {
    padding: 30px 10px;
  }
	
	
	.arrow-content.contact, .arrow-content.contact2 {
    min-width: 200px;
    max-width: 100%;
    flex-shrink: 0;
    color: #fff;
    font-size: 18px;
		padding-left: 0px !important;
    margin-left: 0px !important;
}
	
	.arrow-content.contact .headline {padding-top: 40px
	}
	
	.contact .l-section-h.i-cf, .contact2 .l-section-h.i-cf {padding: 80px 50px !Important;}
	
	.immo-pagination a {
    letter-spacing: 0.25;
    text-transform: uppercase;
    color: var(--gwgdunkelgruen);
    width: 100%;
    display: block;
    padding: 20px;
		text-align: center;}
	
	.immo-pagination {
		display: block; padding-top: 10px}
	.street.regular, .immo-ort {font-size: 18px}
	#immobilienliste .w-hwrapper.usg_hwrapper_4.align_none.valign_top {height: 200px !Important; margin-bottom: 0px !Important;}
	
	 .btn.standard.arrow,
  .more {
    width: 100% !important;
    white-space: normal;
  }
	
	
	#immmobilienliste .vc_column-inner {padding: 20px 0px !Important;}
	
	.benefits .vc_column-inner {padding: 20px 20px !Important;}
	
	.mobil-wohnungssuche a,
  .mobil-haverie a,
  .mobil-contact a  { 
	  width: 95%;}
	
	.btn.standard.arrow .w-btn-label {
    width: 190px !important;
  }
	
	 .w-nav.type_mobile .menu-item > a.w-btn {
    width: 95% !important;
    white-space: normal;
		 padding: 20px 20px 17px;
  }


  .arrow-wrapper.contact,
  .arrow-wrapper.contact2 {
    height: auto;
    margin-top: 0;
    background-position: center center;
  }

  .arrow-wrapper.contact {
    padding-left: 0;
  }

  .arrow-wrapper.contact2 {
    padding-left: 100px;
  }

  .arrow-wrapper.contact .vc_column-inner {
    padding-left: 0;
  }

  .arrow-content.contact,
  .arrow-content.contact2 {
    font-size: 16px;
    max-width: 100%;
    padding: 0 20px;
  }

  .arrow-content.contact2 {
    padding-bottom: 50px;
    margin-left: 0;
  }

  
	

  /* Header */
  .headerimage-content { width: 95%; }
  .headerimage { height: auto; }
  .headerimage-text {
    font-size: 24px !important;
    line-height: 36px;
    margin-top: 100px;
  }

  h1.start {
    font-size: 50px !important;
    margin-top: 90px;
  }
	
	/*Freisteller Karriere mobil*/
		.overlap-row-hidden .vc_column-inner {padding: 0px !Important;}
	
	.overlap-image img {
 position: absolute;
  top: -450px;
  left: 0;
  right: 0;
  bottom: 0; /* Das Bild endet mit der unteren Kante des Containers */
  height: 380px; /* Bildhöhe bleibt proportional */
  width: 100%; /* Bild passt sich der Breite des Containers an */
  clip-path: inset(0 0 0 0); /* Bild wird an den unteren Rand des Containers abgeschnitten */
}
	
	.overlap-row-content {
margin-top: -200px
}
	
	.overlap-image   {

}
	
	.overlap-row.g-cols.cols_1-2 {
    grid-template-columns: 1fr 2 fr;
}

	.overlap-row {
    padding-top: 70px;
    height: 630px;
    padding-left: 40px;
		padding-right: 40px;
		margin-top: 350px
}
	
	
	
	
/*Freisteller Mitglieder mobil*/
.headline-left {
  align-items: flex-start !important;
  left: 20px;
}

.headline-left a.w-btn {
  align-items: flex-start !important;
  left: 0px;
  padding: 12px 15px;
}

.arrow-with-cutout-left {
  height: 208px !important;
  margin-top: 190px;
  margin-bottom: 30px;
}

.arrow-content {
  width: 100%;
  margin-top: -65px !important;
}

.arrow-with-cutout-left .vc_column_container > .vc_column-inner {
  padding: 20px !important;
}

.headline-with-shadow {
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
  color: var(--gwgkashmir);
  font-size: 36px;
  line-height: 1.2;
  padding-top: 60px !important;
  text-align: left;
}

.cutout-left {
  left: -7%;
  height: 230px;
  bottom: 40px;
}
	
.polygon-nordmanngruen {
    fill: var(--nordmanngruen) !important;
    display: block !important;
  }


  /* Inhalte & Module */
  .service .vc_column-inner { padding-bottom: 20px; }
  .pt-120 .vc_column-inner { padding-top: 90px !important; }
  .pb-120 .vc_column-inner { padding-bottom: 90px !important; }

  .pt-80 .vc_column-inner { padding-top: 50px !important; }
  .pt-200 .vc_column-inner { padding-top: 120px !important; }
  .pb-100 .vc_column-inner { padding-bottom: 20px !important; }

  .termine .vc_column-inner,
  .l-section.wpb_row,
  #page-footer .vc_column-inner {
    padding: 0 !important;
  }

	.benefits .l-section-h.i-cf {padding: 40px 20px !important;}
  .leistungen,
  #page-footer .footer-top  {
    padding: 40px 20px !important;
  }

	 #page-footer .footer-bottom, .l-section-h.i-cf {
    padding: 10px 20px 10px 20px !important;
  }
	
  .leistungen .vc_column-inner {
    padding: 40px 20px !important;
  }

  /* SVG */
  .acf-image-svg {
    width: 100%;
    height: auto;
  }

  .svg-wrapper svg {
    height: 252px;
    display: block;
  }

  .svg-wrapper svg image {
    display: none !important;
  }

 



  /* Weitere Module */
  .breadcrumb { margin-top: 50px !important; }
  .floating-buttons { display: none !important; }
  .counter h2 { padding-bottom: 30px !important; }
  .counter .btn.standard.arrow {
    margin-top: 20px;
    margin-bottom: 40px;
  }

  .counter .vc_column-inner {
    padding: 70px 20px !important;
  }

  .zimmer,
  .miete {
    width: 80% !important;
    margin-bottom: 20px;
  }

  input[name="max_miete"] {
    margin-left: 0 !important;
    margin-top: 20px;
  }

  .zimmer label,
  .miete label {
    margin-bottom: 20px;
    display: block;
  }

  .immobilien-suchformular .w-btn {
    margin-top: 20px !important;
    margin-left: 0 !important;
  }

  

  .newsticker {
    font-family: 'Satoshi-Bold' !important;
  }

 

  .height-150 { height: auto; }

  .g-cols:not([style*="--columns-gap"]) {
    gap: 0rem !important;
  }
}




/* ========== Smartpones/Tablets ( bis 1024px) ========== */



/* Navigation & Buttons */
 
	  /* Menüstruktur */

@media screen and (max-width: 1024px) {
  .us_menu_2 .menu {
    display: inline-block !important;
    float: left !important;
  }

  .us_menu_2 .menu > li {
    float: left !important;
    padding-right: 20px !important;
  }

  ul.w-nav-list.level_2 {
    background-image: none !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    box-shadow: none;
    margin-top: 0;
    width: 100%;
    padding: 10px;
    left: -50% !important;
    height: auto !important;
  }

  ul.w-nav-list.level_2::after {
    box-shadow: none;
  }

  ul.w-nav-list.level_1 li {
    padding: 10px;
    border-bottom: 1px solid var(--gwgdunkelgruen) !important;
  }

  ul.w-nav-list.level_1 li ul.w-nav-list.level_2 li {
    width: 100%;
    line-height: 1.2;
    height: auto;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--orange) !important;
  }

  ul.w-nav-list.level_1 li ul.w-nav-list.level_2 li:last-child {
    border-bottom: none !important;
  }

  ul.w-nav-list.level_2 li a {
    font-size: 16px !important;
  }

  .w-nav-arrow {
    float: right;
  }
	
 
	 .w-nav.type_mobile .menu-item > a.w-btn {
    width: 95% !important;
    white-space: normal;
		 padding: 20px 20px 17px;
  }

  
	
	
	.mobil-wohnungssuche a,
  .mobil-haverie a,
  .mobil-contact a  {
    display: flex !important; 
	
	  align-items: center;
	 justify-content: center
  }
	
	.w-nav-anchor.w-btn>.w-nav-title {display: flex}
	
	li.mobil-contact .w-nav-title:before, li.mobil-haverie .w-nav-title:before, li.mobil-wohnungssuche .w-nav-title:before  { 
  margin-right: 20px;
  width: 20px;}
	
	li.mobil-contact .w-nav-title:before {content: url('/wp-content/themes/Impreza-child/elements/icon-slide-ansprechpartner.svg') !important; }
	li.mobil-haverie .w-nav-title:before {content: url('/wp-content/themes/Impreza-child/elements/icon-slide-haverie.svg') !important; }
	li.mobil-wohnungssuche .w-nav-title:before {content: url('/wp-content/themes/Impreza-child/elements/icon-slide-wohnungssuche.svg') !important; }

}

/* ========== Tablets (768px – 1024px) ========== */



@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  /* CSS für Tablets im Hochformat */
}


@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  /* CSS für Tablets im Querformat */
}

@media (min-width: 768px) and (max-width: 1024px) {
	
	
	
	 .btn.standard.arrow,
  .more {
    width: 80% !important;
    white-space: normal;
  }
	
	
	
	.cutout-left {
    position: absolute;
    height: 380px;
    bottom: 50px;
	
}
	.overlap-row-hidden .vc_column-inner {padding: 0px !Important;}
	
	.overlap-image img {
 position: absolute;
  top: 0px; /* Bild ragt oben um 50px heraus */
  left: 0;
  right: 0;
  bottom: 0; /* Das Bild endet mit der unteren Kante des Containers */
  height: 540px; /* Bildhöhe bleibt proportional */
  width: 100%; /* Bild passt sich der Breite des Containers an */
  clip-path: inset(0 0 0 0); /* Bild wird an den unteren Rand des Containers abgeschnitten */
}
	
	.overlap-row.g-cols.cols_1-2 {
    grid-template-columns: 1fr 2 fr;
}

	.overlap-row {
    padding-top: 70px;
    height: 430px;
    padding-left: 40px;
}
	
	
	
	.headline-with-shadow {
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
  color: var(--gwgkashmir);
  font-size: 45px;
  line-height: 1.2;
  padding-top: 60px !important;
  text-align: left;
}
	
	
	.benefits .g-cols.cols_2 {
    grid-template-columns: repeat(1, 1fr);
}  
	
	.benefits .vc_column-inner {padding: 20px 40px !important;}
	
	.headerimage-images .vc_column-inner {padding-bottom: 0px !important;}


.headerimage-images img {margin-left: 150px; width: 100%; height: auto; margin-top: 5px}

	.btn.standard.arrow .w-btn-label {
    width: 80% !important;
		justify-content: center
  }
	
  .vc_column_container > .vc_column-inner {
    padding: 50px 40px;
  }
	
	
	.newsticker .vc_column-inner {
    padding: 20px 40px !important;
  }
	
	
	 .w-nav.type_mobile .menu-item > a.w-btn {
    width: 50% !important;
    white-space: normal;
		 padding: 20px 20px 17px;
  }

	
	.floating-buttons {display:none}

  .g-cols.cols_3,
  .g-cols.cols_1-2 {
    grid-template-columns: repeat(1, 1fr);
  }

  .g-cols.cols_4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .headerimage-content { width: 95% !important; }
  .headerimage { height: auto; }
  .headerimage-text {
    font-size: 24px !important;
    line-height: 36px;
    margin-top: 50px;
  }

  .leistungen .vc_column-inner {
    width: 60%;
    margin: 0 auto;
  }

  .zimmer,
  .miete {
    width: 50% !important;
    margin-bottom: 20px;
  }

  .immobilien-suchformular .w-btn {
    margin-top: 20px !important;
    margin-left: 0 !important;
  }

  input[name="max_miete"] {
    margin-left: 0 !important;
    margin-top: 20px;
  }
	
	
	

  .zimmer label,
  .miete label {
    margin-bottom: 20px;
    display: block;
  }

  .counter {
    padding: 70px 30px 85px 30px !important;
  }

  .counter h2 {
    padding-bottom: 30px !important;
  }

  .pt-100 {
    padding-top: 50px !important;
    padding-left: 50px;
  }
}




/* ========== Desktops ab 1025px ========== */
@media screen and (min-width: 1025px) {
  .mobil-wohnungssuche,
  .mobil-haverie,
  .mobil-contact {
    display: none !important;
  }
		/*Pfeil mit Freisteller Mitglied werden*/
.cutout-left {left: 0%}
.headline-left {margin-left: 35%}
.arrow-with-cutout-left {width: 93%;}

}

/* ========== Große Desktop ========== */
@media (min-width: 1500px) and (max-width: 1800px) {
 .arrow-wrapper.contact2 {
    padding-right: calc((100vw - 1250px) / 2);
    width: 725px;
  }
  }



@media (min-width: 1320px) and (max-width: 1920px) {
  .headerimage {
    height: 790px;
  }

  .overlap-row {
    padding-left: calc((100vw - 1250px) / 2) !important;
  }

  .arrow-wrapper.contact {
    max-width: 1265px;
    padding-left: calc((100vw - 1250px) / 2);
  }

 
	

}

/* ========== XXL-Desktops (ab 1900px) ========== */
@media (min-width: 1900px) {
  .headerimage {
    height: 790px;
  }

  .headerimage-text {
    width: 503px;
  }
}

/* ========== Extra große Screens (ab 1965px) ========== */
@media (min-width: 1965px) {

  .headline-left { margin-left: 40%; }
  .cutout-left { left: 15%; }
}


.immobilien-title-single {  font-size: 2rem !important; line-height: 1.2 }
.subline {font-size: 36px; margin-bottom: 30px; line-height: 1.2}
.meta {font-size: 18px !important; }






a.standard {margin-top: 50px}







/*--Accordeon--*/
.w-tabs {margin-top: 40px}
.w-tabs-section-header {color: var(--gwgdunkelgruen) !important; font-size: 20px !important; padding-left: 0px; padding-top: 2rem !important; padding-bottom: 2rem !Important; padding-right: 20px;}
.w-tabs-sections.icon_plus>div>.w-tabs-section-header.active .w-tabs-section-control:before {background: transparent !important; transform: rotate(180deg) !important;}
.w-tabs-sections.icon_plus>.w-tabs-section.active>.w-tabs-section-header .w-tabs-section-control {transform: rotate(180deg) !important;}
.no-touch .w-tabs-section-header:hover, .no-touch .w-tabs-section-header:focus {background: transparent !important;}
.w-tabs-section-header.active {background-color: transparent !important;}
.w-tabs-section-content { border-top: 1px solid var(--gwgdunkelgruen) !important; padding: 50px 0px !important; }
.w-tabs-section {display: none; border-color: var(--gwgdunkelgruen);}

#gaestewohnungen .details-gw {margin-top: 36px !important;}
#gaestewohnungen .btn.standard.arrow, .more {margin-top: 20px !important;}
#gaestewohnungen .w-tabs-section-content { padding: 20px 0px !important; }






/* Tipp-Box */
div.tipps {
  padding-top: 40px;
  display: flex;
  align-items: flex-start;
}
div.tipps::before {
  content: url('/wp-content/themes/Impreza-child/elements/haken.svg') !important;
  display: inline-block;
  margin-right: 12px;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}


/* Tipp-Box */
h3.gwg-icon {
  padding-top: 40px;
  display: flex;
  align-items: flex-start;
}
h3.gwg-icon::before {
 content: url('/wp-content/themes/Impreza-child/elements/markenanstrich-2.svg') !important; 
  display: inline-block;
  margin-right: 20px;
  width: 20px;

  
}



/*Formular*/

.white {color: #fff !important;}
.kashmir h3 {line-height: 1.3 !Important; display: block; font-size: 24px !Important;}
.kashmir, .kashmir h2, .kashmir h3 {color: var(--gwgkashmir) !important;}

.text-center {text-align: center;}




.headline-with-arrow-left {
   display: flex;
    align-items: left; /* Sorgt für vertikale Zentrierung */
    justify-content: left; /* Hält alles in der Mitte */
    gap: 10px; /* Abstand zwischen Icon und Text */
	padding-top: 40px;
	padding-bottom: 33px;
	color: #0C7D5A !important;
	font-size: 21px;
}

.headline-with-arrow-left::before {
     content: url('/wp-content/themes/Impreza-child/elements/pfeil-ueberschrift.svg'); /* FontAwesome-Haus-Icon als Beispiel */
    font-family: "Font Awesome 5 Free"; /* Falls FontAwesome genutzt wird */
    font-weight: 900;
    height: 22px;
padding-top: 5px
}






.custom-flex-parent {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap; /* falls mobil nebeneinander nicht reicht */
}

.left-group {
  display: flex;
  gap: 10px;
}




/*Pfeil mit Freisteller*/
.arrow-left {color: #fff !Important; padding-top: 80px  !Important;}
.arrow-right {color: #fff !Important; padding-top: 80px  !Important; padding-left: 214px  !Important; z-index: 10}
.content-arrow-left, .content-arrow-right {z-index: 1; color: #fff !Important; display: flex; align-items: stretch; line-height: 1.6 }

.content-arrow-right {max-width: 388px; padding-right: calc((100vw - 1420px) / 2);  width: 100%; /* Zentriert den Content */}
.headline {display: block; margin-bottom: 24px; font-size: 30px; line-height: 1.2 }








.w-grid-item h3 {font-size: 1.4rem; }

.page-id-8731 span[data-name="btnDownloadPdf"] {
  display: none !Important;
}





/*sorgt dafür dass die ganze Kachel verlinkt wird*/
.w-vwrapper-link {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 10 !important;
    display: block !important;
}
.w-grid-item-h {
    position: relative !important;
}