/* Das data-theme-Attribut setzt ein Inline-Skript im : gespeicherte Wahl, sonst die Systemeinstellung. */ :root { color-scheme: light; --bg: #FAF8F5; --surface: #FFFFFF; --ink: #1A1815; --muted: #8C857B; --hairline: rgba(26, 24, 21, 0.09); --accent: #C4553B; --accent-soft: rgba(196, 85, 59, 0.14); --shadow: 0 1px 2px rgba(26,24,21,.05), 0 8px 24px -12px rgba(26,24,21,.18); } :root[data-theme="dark"] { color-scheme: dark; --bg: #0D0D0F; --surface: #16161A; --ink: #EDEAE5; --muted: #7E7972; --hairline: rgba(237, 234, 229, 0.10); --accent: #E8735A; --accent-soft: rgba(232, 115, 90, 0.16); --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7); } * { box-sizing: border-box; } /* Muss die display-Regeln unten schlagen, sonst zeigt [hidden] keine Wirkung. */ [hidden] { display: none !important; } html, body { height: 100%; margin: 0; } body { display: flex; flex-direction: column; background: var(--bg); color: var(--ink); font: 400 15px/1.5 ui-sans-serif, -apple-system, "Segoe UI", Inter, Roboto, sans-serif; -webkit-font-smoothing: antialiased; overflow: hidden; } /* ---------- Kopfzeile ---------- */ .bar { flex: none; display: flex; align-items: baseline; gap: 12px; padding: 18px 24px 16px; padding-top: max(18px, env(safe-area-inset-top)); } h1 { margin: 0; font-size: 15px; font-weight: 550; letter-spacing: -0.011em; } .filename { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; } .actions { margin-left: auto; display: flex; align-items: center; gap: 16px; } .reset, .theme, .linkbutton { appearance: none; border: 0; background: none; padding: 0; margin: 0; font: inherit; color: var(--muted); cursor: pointer; transition: color .15s; } .reset { font-size: 13px; } .reset:hover, .theme:hover, .linkbutton:hover { color: var(--accent); } .theme { display: grid; place-items: center; width: 20px; height: 20px; align-self: center; } .theme svg { width: 16px; height: 16px; display: block; } :root[data-theme="dark"] .icon-moon { display: none; } :root[data-theme="light"] .icon-sun { display: none; } .linkbutton { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--accent-soft); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; } /* ---------- Bühne ---------- */ .stage { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 24px max(24px, env(safe-area-inset-bottom)); } .view { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 20px; } .map { flex: 1; min-height: 0; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); z-index: 0; } .panel { flex: none; } /* ---------- Dropzone ---------- */ .dropzone { flex: 1; min-height: 0; display: grid; place-items: center; border: 1px dashed var(--hairline); border-radius: 14px; text-align: center; transition: border-color .2s, background .2s; } .dropzone-inner { padding: 32px; } .dropzone-icon { width: 60px; height: 40px; color: var(--muted); opacity: .5; margin-bottom: 22px; } .dropzone-title { margin: 0 0 6px; font-size: 17px; font-weight: 500; letter-spacing: -0.014em; } .dropzone-hint { margin: 0; color: var(--muted); font-size: 14px; } .dropzone-note { margin: 26px 0 0; color: var(--muted); font-size: 12px; opacity: .65; } body.dragging .dropzone { border-color: var(--accent); background: var(--accent-soft); } .overlay { position: fixed; inset: 0; z-index: 800; display: none; place-items: center; background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: blur(3px); color: var(--accent); font-size: 17px; font-weight: 500; pointer-events: none; } body.dragging .overlay { display: grid; } /* ---------- Zahlenzeile ---------- */ .stats { display: flex; flex-wrap: wrap; gap: 4px 28px; padding: 0 4px 14px; border-bottom: 1px solid var(--hairline); margin-bottom: 14px; } .stat { display: flex; align-items: baseline; gap: 7px; } .stat-value { font-size: 15px; font-weight: 550; font-variant-numeric: tabular-nums; letter-spacing: -0.015em; } .stat-label { font-size: 12px; color: var(--muted); } /* ---------- Höhenprofil ---------- */ .profile { position: relative; height: 168px; touch-action: pan-y; } .chart { display: block; width: 100%; height: 100%; overflow: visible; } .chart .axis { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; } .chart .gridline { stroke: var(--hairline); stroke-width: 1; } .chart[hidden] { display: none; } .chart .cursor[hidden] { display: none; } .chart .area { fill: url(#elevFill); } .chart .fill-top { stop-color: var(--accent); stop-opacity: .24; } .chart .fill-bottom { stop-color: var(--accent); stop-opacity: 0; } .chart .line { fill: none; stroke: var(--accent); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; } .chart .cursor-line { stroke: var(--ink); stroke-width: 1; opacity: .35; } .chart .cursor-dot { fill: var(--accent); stroke: var(--bg); stroke-width: 2.5; } .readout { position: absolute; top: 0; padding: 5px 9px; border-radius: 7px; background: var(--surface); box-shadow: var(--shadow); color: var(--ink); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; transform: translateX(-50%); } .readout .sep { color: var(--muted); padding: 0 5px; } .no-elevation { display: grid; place-items: center; height: 100%; color: var(--muted); font-size: 13px; } /* ---------- Fehler ---------- */ .error { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 900; padding: 11px 18px; border-radius: 10px; background: var(--surface); box-shadow: var(--shadow); color: var(--accent); font-size: 13px; } /* ---------- Leaflet zähmen ---------- */ .leaflet-container { background: var(--surface); border-radius: 14px; font: inherit; } .leaflet-control-zoom { border: 0 !important; box-shadow: var(--shadow) !important; border-radius: 9px !important; overflow: hidden; } .leaflet-control-zoom a { background: var(--surface) !important; color: var(--ink) !important; border-color: var(--hairline) !important; width: 30px !important; height: 30px !important; line-height: 29px !important; font-size: 17px !important; font-weight: 400 !important; } .leaflet-control-zoom a:hover { color: var(--accent) !important; } .leaflet-control-attribution { background: color-mix(in srgb, var(--surface) 78%, transparent) !important; color: var(--muted) !important; font-size: 10px !important; padding: 1px 7px !important; border-radius: 7px 0 0 0 !important; } .leaflet-control-attribution a { color: var(--muted) !important; } /* ---------- Schmale Fenster ---------- */ @media (max-width: 620px) { .bar { padding: 14px 16px 12px; } .stage { padding: 0 16px max(16px, env(safe-area-inset-bottom)); } .view { gap: 14px; } .profile { height: 132px; } .stats { gap: 4px 20px; } .filename { display: none; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }