:root {
  --primary-color: #204f84;
  --secondary-color: #204f84;
  --accent-color: #009cb8;
  --text-color: #000;
  --header-color: #ffff;
  --headline-color: #003b89;
  --border-color: #ddd;
  --input-border: #ccc;
  --shadow: -2px 0 10px rgba(0,0,0,0.1);
  --transition: transform 0.3s ease;
  --border-radius: 4px;
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --map-height: 70vh;
  --map-min-height: 500px;
  --sidebar-width: 300px;
  --z-sidebar: 1000;
}

* { 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0; 
}


/* Header mit Logo und Navigation */
header {
    width: 100%;
    background-color: var(--secondary-color);
    padding: 0.5rem 0;
    margin: 0;
    display: flex; /* Flexbox für Header-Inhalte */
    align-items: center; /* Vertikale Ausrichtung */
}

header .header-wrapper {
    width: 100%;
    max-width: 1200px; /* Optional: Maximalbreite für den Wrapper */
    margin: 0 auto; /* Zentriert den Wrapper */
    display: flex;
    justify-content: space-between; /* Logo links, Navigation rechts */
    align-items: center;
    padding: 0 1rem; /* Abstand links/rechts */
}

.header-wrapper .logo {
    height: 70px; 
    width: auto;
    padding: 0.5rem 32px;
}

/* Navigation-Stil (angepasst für Wrapper) */
nav {
    background-color: white;
    padding: 0.5rem 0;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-end; /* Rechtsbündig */
    gap: 1.5rem;
    padding-right: 0; /* Abstand wird jetzt über den Wrapper gesteuert */
}

nav ul li a {
    color: var(--text-color);
    text-decoration: none;
    font-weight: 400;
    font-size: 1rem;
}

nav ul li a:hover {
    text-decoration: underline;
}

/* Mobile Anpassungen */
@media (max-width: 768px) {
    header .header-wrapper {
        flex-direction: column; /* Logo und Navigation untereinander */
        align-items: flex-start; /* Linksbündig */
    }

    nav ul {
        justify-content: flex-start; /* Linksbündig auf kleinen Bildschirmen */
        flex-wrap: wrap;
        gap: 1rem;
        padding-top: 1rem; /* Abstand zwischen Logo und Navigation */
    }
}






/*** Main **/

main { 
  display: flex; 
  min-height: var(--map-height); 
}

#filters { 
  width: var(--sidebar-width); 
  background: white; 
  padding: var(--spacing-sm); 
  border-right: 1px solid var(--border-color); 
  flex-shrink: 0; 
}

#search { 
  width: 100%; 
  padding: var(--spacing-xs); 
  margin-bottom: var(--spacing-sm); 
  border: 1px solid var(--input-border); 
  border-radius: var(--border-radius); 
}

#categories label { 
  display: block; 
  margin-bottom: var(--spacing-xs); 
  cursor: pointer; 
  color: var(--text-color);
}

#map { 
  flex: 1; 
  height: var(--map-height); 
  min-height: var(--map-min-height); 
}

#sidebar { 
  position: fixed; 
  right: 0; 
  top: 0; 
  width: var(--sidebar-width); 
  height: 100vh; 
  background: white; 
  transform: translateX(100%); 
  transition: var(--transition); 
  z-index: var(--z-sidebar); 
  box-shadow: var(--shadow); 
  padding: var(--spacing-sm); 
  overflow-y: auto; 
}

#sidebar.open { 
  transform: translateX(0); 
}

#sidebar-toggle {
    background: var(--accent-color);
    color: white;
    border: none;
    padding: var(--spacing-xs);
    border-radius: var(--border-radius);
    cursor: pointer;
    margin-top: var(--spacing-sm);
    width: 100%;
}

#sidebar-toggle:hover {
    background: var(--headline-color);
}

footer { 
  background: var(--primary-color); 
  color: white; 
  text-align: center; 
  padding: var(--spacing-sm); 
}

/* Mobile */
@media (max-width: 768px) {
  main { 
    flex-direction: column; 
  }
  
  #filters { 
    width: 100%; 
    height: auto; 
    border-right: none; 
    border-bottom: 1px solid var(--border-color); 
    order: 1; 
  }
  
  #map { 
    order: 2; 
    height: 60vh; 
  }
  
  nav ul { 
    flex-wrap: wrap; 
    gap: 1rem; 
  }
}