/* =========================================================
   AWO Kartenprojekt – Stylesheet (Comic/Sticker, aber ruhig)
   ========================================================= */

   :root{
	--bg: #ffffff;
	--text: #111827;
  
	/* CI */
	--awo-rot: #E30613;
	--awo-rot-dark: #C1050F;
  
	--awo-gelb: #FFC107;
	--awo-gruen: #4CAF50;
	--awo-blau: #2196F3;
  
	/* UI Tokens */
	--card-bg: rgba(255,255,255,0.96);
	--card-border: rgba(227,6,19,0.14);
	--card-outline: rgba(227,6,19,0.40);
  
	--shadow-soft: 0 4px 14px rgba(0,0,0,0.14);
	--shadow-strong: 0 8px 22px rgba(0,0,0,0.22);
  
	--radius-md: 12px;
	--radius-lg: 16px;
  
	--focus: 0 0 0 3px rgba(227,6,19,0.22);
  
	/* Basemap-Filter (ruhig, Marker kräftig) */
	--tile-saturate: 0.95;
	--tile-contrast: 1.06;
	--tile-brightness: 1.03;
  }
  
  html, body{
	height: 100%;
	margin: 0;
	padding: 0;
  }
  
  body{
	font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
	background: var(--bg);
	color: var(--text);
	-webkit-font-smoothing: antialiased;
  }
  
  /* Container (optional) */
  .container{
	max-width: 1200px;
	margin: 0 auto;
	padding: 1rem;
  }
  
  img{
	max-width: 100%;
	height: auto;
	display: block;
  }
  
  /* =========================================================
	 Map Layout
	 ========================================================= */
  #map-container{
	width: 100%;
	height: 100vh;
	position: relative;
	overflow: hidden;
  }
  
  #map{
	width: 100%;
	height: 100%;
  }
  
  /* Basemap tiles ruhiger */
  .leaflet-tile{
	filter:
	  saturate(var(--tile-saturate))
	  contrast(var(--tile-contrast))
	  brightness(var(--tile-brightness));
	transition: filter 220ms ease;
  }
  
  /* Optional: beim Fokus/Interaktion etwas „mehr Leben“ */
  #map-container:focus-within .leaflet-tile{
	filter:
	  saturate(calc(var(--tile-saturate) + 0.06))
	  contrast(calc(var(--tile-contrast) + 0.03))
	  brightness(var(--tile-brightness));
  }
  
  /* =========================================================
	 Header Card (Sticker Card)
	 ========================================================= */
  .map-header{
	position: absolute;
    left: 14px;
    bottom: 14px;   /* neu */
    top: auto;      /* wichtig */
    z-index: 1000;
  
	background: var(--card-bg);
	border-radius: var(--radius-lg);
	padding: 12px 16px;
	max-width: 280px;
  
	border: 2px solid rgba(255,255,255,0.9);
	outline: 2px solid var(--card-border);
  
	box-shadow: var(--shadow-soft);
	backdrop-filter: blur(10px);
  }
  
  .map-header h1,
  .map-header h1 a{
	margin: 0;
	font-size: 1.15rem;
	line-height: 1.15;
	font-weight: 800;
	letter-spacing: -0.4px;
	color: var(--awo-rot);
	text-decoration: none;
  }
  
  .map-header p{
	margin: 6px 0 0 0;
	font-size: 0.92rem;
	line-height: 1.25;
	color: rgba(17,24,39,0.72);
  }
  
  /* =========================================================
	 Loading
	 ========================================================= */
  .loading{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2000;
  
	background: rgba(255,255,255,0.95);
	padding: 16px 22px;
	border-radius: var(--radius-md);
  
	border: 2px solid rgba(255,255,255,0.9);
	outline: 2px solid rgba(0,0,0,0.06);
  
	box-shadow: var(--shadow-strong);
  }
  
  /* =========================================================
	 Leaflet Controls (Zoom + Attribution) – etwas „Sticker“
	 ========================================================= */
  .leaflet-control-zoom{
	border: none !important;
	box-shadow: var(--shadow-soft);
	border-radius: 12px !important;
	overflow: hidden;
  }
  
  .leaflet-control-zoom a{
	background: rgba(255,255,255,0.96) !important;
	color: #111827 !important;
	border: none !important;
	width: 34px !important;
	height: 34px !important;
	line-height: 34px !important;
	font-weight: 800;
  }
  
  .leaflet-control-zoom a:hover{
	background: rgba(255,255,255,1) !important;
  }
  
  .leaflet-control-attribution{
	background: rgba(255,255,255,0.78) !important;
	border-radius: 10px !important;
	padding: 4px 8px !important;
	box-shadow: 0 2px 10px rgba(0,0,0,0.10);
  }
  
  /* =========================================================
	 Marker – Sticker-Look
	 ========================================================= */
  .awo-marker-icon{
	background: #ffffff;
	border-radius: 999px;
	padding: 4px;
	border: 2px solid rgba(0,0,0,0.10);
	box-sizing: content-box;
  
	filter: drop-shadow(0 3px 7px rgba(0,0,0,0.30));
	transition: transform 140ms ease, filter 140ms ease;
	z-index: 600 !important;
  }
  
  .awo-marker-icon:hover{
	transform: translateY(-1px) scale(1.06);
	filter: drop-shadow(0 6px 12px rgba(0,0,0,0.35));
  }
  
  /* =========================================================
	 Cluster – Sticker-Token
	 ========================================================= */
  .marker-cluster{
	z-index: 500 !important;
	background: transparent;
  }
  
  .marker-cluster div{
	border-radius: 999px;
	border: 3px solid var(--awo-rot);
	box-shadow: 0 6px 16px rgba(0,0,0,0.28);
  
	/* sanftes „Candy“-Highlight, nicht zu rosa */
	background: radial-gradient(circle at 30% 30%,
	  #ffffff 0%,
	  rgba(227,6,19,0.10) 45%,
	  rgba(227,6,19,0.18) 100%);
  
	color: #111827;
	font-weight: 900;
	font-size: 0.92rem;
  }
  
  .marker-cluster span{
	color: #111827;
	text-shadow: 0 1px 2px rgba(255,255,255,0.75);
  }
  
  /* =========================================================
	 Popups – Sticker Card
	 ========================================================= */
  .awo-popup .leaflet-popup-content-wrapper{
	border-radius: 16px;
	background: #ffffff;
  
	border: 3px solid #ffffff;
	outline: 3px solid rgba(227,6,19,0.95);
  
	box-shadow: 0 10px 26px rgba(0,0,0,0.22);
  }
  
  .awo-popup .leaflet-popup-content{
	margin: 14px 16px;
	font-family: Inter, system-ui, -apple-system, sans-serif;
  }
  
  .awo-popup .leaflet-popup-tip{
	background: #ffffff;
	border-top: 3px solid rgba(227,6,19,0.95);
  }
  
  /* =========================================================
	 Legend Panel (Sticker)
	 ========================================================= */
  .map-legend{
	position: absolute;
	bottom: 18px;
	right: 18px;
	z-index: 1000;
  
	background: var(--card-bg);
	padding: 16px 18px;
  
	border-radius: 18px;
	border: 3px solid rgba(255,255,255,0.95);
	outline: 2px solid var(--card-outline);
  
	box-shadow: var(--shadow-strong);
	backdrop-filter: blur(10px);
  
	font-size: 0.88rem;
	max-width: 300px;
	max-height: 70vh;
	overflow-y: auto;
  
	transition: transform 220ms ease, opacity 220ms ease;
  }
  
  .map-legend.hidden{
	opacity: 0;
	pointer-events: none;
	transform: translateX(calc(100% + 24px));
  }
  
  .map-legend h4{
	margin: 0 0 12px 0;
	color: var(--awo-rot);
	font-size: 1.05rem;
	font-weight: 900;
  }
  
  .legend-toggle-all{
	margin-bottom: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(0,0,0,0.10);
  }
  
  .map-legend-item{
	display: flex;
	align-items: center;
	margin: 10px 0;
	gap: 10px;
  }
  
  .legend-checkbox{
	margin: 0;
	cursor: pointer;
	width: 18px;
	height: 18px;
	accent-color: var(--awo-rot);
  }
  
  .map-legend-color{
	width: 26px;
	height: 26px;
	border-radius: 999px;
	border: 3px solid #ffffff;
	box-shadow: 0 2px 6px rgba(0,0,0,0.18);
	flex-shrink: 0;
  }
  
  .map-legend-text{
	color: rgba(17,24,39,0.90);
	font-size: 0.92rem;
	flex: 1;
  }
  
  .map-legend-item.disabled .map-legend-text{ opacity: 0.5; }
  .map-legend-item.disabled .map-legend-color{ opacity: 0.4; }
  
  /* In-Legende Action-Button */
  .legend-action-btn{
	width: 100%;
	padding: 9px 12px;
	background: var(--awo-rot);
	color: white;
	border: none;
	border-radius: 10px;
  
	font-size: 0.92rem;
	font-weight: 800;
	cursor: pointer;
  
	box-shadow: 0 6px 14px rgba(227,6,19,0.26);
	transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
  }
  
  .legend-action-btn:hover{
	background: var(--awo-rot-dark);
	transform: translateY(-1px);
	box-shadow: 0 10px 20px rgba(227,6,19,0.28);
  }
  
  .legend-action-btn:focus{
	outline: none;
	box-shadow: var(--focus), 0 10px 20px rgba(227,6,19,0.28);
  }
  
  /* =========================================================
	 FAB – Legend Toggle (Top Right)
	 ========================================================= */
  .legend-fab{
	position: fixed;
	top: 14px;
	right: 14px;
	z-index: 1100;
  
	padding: 10px 14px;
	background: var(--awo-rot);
	color: white;
  
	border: 3px solid rgba(255,255,255,0.92);
	outline: 2px solid rgba(0,0,0,0.06);
	border-radius: 14px;
  
	font-size: 0.92rem;
	font-weight: 900;
	cursor: pointer;
  
	box-shadow: var(--shadow-strong);
	transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
	white-space: nowrap;
  }
  
  .legend-fab:hover{
	background: var(--awo-rot-dark);
	transform: translateY(-1px);
	box-shadow: 0 12px 26px rgba(0,0,0,0.26);
  }
  
  .legend-fab:focus{
	outline: none;
	box-shadow: var(--focus), 0 12px 26px rgba(0,0,0,0.26);
  }
  
  /* =========================================================
	 Scrollbar (Legend)
	 ========================================================= */
  .map-legend::-webkit-scrollbar{ width: 8px; }
  .map-legend::-webkit-scrollbar-track{
	background: rgba(0,0,0,0.06);
	border-radius: 10px;
  }
  .map-legend::-webkit-scrollbar-thumb{
	background: rgba(227,6,19,0.30);
	border-radius: 10px;
  }
  .map-legend::-webkit-scrollbar-thumb:hover{
	background: rgba(227,6,19,0.45);
  }
  
  /* =========================================================
	 Responsive
	 ========================================================= */
  @media (max-width: 768px){
	.map-header{
	  top: auto;
	  left: 10px;
	  max-width: 76%;
	  padding: 10px 12px;
	}
  
	.map-header h1,
	.map-header h1 a{
	  font-size: 1.05rem;
	}
  
	.map-header p{
	  font-size: 0.82rem;
	}
  
	.legend-fab{
	  top: 10px;
	  right: 10px;
	  padding: 9px 12px;
	  font-size: 0.88rem;
	  border-radius: 14px;
	}
  
	.map-legend{
	  position: fixed;
	  left: 10px;
	  right: 10px;
	  bottom: 10px;
	  max-width: none;
	  border-radius: 20px;
	  transform: translateY(110%);
	}
  
	.map-legend:not(.hidden){
	  transform: translateY(0);
	}
  }