/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */





/* ==========================================================================
   Root Variablen (anpassbar für globale Styles)
   ========================================================================== */
:root {
  /* Layout & Container */
  --container-padding-sm: 10%;
--container-padding-sm: clamp(20px, 10%, 150px);
  --custom-padding: calc(50vw - 800px);
 --container-padding-lg: 15%;

 --container-padding-lg: clamp(80px, 15%, 230px);
	
--side-padding: 4rem;

  /* Buttons */
  --btn-padding-top: 8px;
  --btn-padding-side: 30px;



  /* Farben (mit Elementor Global Colors kombinierbar) */
  --color-primary: var(--e-global-color-primary);
  --color-secondary: var(--e-global-color-secondary);

  /* Border-Radius */
  --border-radius: 0px;
}

	.main-logo img {max-width: 300px!important;}



/* ==========================================================================
   Header & Logo
   ========================================================================== */

.menu-item a {
  transition: color 0.3s ease;
  color: var(--e-global-color-text);
}
/*
#header .logo .negative { opacity: 0; transition: opacity 0.3s ease, pointer-events: all;}


#burger-icon svg {fill: var(--e-global-color-accent); }

#header .uuid-cc24129a-64fc-4fbe-8e02-a9554ba9cbc0 {fill: var(--e-global-color-accent)!important; }$
#header   #uuid-8cacc4b1-ee98-44b0-b49b-adbccdd34255:hover .uuid-cc24129a-64fc-4fbe-8e02-a9554ba9cbc0 {fill: var(--e-global-color-accent)!important; }


#header.negative .uuid-cc24129a-64fc-4fbe-8e02-a9554ba9cbc0 {fill: var(--e-global-color-a983356)!important; }

#header.negative #burger-icon svg {fill: var(--e-global-color-primary); }

#header {background-color: var(--e-global-color-primary) ;}
header.overhero #header {background-color: rgba(0,0,0,0);}

#header.negative .menu-item a {  color: var(--e-global-color-a983356);}
#header.negative .menu-item:hover a {  color: var(--e-global-color-primary); }
#header.negative .menu-item:hover a:before {  background-color: var(--e-global-color-primary); }
#header.negative .menu-item.current_page_item a:before {  background-color: var(--e-global-color-primary); }
*/



/* ==========================================================================
    Menu
   ========================================================================== */

#header {
  transition: transform 0.5s ease;
}

#header.hide-header {
  transform: translateY(-100%);
}





/* ==========================================================================
   Startseite
   ========================================================================== */

.subpage-hero {overflow-x: visible; overflow-y: visible }

/* ==========================================================================
   Layout & Container
   ========================================================================== */
.img-max-width {
  max-width: 1800px;
}
.custom-padding-left {
  padding-left: var(--custom-padding);
}
.custom-padding-right {
  padding-right: var(--custom-padding);
}

.quad-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 500px;
  height: 500px;
  transform: translate(-50%, -50%) rotate(45deg);
  z-index: 0;
  pointer-events: none;
}




/* ==========================================================================
   Buttons & Links
   ========================================================================== */


/* ==========================================================================
   Wohnung kaufen
   ========================================================================== */

.wohnungstabelle .verkauft {opacity: 0.5;     pointer-events: none;
}
.wohnungstabelle {overflow-x: scroll;}
.wohnungstabelle .verkauft p {opacity: 0.7;}
.wohnungstabelle .verkauft a {pointer-events: none;}

.wohnungstabelle .e-grid {grid-auto-columns: max-content; 
    min-width: max-content;}

.wohnungstabelle {
  overflow-x: auto;
}

/* Standard: flexible Spalten */
.wohnungstabelle .e-grid {
  display: grid;
  grid-template-columns:
    minmax(max-content, 2fr)  /* Objekt */
    minmax(max-content, 1fr)  /* Zimmer */
    minmax(max-content, 1fr)  /* Wohnfläche */
    minmax(max-content, 1.5fr)/* Verkaufspreis */
    minmax(max-content, 1fr)  /* Download */
    minmax(max-content, 1.2fr);/* Anfrage */
  column-gap: 1rem;
  align-items: center;
  min-width: max-content;
}

/* Unter 1050px: fixe Spaltenbreite, gleich gross */
@media (max-width: 1050px) {
  .wohnungstabelle .e-grid {
    grid-template-columns: repeat(6, 170px); /* z. B. alle 220px */
    min-width: max-content; /* Scrollen erzwingen */
  }
}




/* ==========================================================================
   Komponenten: Flash-List, Timeline, etc.
   ========================================================================== */
.custom-list ul {
  list-style: none;
  padding-left: 0;
    margin-left: -35px;
	max-width: 700px;
}
.custom-list ul li {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.custom-list ul li:last-of-type {
  margin-bottom: 0;
}
.custom-list ul li::before {
  content: "";
  display: inline-block;
  background-image: url('/wp-content/uploads/2025/09/icon-braun.svg'); 
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left center;
  height: 25px;
  width: 25px;
  min-width: 20px;
  margin-right: 15px;
	margin-bottom: 15px;
}

.custom-list.light ul li::before {
  background-image: url('/wp-content/uploads/2025/09/icon-beige.svg'); 
}

/* ==========================================================================
   Footer
   ========================================================================== */


/* ==========================================================================
   Media Queries (Responsive)
   ========================================================================== */


@media (max-width: 1400px) {
  :root {
    --btn-padding-side: 25px;
    --img-height: 70vw;
	  
	--container-padding-lg: 12%;
	  	  --container-padding-sm: clamp(110px, 12%, 250px);

	  	--container-padding-sm: 8%;
	  --container-padding-sm: clamp(90px, 8%, 150px);


	
	--side-padding: 2rem;
  }
	
	
	
	
	.custom-list ul {

    margin-left: 0px;
	max-width: 800px;
}
	
	
	.quad-bg {  width: 400px;  height: 400px; }


}

@media (max-width: 767px) {
  :root {
    --btn-padding-side: 18px;
    --img-height: var(--img-height-mobile);
    --custom-img-height: 350px;
	  	  	--container-padding-sm: 3rem;

	  	--container-padding-lg: 3rem;
	
	--side-padding: 20px;
  }
	
		.quad-bg {  width: 300px;  height: 300px; }
	
	.subpage-hero {overflow-y: hidden;         overflow-x: hidden; }


}

/* ==========================================================================
   Utility Klassen
   ========================================================================== */

.p-text-max-width div {
  max-width: 900px;
}