/* ##############################################################################################
   css/styles.css
   ############################################################################################## */

html, body {margin: 0; padding: 0; height: 100%; width: 100%; font-family: Arial, sans-serif; overflow: hidden !important; position: fixed;}
#pagetitle { font-family: Tahoma, Geneva, sans-serif; font-size: large; font-weight: bold; }
#pageinfo { margin: 10px 0px 5px 0px; font-size: small; }
h1 { font-size: large; margin-top:0px;}
h2 { font-size:larger; text-decoration:underline;}
h3 {margin: 10px 0px 0px 0px;}

/* Karte */
#map {position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: default !important; display: block;}
#map div, #map span, #map button, #map a { cursor: default !important; }

/* Fadenkreuz */
#crosshair { position: fixed; top: 50%; left: 50%; width: 80px; height: 80px; pointer-events: none; z-index: 5000; transform: translate(-50%, -50%); }
#crosshair::before, #crosshair::after { content: ""; position: absolute; }
#crosshair::before { top: 0; left: 50%; width: 0px; height: 100%; border-left: 1px solid #FFF; border-right: 1px solid #000; transform: translateX(-50%); }
#crosshair::after { left: 0; top: 50%; width: 100%; height: 0px; border-top: 1px solid #FFF; border-bottom: 1px solid #000; transform: translateY(-50%); }

/* Toolbar */
#toolbar { position: fixed; z-index: 1000; display: flex; gap: 5px; }
#toolbar button { padding: 8px 12px; font-size: 16px; cursor: default;}
#toolbar button.activeTool { }

/* InfoPanel & Tool-Texte */
#infoPanel { position: fixed; top: 10px; left: 10px; z-index: 1000; display: flex; align-items: flex-start; gap: 10px; padding: 10px; box-sizing: border-box; transition: width 0.3s, max-width 0.3s; max-width: 100%; min-width: 33%; }
#infoPanel img { height: 50px; flex-shrink: 0; }
#infoPanel.no-tool-active img { height: 80px; }
#infoContent { flex: 1; position: relative; max-height: 70vh; overflow-y: auto; padding: 5px; padding-bottom: 0px;}

.tool-info-title { font-weight: bold; margin-bottom: 4px; }
.tool-info-desc { font-size: 13px; margin-bottom: 6px; }
.tool-summary { font-weight: bold; margin-bottom: 5px; }
.tool-summary-bordered { border-top: 1px solid #ccc; padding-top: 5px; margin-top: 5px; }

/* Scroll-Listen */
.scroll-list-wrapper { max-height: 150px; overflow-y: auto; border-top: 1px solid #ccc; margin-top: 5px; padding-top: 3px; }
#searchScrollList, #areaScrollList, #distanceScrollList {max-height: 64px; overflow-y: auto; border-top: 1px solid #ccc; margin-top: 5px; padding: 0;}

/* Tabellen-Reihen */
.segment-row, .coord-row { display: flex; align-items: center; gap: 4px; font-size: 10px; border-bottom: 1px solid #f0f0f0; padding: 2px 4px; }
.seg-label { width: 32px; white-space: nowrap; }
.coord-label { width: 100px; font-weight: bold; }
.coord-value { font-family: monospace; }
.bar-bg { flex: 1; border-radius: 3px; height: 6px; position: relative; }
.bar-fill { display: block; height: 100%; border-radius: 3px; }

/* Tool Farben */
.bg-dist { background: #ccffcc; } .fill-dist { background: #00ff00; }
.bg-area { background: #cce5ff; } .fill-area { background: #0000ff; }
.bg-search { background: #ffcccc; } .fill-search { background: #ff0000; }

/* Eingaben & Buttons */
.tool-input { width: 100%; padding: 8px; box-sizing: border-box; cursor: text; }
.tool-btn-row { display: flex; gap: 5px; margin-top: 8px; font-size:20px}
.tool-btn { flex: 1; padding: 6px; cursor: default; font-size: 12px; }
.single-btn { padding: 4px; font-size: 10px; cursor: default; }
.marker-delete-btn { width: 100%; background: #ff4444; color: #fff; border: none; border-radius: 4px; padding: 5px; cursor: default; font-size: 10px; font-weight: bold; margin-top: 5px; }

/* Hidden Input für File Upload */
#gpxFileInput { display: none; }

/* Popups & Details */
.marker-popup { font-size: 11px; min-width: 150px; }
.marker-popup-header { border-bottom: 1px solid #ccc; font-weight: bold; margin-bottom: 6px; padding-bottom: 4px; }
.marker-popup-coords { font-family: monospace; color: #333; }

.details-view { display: none; flex-direction: column; gap: 8px; }
.details-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #ccc; padding-bottom: 5px; }
.details-content { font-size: 12px; max-height: 250px; overflow-y: auto; padding:10px 10px 0px 0px;}
.details-content div {}
.close-btn { background: #ff4444; color: #fff; border: none; border-radius: 4px; cursor: default; width: 24px; height: 24px; font-weight: bold; }

/* Wetter Styles */
#weatherOutput { width: 99%; }
.weather-loading {}
.info-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-weight: bold; border-bottom: 1px solid #ccc; padding-bottom: 4px; }
.info-header-row span { font-size: 12px; }
.weather-grid-5 { display: flex; gap: 4px; }
.weather-card-small { flex: 1; text-align: center; padding: 4px; font-size: 14px; }
.weather-icon-big { font-size: 40px; margin: 4px 0; }
.weather-icon-detail { flex: 0 0 50px; text-align: center; font-size: 80px; border-right: 1px solid #ddd; padding-right: 10px; }
.weather-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 10px; flex: 1; }
.weather-sun-info { grid-column: span 2; color: #666; font-size: 11px; margin-top: 2px; }

/* Route & Suche */
.route-step-card { padding: 8px; font-size: 11px; display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.route-step-icon { flex: 0 0 30px; text-align: center; font-size: 20px; border-right: 1px solid #ddd; padding-right: 8px; }
.search-error { font-size: 11px; color: #a00; margin-top: 4px; }
.elevation-wrapper { width: 100%; }
.elevation-chart-container { height: 100px; display: flex; font-size: 9px; margin-top: 5px; }

/* Impressum & Datenschutz */
.legalContent { font-size:12px;}

/* Responsive */
@media (orientation: landscape) { 
  #toolbar { flex-direction: column; top: 50%; right: 10px; transform: translateY(-50%); } 
  #infoPanel { max-width: 50%; width: 50% !important; } 
  .elevation-chart-container { height: 200px; }
}
@media (orientation: portrait) { 
  #infoPanel { top: 0; left: 0; right: 0; width: 100%; border-radius: 0; border: none; padding: 5px 10px; flex-direction: row; } 
  #infoPanel img { height: 40px; } 
  #toolbar { bottom: 0; left: 0; width: calc(100% - 10px); display: grid; grid-template-columns: repeat(4, 1fr); margin: 5px; } 
}
.gm-bundled-control { display: none !important; }

.weatherLink{ text-align:center; text-decoration:none; font-size:small; margin:5px 0px 0px 0px;}


/* Rahmen, Schatten, Hintergrund */
#infoPanel, .weather-card-small, .route-step-card {background: rgba(255,255,255,0.9); box-shadow: 0px 0px 5px #fff; border: 1px solid #aaa; border-radius: 5px; }

/* Aussehen der Buttons */
#toolbar button, .tool-input, .tool-btn, .single-btn { background: rgba(255,255,255,0.9); box-shadow: 0px 0px 5px #fff; border: 1px solid #aaa; border-radius: 5px;}

#toolbar button.activeTool, .tool-btn.active { background-color: #00aaff; color: #fff; border: 1px solid #00f; box-shadow: 0px 0px 5px #000;}
button:hover { border-color:#333333 !important; cursor:pointer !important;}