/* --------------------------------------------------
   Global Variables & Resets
----------------------------------------------------- */
:root {
    --primary-color: #425474;      /* Main accent color */
    --secondary-color: #91120A;    /* Secondary accent (active/hover) */
    --header-bg: #333;             /* Header background */
    --body-bg: #f7f7f7;            /* Page background */
    --white: #fff;
    --border-light: #ccc;
    --reset-link-color: #7C6F70;
    --hover-bg: rgb(228, 240, 237, 0.5);
    --info-heading-color: #425474;
    --link-color: #958A8A;
    --shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
    
  /* --------------------------------------------------
     Body & Typography
  ----------------------------------------------------- */  
 .buildings-map h1 {
    margin: 0;
    padding: 1rem;
    background: var(--header-bg);
    color: var(--primary-color);
    text-align: left;
    font-size: 1.2rem;
    font-family: Obvia, sans-serif;
    font-weight: bold;
  }
  
  .buildings-map h2 {
    margin-top: 1.125rem;
    color:#002B30;
    font-weight: bolder;
    font-size: 2rem; 
    margin-bottom: 0.5rem;
  }
  
  /* --------------------------------------------------
     Layout Containers
  ----------------------------------------------------- */
  
  /* Main container for the SVG map and info panel */
  .buildings-map {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
  }
  
  /* SVG Map styling */
  .buildings-map .map {
    background: var(--white);
    padding: 20px;
    overflow: auto;
    max-width: 900px;
    margin: 0 auto;
  }
  
  /* Container for the filter panel and info box */
  .buildings-map .infoContainer {
    display: flex;
    gap: 3rem;
    max-width: 900px;
    margin: 20px auto;
    color: var(--primary-color);
  }
  
  /* --------------------------------------------------
     Filter Panel & Lists
  ----------------------------------------------------- */
  
  /* Left-side filter panel */
  .buildings-map .filter-panel {
    width: 300px;
    background-color: var(--white);
    border: 1px solid var(--primary-color);
  }
  
  .buildings-map .filter-panel h2 {
    margin-bottom: 15px;
    font-size: 1rem;
    color: var(--white);
  }
  
  /* General list reset for filter lists */
  .buildings-map .filter-list {
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
    font-size: 1.125rem;
  }
  
  /* List items for houses & categories */
  .buildings-map .filter-list li {
    font-style: normal;
    display: flex;
    width: 100%;
    padding: 8px 10px;
    background: var(--white);
    cursor: pointer;
    transition: background-color 0.3s;
    justify-content: flex-start;
    gap: 10px;
    opacity: 0.8;
  }
  /* .buildings-map .filter-list li:hover {
    background-color: rgb(228, 240, 237, 0.5);  
  } */
  
  /* Section titles within filter lists */
  .buildings-map .filter-section-title {
    background-color: var(--wp--preset--color--turquoise);
    padding: 0.8rem 0.5rem;
    margin: 0;
    opacity: 1;
    font-style: italic;
    cursor: default;
  }
  
  /* Hover and active state for filter list items */
  .buildings-map .filter-list li:hover,
  .buildings-map .filter-list li.active {
    background-color: var(--hover-bg);
    color: var(--secondary-color);
  }
  
  /* Additional utility classes */
  .buildings-map .filtern-nach {
      color: var(--white);
      background-color: var(--primary-color);
      padding: 0.5rem 1rem;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 0.5rem;
      margin-block-end: 0;
  }
  
  .buildings-map .filtern-nach i {
    font-size: 1.5rem;
  }

  /* Reset link styling */
  .buildings-map .reset-link {
    display: inline-block;
    margin-top: 10px;
    color: var(--reset-link-color);
    text-decoration: none;
  }
  
  .buildings-map .reset-link:hover {
    text-decoration: underline;
  }
  
  /* --------------------------------------------------
     Info Panel & Tenant List
  ----------------------------------------------------- */
  
  /* Info panel (right column) */
  .buildings-map .info-panel {
    flex: 1;
    background-color: var(--white);
    border: 1px solid var(--primary-color);
    padding: 20px;
    border-radius: 4px;
    box-shadow: var(--shadow);
  }
  
  .buildings-map .info-panel h2 {
    margin-top: 0;
    color: var(--info-heading-color);
  }
  
  .buildings-map .info-panel p {
    margin: 10px 0;
    color: var(--text-default);
  }
  
  .buildings-map .info-panel ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .buildings-map .info-panel ul li {
    margin-bottom: 8px;
    padding: 6px;
    border-bottom: 1px solid var(--primary-color);
  }
  
  .buildings-map .tenantNames{
    font-size: 1.125rem;
  }

  /* Tenant list styling (used in info panel) */
  .buildings-map #tenantList {
    margin-left:0 ;
    padding: 0;
    list-style: none;
    color: var(--primary-color);
    font-size: 1.2rem
  }
  
  .buildings-map #tenantList li{
    padding: 0.5rem 0 0.5rem 2rem;
  }
  .buildings-map #tenantList li span::before{
  margin-left: -2rem;
  }  

  .buildings-map #tenantList li:hover {
    color: var(--secondary-color);
    cursor: pointer;
  }
  
  
  /* "Reset" link inside info panel (German class name kept for legacy) */
  .buildings-map .resetLinkContainer {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.25rem;
    padding-top: 10px;
    color: var(--link-color);
  }
  
  /* Anchor link styling */
  .buildings-map a:link,
  .buildings-map a:visited {
    color: var(--link-color);
    text-decoration: underline;
  }
  
  .buildings-map a.tenantNames{
    color: var(--primary-color);
    text-decoration: none;
  }
  
  .buildings-map a.tenantNames:hover{
    color:var(--hover) ;
  }
  
  /* --------------------------------------------------
     SVG Building Elements
  ----------------------------------------------------- */
  
  /* Buildings on the SVG map*/
  .buildings-map g[id^="Building"] {
    cursor: pointer;
    transition: opacity 0.2s;
  }
  /* --------------------------------------------------
     Miscellaneous Utility Classes
  ----------------------------------------------------- */
  
  /* (Legacy class names – consider renaming for consistency) */
  .buildings-map .RechteSpalte {
    display: flex;
    flex-direction: column;
  }
  
  .buildings-map .KlickenSie {
    color: var(--wp--preset--color--darkblue);
  }
  
  /* --------------------------------------------------
     Responsive Styles
  ----------------------------------------------------- */
  @media (max-width: 800px) {
    .buildings-map .infoContainer {
      flex-direction: column;
    }
    .buildings-map .filter-panel,
    .buildings-map .info-panel {
      width: 100%;
    }
  }