/* Schriften lokal einbinden ----------------------- */
@font-face {font-family:'Shadows Into Light Two';font-style:normal;font-weight:400;src:local('Shadows Into Light Two'), url('https://www.bad-saulgau.de/de-wGlobal/wGlobal/layout/webfonts/shadows-into-light-two/ShadowsIntoLightTwo-Regular.ttf') format('truetype');}
@font-face {font-family:'Source Sans Pro';font-style:normal;font-weight:400;src:local('Source Sans Pro'), url('https://www.bad-saulgau.de/de-wGlobal/wGlobal/layout/webfonts/source-sans-pro/SourceSansPro-Regular.ttf') format('truetype');}
@font-face {font-family:'Source Sans Pro';font-style:normal;font-weight:700;src:local('Source Sans Pro'), url('https://www.bad-saulgau.de/de-wGlobal/wGlobal/layout/webfonts/source-sans-pro/SourceSansPro-Bold.ttf') format('truetype');}
@font-face {font-family:'Source Sans Pro';font-style:italic;font-weight:400;src:local('Source Sans Pro'), url('https://www.bad-saulgau.de/de-wGlobal/wGlobal/layout/webfonts/source-sans-pro/SourceSansPro-Italic.ttf') format('truetype');}
@font-face {font-family:'Titillium Web';font-style:normal;font-weight:400;src:local('Titillium Web'), url('https://www.bad-saulgau.de/de-wGlobal/wGlobal/layout/webfonts/titillium-web/TitilliumWeb-Regular.ttf') format('truetype');}
@font-face {font-family:'Titillium Web';font-style:normal;font-weight:700;src:local('Titillium Web'), url('https://www.bad-saulgau.de/de-wGlobal/wGlobal/layout/webfonts/titillium-web/TitilliumWeb-Bold.ttf') format('truetype');}
@font-face {font-family:'Titillium Web';font-style:italic;font-weight:400;src:local('Titillium Web'), url('https://www.bad-saulgau.de/de-wGlobal/wGlobal/layout/webfonts/titillium-web/TitilliumWeb-Italic.ttf') format('truetype');}


/* Corporate Design Variablen */
:root {
  --color-primary: #C50C1f;
  --color-white: #fff;
  --font-headline: 'Source Sans Pro','Arial','Sans-Serif';
  --font-body: 'Source Sans Pro','Arial','Sans-Serif';
  --control-bg-opacity: 0.75;
}

/* Grundlayout */
html, body 			{margin:0;padding:0;height:100%;font-family:var(--font-body);font-size:16px;line-height:1.4;overflow:hidden;}

/* Karte füllt gesamten Viewport */
#map 				{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;}

.popup-highlighted 	{color:var(--color-primary)}

/* Steuerungs-Panel */
.control-panel 		{position:absolute;top:1rem;left:1rem;background:rgba(255,255,255,0.75);backdrop-filter:blur(8px);border-left:4px solid var(--color-primary);border-radius:0.75rem;box-shadow:0 4px 20px rgba(0,0,0,0.1);padding:0 10px 10px 10px;width:10rem;max-height:calc(100% - 2rem);overflow-y:auto;z-index:1000;transition:transform 0.3s ease;}

/* Versteckte Panel-Variante */
.control-panel.hidden 	{transform: translateY(100%);}

/* Toggle-Button (nur mobil sichtbar) */
#panel-toggle 		{position:absolute;top:1rem;right:1rem;background:var(--color-primary);color:var(--color-white);border:none;border-radius:0.5rem;padding:0.5rem;font-size:1rem;cursor:pointer;z-index:1001;display:none;}

/* Filter-Sektionen */
.filter-section + .filter-section 	{margin-top:1rem;}
.filter-section h3 		{font-size:1rem;margin-bottom:0.5rem;margin-top:8px;text-transform:capitalize;}
.filter-group 			{display:flex;flex-direction:column;gap:0.5rem;}
.filter-group label 	{font-size:0.9rem;user-select:none;}
[type="checkbox"] 		{accent-color:var(--color-primary);}

/* Responsive Anpassungen */
@media (max-width: 768px) {
  .control-panel 		{left:1rem;right:1rem;top:auto;bottom:1rem;max-height:50vh;}

  /* Toggle-Button anzeigen */
  #panel-toggle 		{display:block;}
}