/* Zusaetzliche Styles fuer die oeffentlichen GEDO-Seiten (Karte/Chart),
   ergaenzt das Theme-Stylesheet (bl-themes/gedo/css/style.css), das hier
   fuer Farben/Fonts/Header/Footer mitgenutzt wird. */

/* Leaflet setzt seinen Panes/Controls intern z-index bis 1000 (siehe
   vendor/leaflet/leaflet.css), aber der Karten-Container selbst bekommt
   nur "position: relative" ohne eigenen z-index - dadurch entsteht KEIN
   neuer Stacking-Context, und die internen Leaflet-Werte werden direkt
   gegen die sticky Nav (z-index: 100, siehe bl-themes/gedo/css/style.css)
   verglichen. Beim Scrollen lag die Karte dadurch ueber der Navigation.
   z-index: 0 hier erzwingt den Stacking-Context, damit alles innerhalb
   der Karte darin eingeschlossen bleibt.
   Groesse (User-Wunsch): exakt Bildschirmhoehe minus der (live gemessenen,
   siehe --gedo-header-height/parallax.js) Header-Hoehe - die Karte
   fuellt also immer genau den sichtbaren Bereich unterhalb der fixen
   Navigation, auf jeder Bildschirmgroesse.
   Breite: durchgehend 100% des Viewports (bricht bewusst aus dem
   .container mit seinem max-width/Padding aus - Standard-"Full Bleed"-Trick:
   width:100vw + negative Raender um die Haelfte der Differenz zur
   50%-Position). Deshalb auch kein Rand/Radius mehr auf #gedo-map - beruehrt
   ja jetzt die echten Viewport-Kanten. */
.gedo-map-shell {
	position: relative; margin-bottom: 24px;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	overflow: hidden;
	/* Das Trend-Panel (siehe .gedo-trend-panel) haengt am unteren Rand DIESES
	   Elements, nicht am Viewport - klickt man in der weit nach unten
	   gescrollten Tabelle auf eine Zeile (map.js), scrollen wir deshalb
	   hierher zurueck. scroll-margin-top verhindert, dass die Karte dabei
	   unter der fixen Navigation landet. */
	scroll-margin-top: var(--gedo-header-height, 70px);
}
#gedo-map { position: relative; z-index: 0; height: calc(100vh - var(--gedo-header-height, 70px)); }

/* Filter/Legende schweben als eigene "Karten" ueber der Karte, statt als
   Buttonreihen darunter - Filter oben rechts (Leaflets Zoom-Control sitzt
   oben links, so gibt es keine Kollision), Legende unten links (Leaflets
   Attribution sitzt unten rechts).
   z-index 50: reicht, um ueber der Karte/den Markern zu liegen (die stecken
   in #gedo-map's EIGENEM Stacking-Context, siehe dortiger Kommentar - Leaflets
   interne z-index bis 1000 wirken nur INNERHALB davon, nicht nach aussen).
   Bewusst UNTER der fixen Navigation (.site-header, z-index: 100, siehe
   theme/style.css) - sonst legt sich das Panel beim Scrollen ueber das Menue,
   weil die Karte direkt unter dem Header beginnt (kein Hero mehr dazwischen). */
.gedo-map-overlay {
	position: absolute; z-index: 50;
	background: rgba(255, 255, 255, 0.65);
	backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%);
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 12px;
	box-shadow: 0 6px 20px rgba(15, 61, 99, 0.18);
	padding: 12px 14px;
	max-width: calc(100% - 24px);
}
.gedo-map-overlay-filter { top: 12px; right: 12px; }
.gedo-map-overlay-legend { bottom: 12px; left: 12px; }
@media (max-width: 640px) {
	.gedo-map-overlay-filter { top: 8px; right: 8px; left: 8px; }
	.gedo-map-overlay-legend { bottom: 8px; left: 8px; right: 8px; }
}

/* Leaflets Standard-Zoom-Control an den runden, weichen Look der Overlays
   angleichen statt der eckigen Standard-Optik. */
.leaflet-control-zoom.leaflet-bar {
	border: none; border-radius: 12px; overflow: hidden;
	box-shadow: 0 6px 20px rgba(15, 61, 99, 0.18);
}
.leaflet-control-zoom.leaflet-bar a {
	background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(8px);
	color: var(--gedo-navy, #0f3d63); border: none !important;
}
.leaflet-control-zoom.leaflet-bar a:hover { background: #fff; }

/* Leaflets divIcon setzt sonst einen weissen Kasten mit Rand hinter jedes
   Icon (.leaflet-div-icon-Default-CSS) - fuer unsere SVG-Formen (Form=Typ,
   Farbe=Status, siehe map.js) unerwuenscht. */
.gedo-marker-icon { background: transparent; border: none; }
.gedo-marker-icon svg { transition: transform 0.15s ease; transform-origin: center; cursor: pointer; }
.gedo-marker-icon:hover svg { transform: scale(1.35); }

/* Hover-Vorschau: eigenes Tooltip-Design statt Leaflets Standard-Kasten,
   mit kurzem "Pop"-Einblendeffekt statt nur Opacity-Fade. */
.leaflet-tooltip.gedo-tooltip {
	background: #fff;
	border: none;
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(15, 61, 99, 0.18);
	padding: 8px 12px;
	font-family: var(--gedo-font, inherit);
	animation: gedoTooltipPop 0.16s ease-out;
}
.leaflet-tooltip.gedo-tooltip:before { display: none; }
@keyframes gedoTooltipPop {
	from { transform: scale(0.85); opacity: 0; }
	to { transform: scale(1); opacity: 1; }
}
.gedo-tooltip-inner strong { display: block; color: var(--gedo-navy, #0f3d63); font-size: 0.9rem; }
.gedo-tooltip-meta { font-size: 0.8rem; color: var(--gedo-text-muted, #5b6570); margin-top: 2px; }
.gedo-tooltip-dot {
	display: inline-block; width: 8px; height: 8px; border-radius: 50%;
	margin-left: 6px; margin-right: 3px; vertical-align: middle;
}

/* Innerhalb von .gedo-map-overlay-legend: zwei kompakte Zeilen (Typ/Status)
   statt der frueheren, breiteren freistehenden Leisten. */
.gedo-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.78rem; }
.gedo-legend + .gedo-legend { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--gedo-border, #dfe6ec); }
.gedo-legend strong { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gedo-text-muted, #5b6570); margin-right: 2px; }
.gedo-legend .swatch { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }

/* Link zum neuen Analyse-Dashboard (/gedo/insights), direkt unter der
   Status-Legende - gleiche Stelle, an der man ohnehin schon nach "was
   bedeuten die Farben" sucht, bevor man tiefer in die Daten einsteigen will. */
.gedo-insights-link {
	display: block; margin-top: 8px; padding-top: 8px;
	border-top: 1px solid var(--gedo-border, #dfe6ec);
	font-size: 0.78rem; font-weight: 600;
}

/* display:block + overflow-x:auto: macht die Tabelle selbst zum
   Scroll-Container statt auf schmalen Bildschirmen die ganze Seite seitlich
   aufzubrechen (Alias/Name/Typ/Status - vier Spalten, manche Stationsnamen
   lang genug, um auf Mobile nicht mehr zu passen). */
.gedo-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; border-collapse: collapse; margin-bottom: 32px; }
.gedo-table th, .gedo-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--gedo-border, #dfe6ec); font-size: 0.9rem; }
.gedo-table th { color: var(--gedo-text-muted, #5b6570); font-weight: 600; }
.gedo-table tr:hover td { background: var(--gedo-sky, #eaf4fb); }

/* Zwei-Spalten-Grid statt frei umbrechender Pillen: die vorige
   flex-wrap-Reihe brach bei 7 unterschiedlich langen Labels ungleichmaessig
   um (mal 1, mal 2, mal 3 pro Zeile) und wirkte dadurch unaufgeraeumt/
   schwer scannbar (User-Feedback). "Alle" bleibt als Reset-Option ueber die
   volle Breite oben (:first-child spannt beide Spalten), die sechs Typen
   darunter in einem sauberen, vorhersehbaren 2x3-Raster. */
/* Auf Desktop nur ein schlichter Wrapper um .gedo-type-filter-options (der
   Toggle-Button bleibt via display:none unsichtbar, siehe unten) - erst ab
   der 640px-Media-Query weiter unten bekommt dieser Container eine
   erkennbare eigene Rolle als Klapp-Leiste. */
.gedo-filter-toggle {
	display: none;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 2px;
	border: none;
	background: transparent;
	color: var(--gedo-navy, #0f3d63);
	font-size: 0.82rem;
	font-weight: 700;
	cursor: pointer;
}
.gedo-filter-toggle-icon { font-size: 0.7rem; transition: transform 0.15s ease; }
.gedo-type-filter.is-open .gedo-filter-toggle-icon { transform: rotate(180deg); }

.gedo-type-filter-options {
	display: grid;
	/* minmax(0, 1fr) statt nur "1fr": ohne die explizite 0-Untergrenze
	   erlaubt Grid einer Spalte, ueber ihren "fairen Anteil" hinauszuwachsen,
	   wenn ihr Inhalt nicht umbricht (Standard-Minimum ist "auto" = Inhalts-
	   breite) - genau das hat den Container ueber seine feste Breite hinaus
	   nach rechts aus dem Bildschirm schieben lassen (User-Feedback). */
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 6px;
	width: 260px;
}
.gedo-type-filter-options button:first-child { grid-column: 1 / -1; }
/* Inaktive Kacheln bewusst selbst glasig/durchscheinend (statt deckendem
   Weiss) - dadurch wirkt das ganze Panel wie ein Stueck Frosted Glass statt
   ein weisser Block mit Loechern. Der aktive Filter bekommt im Gegenzug
   eine deckende, kraeftige Fuellung + Schatten/Glow, damit er trotz des
   durchscheinenden Umfelds klar erkennbar bleibt (User-Feedback: aktiver
   Filter war vorher kaum vom Rest zu unterscheiden). */
.gedo-type-filter-options button {
	padding: 8px 8px; border-radius: 8px; border: 1px solid rgba(15, 61, 99, 0.18);
	background: rgba(255, 255, 255, 0.35);
	color: var(--gedo-navy, #0f3d63);
	cursor: pointer; font-size: 0.75rem; font-weight: 500; text-align: center;
	line-height: 1.25;
	/* Lange Labels wie "Schöpfwerksfördermenge" muessen innerhalb ihrer
	   Spalte umbrechen duerfen statt sie (und damit den Container) zu sprengen.
	   hyphens:auto nutzt dafuer echte deutsche Worttrennung (siehe lang="de"
	   auf <html>, theme/header.php) statt des rohen overflow-wrap-Umbruchs
	   an beliebiger Stelle (der z.B. "Oberflächenpeg-el" ergab statt
	   "Oberflächen-pegel"). overflow-wrap bleibt als Fallback fuer Browser
	   ohne hyphens-Unterstuetzung. */
	min-width: 0;
	white-space: normal;
	hyphens: auto;
	-webkit-hyphens: auto;
	overflow-wrap: break-word;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
.gedo-type-filter-options button:hover { border-color: var(--gedo-navy, #0f3d63); background: rgba(255, 255, 255, 0.7); transform: translateY(-1px); }
.gedo-type-filter-options button.active {
	background: var(--gedo-navy, #0f3d63); color: #fff; border-color: var(--gedo-navy, #0f3d63);
	box-shadow: 0 3px 12px rgba(15, 61, 99, 0.45);
	font-weight: 700;
}
@media (max-width: 640px) {
	.gedo-type-filter { width: auto; }
	/* Klapp-Verhalten nur mobil: Toggle-Leiste sichtbar, Optionen-Grid per
	   Default eingeklappt (kein .is-open) - auf Desktop bleibt das Panel
	   wie gehabt immer offen (siehe Basisregeln oben, keine Aenderung dort). */
	.gedo-filter-toggle { display: flex; }
	.gedo-type-filter-options {
		display: none;
		width: auto;
		margin-top: 10px;
	}
	.gedo-type-filter.is-open .gedo-type-filter-options { display: grid; }
}

.gedo-detail-meta { display: flex; flex-wrap: wrap; gap: 24px; margin-bottom: 20px; font-size: 0.9rem; color: var(--gedo-text-muted, #5b6570); }
.gedo-range-buttons { display: flex; gap: 8px; margin-bottom: 16px; }
.gedo-range-buttons button {
	padding: 6px 14px; border-radius: 8px; border: 1px solid var(--gedo-border, #dfe6ec);
	background: #fff; cursor: pointer; font-size: 0.85rem;
}
.gedo-range-buttons button.active { background: var(--gedo-navy, #0f3d63); color: #fff; border-color: var(--gedo-navy, #0f3d63); }

#gedo-chart { margin-bottom: 24px; }
#gedo-detail-map { position: relative; z-index: 0; height: 320px; border-radius: 12px; border: 1px solid var(--gedo-border, #dfe6ec); margin-bottom: 24px; }

.gedo-back-link { display: inline-block; margin-bottom: 16px; font-weight: 600; }

/* Trend-Chart als Bottom-Sheet direkt in der Karte (Karten-Klick statt
   eigener Detailseite, siehe map.js) - Vorbild Komoot-Hoehenprofil: schiebt
   sich nur von unten INS Kartenbild, kein dimmendes Backdrop, Karte bleibt
   komplett sichtbar/bedienbar waehrend das Panel offen ist. Positioniert
   relativ zu .gedo-map-shell (nicht zum Viewport), damit es nur den
   Kartenbereich ueberlagert, nicht die Seite darunter (Tabelle/Footer). */
.gedo-trend-panel {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 60;
	/* Gleiche Deckkraft wie die anderen Glasflaechen (.gedo-map-overlay/
	   .site-header) - 0.92 war praktisch deckend Weiss, davon war im
	   Screenshot kein "Frosty"-Effekt mehr zu sehen (User-Feedback). */
	background: rgba(255, 255, 255, 0.6);
	-webkit-backdrop-filter: blur(16px) saturate(160%);
	backdrop-filter: blur(16px) saturate(160%);
	border-top: 1px solid rgba(255, 255, 255, 0.5);
	box-shadow: 0 -8px 24px rgba(8, 41, 68, 0.2);
	padding: 14px 16px 16px;
	/* Kompakt genug bemessen (siehe reduzierte Chart-/Abstands-Werte unten),
	   um ohne Scrollen reinzupassen - overflow-y bleibt als Sicherheitsnetz
	   fuer sehr schmale Bildschirme/lange Namen.
	   display:flex + Spalten-Richtung: die Kopfzeile behaelt ihre natuerliche
	   Hoehe, der Chart (flex: 1 unten) nimmt sich den kompletten Rest bis
	   zum unteren Rand - kein Leerraum mehr unter dem Chart (User-Wunsch,
	   dafuer musste "Vollstaendige Seite oeffnen" mit in die Kopfzeile
	   umziehen, siehe .gedo-trend-panel-actions). */
	display: flex;
	flex-direction: column;
	/* Feste Hoehe statt nur max-height: flex:1 auf #gedo-modal-chart braucht
	   einen konkreten Rahmen, den es fuellen kann - mit nur max-height auf
	   einer sonst inhaltsgetriebenen Box haette der Chart nichts, "bis wohin"
	   er wachsen soll, und wuerde auf seine natuerliche Groesse zurueckfallen. */
	height: 45%;
	overflow-y: auto;
	transform: translateY(100%);
	transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.gedo-trend-panel.open { transform: translateY(0); }
@media (max-width: 640px) {
	.gedo-trend-panel { height: 60%; padding: 12px 16px 16px; }
}
.gedo-trend-panel-close {
	position: absolute; top: 10px; right: 14px;
	width: 32px; height: 32px; border-radius: 50%;
	border: none; background: var(--gedo-sky, #eaf4fb);
	color: var(--gedo-navy, #0f3d63);
	font-size: 1.3rem; line-height: 1; cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease;
}
.gedo-trend-panel-close:hover { background: var(--gedo-border, #dfe6ec); transform: scale(1.1); }

/* Kopfzeile (Titel+Meta) und Zeitraum-Buttons nebeneinander statt
   untereinander (User-Feedback: drei Zeilen allein fuer Ueberschrift/
   Status/Buttons verschenken zu viel Platz im ohnehin kompakten
   Bottom-Sheet). padding-right haelt Abstand zum Schliessen-Button oben
   rechts, flex-wrap laesst die Buttons auf sehr schmalen Bildschirmen in
   eine zweite Zeile fallen statt zu ueberlaufen. */
.gedo-trend-panel-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 6px 20px;
	margin-bottom: 10px;
	padding-right: 36px;
}
.gedo-modal-header {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
}
.gedo-modal-header h2 { margin: 0; color: var(--gedo-navy, #0f3d63); font-size: 1.1rem; }
.gedo-modal-meta { font-size: 0.85rem; color: var(--gedo-text-muted, #5b6570); white-space: nowrap; }

/* "Details"-Link zieht mit in die Kopfzeile (statt unter dem Chart) - macht
   den Chart darunter frei, bis ganz nach unten durchzugehen (User-Wunsch). */
.gedo-trend-panel-actions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
.gedo-trend-panel .gedo-range-buttons { margin-bottom: 0; }
.gedo-trend-panel-actions .gedo-back-link { margin: 0; white-space: nowrap; }

/* flex: 1 im Spalten-Flex-Container .gedo-trend-panel (siehe dort) - der
   Chart bekommt den kompletten verbleibenden Platz bis zum unteren Rand
   statt einer festen min-height. min-height: 0 ist noetig, damit ein
   Flex-Kind ueberhaupt kleiner werden darf als sein Inhalt "moechte" (sonst
   ignoriert der Browser flex:1 hier und der Container waechst ungebremst). */
#gedo-modal-chart { flex: 1; min-height: 0; }