/* ============================================================================ Traveller – Oberfläche ---------------------------------------------------------------------------- Angelehnt an Apple Maps: die Karte bleibt sichtbar, die Inhalte liegen als durchscheinende Glasflächen darüber. Farben, Abstände und Schrift folgen den System-Vorgaben von iOS/macOS. Das Farbschema kommt aus der Systemeinstellung; `data-theme` auf überschreibt sie, wenn im Kopf bewusst gewählt wurde. ========================================================================= */ :root { color-scheme: light dark; /* System-Akzente (iOS) */ --blue: #007aff; --blue-press: #0062cc; /* Fahrbarkeit – Bedeutungsfarben, ebenfalls aus der Systempalette */ --top: #34c759; --good: #6dcf5b; --ok: #ffcc00; --poor: #ff9500; --bad: #ff3b30; /* Flächen und Schrift, hell */ --bg: #e9eef2; --bg-tint-a: rgba(0, 122, 255, .10); --bg-tint-b: rgba(52, 199, 89, .08); --glass: rgba(255, 255, 255, .72); --glass-strong: rgba(255, 255, 255, .86); --glass-thin: rgba(255, 255, 255, .52); --glass-sunken: rgba(118, 118, 128, .10); --glass-edge: rgba(255, 255, 255, .65); --glass-sheen: rgba(255, 255, 255, .55); --separator: rgba(60, 60, 67, .13); --label: #1c1c1e; --label-2: rgba(60, 60, 67, .62); --label-3: rgba(60, 60, 67, .38); --fill: rgba(118, 118, 128, .12); --fill-strong: rgba(118, 118, 128, .18); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .06), 0 4px 12px rgba(0, 0, 0, .06); --shadow: 0 2px 6px rgba(0, 0, 0, .07), 0 12px 32px rgba(0, 0, 0, .10); --shadow-lift: 0 4px 10px rgba(0, 0, 0, .10), 0 20px 48px rgba(0, 0, 0, .14); --r-lg: 20px; --r-md: 14px; --r-sm: 10px; --header-h: 60px; --blur: saturate(180%) blur(24px); --layers-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M12 2 2 7l10 5 10-5-10-5z'/%3E%3Cpath d='M2 17l10 5 10-5'/%3E%3Cpath d='M2 12l10 5 10-5'/%3E%3C/svg%3E"); --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", system-ui, Roboto, "Helvetica Neue", sans-serif; } /* Dunkel: aus der Systemeinstellung … */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --blue: #0a84ff; --blue-press: #409cff; --top: #30d158; --good: #7eda5a; --ok: #ffd60a; --poor: #ff9f0a; --bad: #ff453a; --bg: #0b0b0d; --bg-tint-a: rgba(10, 132, 255, .16); --bg-tint-b: rgba(48, 209, 88, .10); --glass: rgba(32, 32, 35, .68); --glass-strong: rgba(38, 38, 42, .86); --glass-thin: rgba(28, 28, 31, .48); --glass-sunken: rgba(118, 118, 128, .24); --glass-edge: rgba(255, 255, 255, .10); --glass-sheen: rgba(255, 255, 255, .07); --separator: rgba(84, 84, 88, .55); --label: #f5f5f7; --label-2: rgba(235, 235, 245, .62); --label-3: rgba(235, 235, 245, .34); --fill: rgba(118, 118, 128, .24); --fill-strong: rgba(118, 118, 128, .36); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 12px rgba(0, 0, 0, .35); --shadow: 0 2px 8px rgba(0, 0, 0, .45), 0 16px 40px rgba(0, 0, 0, .5); --shadow-lift: 0 6px 14px rgba(0, 0, 0, .5), 0 24px 60px rgba(0, 0, 0, .6); } } /* … oder ausdrücklich gewählt. */ :root[data-theme="dark"] { color-scheme: dark; --blue: #0a84ff; --blue-press: #409cff; --top: #30d158; --good: #7eda5a; --ok: #ffd60a; --poor: #ff9f0a; --bad: #ff453a; --bg: #0b0b0d; --bg-tint-a: rgba(10, 132, 255, .16); --bg-tint-b: rgba(48, 209, 88, .10); --glass: rgba(32, 32, 35, .68); --glass-strong: rgba(38, 38, 42, .86); --glass-sunken: rgba(118, 118, 128, .24); --glass-edge: rgba(255, 255, 255, .10); --glass-sheen: rgba(255, 255, 255, .07); --separator: rgba(84, 84, 88, .55); --label: #f5f5f7; --label-2: rgba(235, 235, 245, .62); --label-3: rgba(235, 235, 245, .34); --fill: rgba(118, 118, 128, .24); --fill-strong: rgba(118, 118, 128, .36); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 12px rgba(0, 0, 0, .35); --shadow: 0 2px 8px rgba(0, 0, 0, .45), 0 16px 40px rgba(0, 0, 0, .5); --shadow-lift: 0 6px 14px rgba(0, 0, 0, .5), 0 24px 60px rgba(0, 0, 0, .6); } :root[data-theme="light"] { color-scheme: light; } * { box-sizing: border-box; } [hidden] { display: none !important; } body { margin: 0; min-height: 100vh; font-family: var(--font); font-size: 15px; line-height: 1.47; color: var(--label); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* * Damit Glas wie Glas wirkt, braucht es etwas dahinter: zwei weiche Farbfelder * im Hintergrund, die beim Scrollen stehen bleiben. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: radial-gradient(80vw 60vh at 12% -8%, var(--bg-tint-a), transparent 70%), radial-gradient(70vw 55vh at 92% 8%, var(--bg-tint-b), transparent 68%); } h1, h2, h3, h4 { margin: 0; line-height: 1.2; font-weight: 600; letter-spacing: -.021em; } a { color: var(--blue); text-decoration: none; } a:hover { text-decoration: underline; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 30; padding: 12px 18px; border-radius: 0 0 var(--r-md) 0; background: var(--blue); color: #fff; font-weight: 590; } .skip-link:focus { left: 0; } /* --------------------------------------------------------------- Glasfläche */ /* * Grundrezept: durchscheinende Fläche, dahinter unscharf und gesättigt, dazu * eine helle Oberkante als Lichtreflex und ein weicher Schlagschatten. */ .glass, .sidebar, .day, .stopcard, .summary-card, .status, .empty { position: relative; background: var(--glass); border: 1px solid var(--glass-edge); border-radius: var(--r-lg); box-shadow: var(--shadow); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); } /* Der Lichtreflex an der Oberkante – das, was Glas plastisch macht. */ .glass::after, .day::after, .stopcard::after, .summary-card::after, .empty::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, var(--glass-sheen), transparent 42%); opacity: .8; } /* Wo kein Weichzeichner zur Verfügung steht, muss die Fläche decken. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass, .sidebar, .day, .stopcard, .summary-card, .status, .empty, .view-switch, .suggestions, .chrome-btn, .map-legend { background: var(--glass-strong); } } /* ------------------------------------------------------------------ Bühne */ /* * Anordnung wie in Apple Maps: Die Karte füllt das Fenster, alles andere * schwebt darüber. `.shell` fängt keine Klicks ab – nur ihre Kinder tun das, * damit die Karte überall dort bedienbar bleibt, wo nichts darüber liegt. */ .map-stage { position: fixed; inset: 0; z-index: 0; background: var(--fill); } .shell { position: fixed; inset: 0; z-index: 1; pointer-events: none; padding: 12px; } .shell > * { pointer-events: auto; } /* --------------------------------------------------------- Seitenleiste */ .sidebar { position: absolute; top: 12px; bottom: 12px; left: 12px; width: min(430px, calc(100vw - 24px)); display: flex; flex-direction: column; border-radius: var(--r-lg); background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-lift); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); overflow: hidden; } @media (min-width: 1600px) { .sidebar { width: 470px; } } .sidebar-grabber { display: none; } .sidebar-head { display: flex; align-items: center; gap: 10px; padding: 14px 14px 12px 16px; border-bottom: .5px solid var(--separator); } .brand-mark { width: 32px; height: 32px; flex: none; border-radius: 9px; display: grid; place-items: center; font-size: 18px; background: linear-gradient(160deg, var(--blue), color-mix(in srgb, var(--blue) 55%, #4cd964)); box-shadow: var(--shadow-sm); } .brand-text { min-width: 0; } .brand-text h1 { font-size: 17px; letter-spacing: -.022em; } .brand-sub { margin: 0; font-size: 12px; color: var(--label-2); } .head-actions { display: flex; gap: 6px; margin-left: auto; } /* Runde Knöpfe wie in der Kopfzeile von Apple Maps */ .round-btn { width: 30px; height: 30px; flex: none; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; font: inherit; font-size: 14px; background: var(--fill); color: var(--label-2); transition: background .16s ease, color .16s ease; } .round-btn:hover { background: var(--fill-strong); color: var(--label); } .round-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } /* Der eigentliche Inhalt scrollt innerhalb der Leiste. */ .sidebar-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 14px 20px; scrollbar-width: thin; } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ------------------------------------------------------- Bedienelemente */ .pill-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .pill-field, .pill-btn { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 12px; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 510; letter-spacing: -.01em; background: var(--glass-sunken); color: var(--label); border: 0; cursor: pointer; transition: background .16s ease; } .pill-btn { color: var(--blue); } .pill-field:hover, .pill-btn:hover { background: var(--fill-strong); } .pill-quiet { color: var(--label-2); } .pill-field input, .pill-field select { font: inherit; font-size: 14px; font-weight: 510; color: inherit; background: transparent; border: 0; padding: 0; width: auto; -webkit-appearance: none; appearance: none; cursor: pointer; } .pill-field select { padding-right: 14px; } .pill-field:has(select) { background-image: linear-gradient(45deg, transparent 50%, var(--label-2) 50%), linear-gradient(135deg, var(--label-2) 50%, transparent 50%); background-position: right 13px center, right 9px center; background-size: 4.5px 4.5px, 4.5px 4.5px; background-repeat: no-repeat; padding-right: 26px; } .pill-field input:focus, .pill-field select:focus { outline: none; } .pill-field:focus-within { outline: 3px solid color-mix(in srgb, var(--blue) 55%, transparent); outline-offset: 2px; } .trip-name { display: block; margin-top: 10px; } .trip-name input { font: inherit; font-size: 17px; font-weight: 620; letter-spacing: -.022em; width: 100%; padding: 4px 2px; border: 0; background: transparent; color: var(--label); } .trip-name input::placeholder { color: var(--label-3); font-weight: 590; } .trip-name input:focus { outline: none; } .trip-name:focus-within { box-shadow: inset 0 -2px 0 var(--blue); } /* ---------------------------------------------------- Etappen als Liste */ /* * Eine zusammenhängende Karte mit Trennlinien statt einzelner Kästen – so * gruppiert Apple zusammengehörige Zeilen. */ .group-card { list-style: none; margin: 12px 0 0; padding: 0; background: var(--glass-strong); border-radius: var(--r-md); box-shadow: 0 0 0 .5px var(--separator), var(--shadow-sm); overflow: hidden; } .stop { display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 12px; position: relative; } .stop + .stop::before { content: ""; position: absolute; top: 0; left: 44px; right: 0; border-top: .5px solid var(--separator); } .stop-pin { width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 620; color: #fff; background: var(--blue); } .stop.is-unresolved .stop-pin { background: var(--label-3); } .stop-body { flex: 1; min-width: 0; } .place-field { position: relative; } .stop-place { font: inherit; font-size: 15px; width: 100%; padding: 2px 0; border: 0; background: transparent; color: var(--label); } .stop-place:focus { outline: none; } .stop-place::placeholder { color: var(--label-3); } .stop-body:focus-within .stop-place { box-shadow: inset 0 -1.5px 0 var(--blue); } .stop-dates { margin: 1px 0 0; font-size: 12px; color: var(--label-2); } .stop-dates b { color: var(--label-2); font-weight: 590; } .stop.is-unresolved .stop-dates { color: var(--poor); } /* Übernachtungen als kompaktes Feld am Zeilenende */ .nights { display: inline-flex; align-items: center; gap: 2px; flex: none; padding: 3px 8px; border-radius: 7px; background: var(--glass-sunken); font-size: 12px; color: var(--label-3); } .nights input { font: inherit; font-size: 13px; font-weight: 590; color: var(--label); width: 22px; padding: 0; border: 0; background: transparent; text-align: right; -moz-appearance: textfield; } .nights input::-webkit-outer-spin-button, .nights input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .nights input:focus { outline: none; } .nights:focus-within { outline: 2px solid color-mix(in srgb, var(--blue) 55%, transparent); } .stop-tools { display: flex; gap: 2px; flex: none; } .icon-btn { font: inherit; width: 24px; height: 24px; line-height: 1; flex: none; font-size: 12px; border-radius: 6px; border: 0; cursor: pointer; background: transparent; color: var(--label-3); transition: background .16s ease, color .16s ease; } .icon-btn:hover { background: var(--fill); color: var(--label); } .icon-btn:disabled { opacity: .3; cursor: default; } .icon-btn:disabled:hover { background: transparent; color: var(--label-3); } /* Blaue Hinzufügen-Zeile, unmittelbar an der Liste */ .plan-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; } .add-row { display: inline-flex; align-items: center; gap: 8px; flex: 1; padding: 8px 10px; border: 0; border-radius: var(--r-sm); cursor: pointer; font: inherit; font-size: 14.5px; font-weight: 510; color: var(--blue); background: transparent; text-align: left; transition: background .16s ease; } .add-row:hover { background: var(--fill); } .add-icon { width: 20px; height: 20px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-weight: 400; background: var(--blue); color: #fff; line-height: 1; } .plan-summary { margin: 8px 2px 0; font-size: 12.5px; color: var(--label-2); } /* Ortsvorschläge */ .suggestions { position: absolute; z-index: 12; top: calc(100% + 6px); left: -8px; right: -8px; margin: 0; padding: 6px; list-style: none; max-height: 260px; overflow-y: auto; background: var(--glass-strong); border: 1px solid var(--glass-edge); border-radius: var(--r-md); box-shadow: var(--shadow-lift); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); } .suggestions li { padding: 7px 10px; border-radius: 8px; cursor: pointer; font-size: 14.5px; } .suggestions li:hover, .suggestions li.is-active { background: var(--blue); color: #fff; } .suggestions li:hover .sug-sub, .suggestions li.is-active .sug-sub { color: rgba(255, 255, 255, .8); } .suggestions .sug-sub { display: block; font-size: 12px; color: var(--label-2); } .suggestions .sug-empty { color: var(--label-2); cursor: default; } .suggestions .sug-empty:hover { background: transparent; color: var(--label-2); } /* ------------------------------------------------- Karten-Bedienelemente */ .map-chrome { position: absolute; top: 12px; right: 12px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; max-width: min(430px, calc(100vw - 24px)); } .chrome-btn { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px; border: 1px solid var(--glass-edge); border-radius: 999px; font: inherit; font-size: 13.5px; font-weight: 510; color: var(--label); cursor: pointer; background: var(--glass-thin); box-shadow: var(--shadow); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); } .chrome-btn:hover { background: var(--glass-strong); } .chrome-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .map-legend { display: flex; gap: 9px; flex-wrap: wrap; justify-content: flex-end; margin: 0; padding: 6px 11px; border-radius: 999px; font-size: 11px; color: var(--label-2); white-space: nowrap; background: var(--glass-thin); border: 1px solid var(--glass-edge); box-shadow: var(--shadow); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); } .legend-item { display: inline-flex; align-items: center; gap: 4px; } .legend-item i { width: 12px; height: 3.5px; border-radius: 2px; background: var(--c); display: inline-block; } .map-note { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); margin: 0; padding: 10px 16px; max-width: 420px; border-radius: var(--r-md); font-size: 13.5px; color: var(--label-2); background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: var(--shadow); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); } /* ------------------------------------------------- Schmale Schirme: Blatt */ /* * Auf dem Handy wird die Leiste zum Blatt, das über der Karte hochgezogen * wird. Das übernimmt der Bildlauf der Hülle – ohne Ziehlogik in JavaScript, * die auf Berührungsgeräten erfahrungsgemäß hakt. */ @media (max-width: 860px) { .shell { overflow-y: auto; overscroll-behavior-y: contain; padding: 0; scroll-snap-type: y proximity; } .shell::before { content: ""; display: block; height: 46vh; scroll-snap-align: start; } .sidebar { position: static; width: auto; min-height: 62vh; border-radius: var(--r-lg) var(--r-lg) 0 0; border-bottom: 0; scroll-snap-align: start; } .sidebar-scroll { overflow: visible; } .sidebar-grabber { display: block; width: 36px; height: 5px; border-radius: 3px; margin: 8px auto 0; background: var(--label-3); } .sidebar-head { padding-top: 10px; } .map-chrome { position: fixed; top: 10px; right: 10px; } .map-note { position: fixed; bottom: auto; top: 60px; } } /* Auf sehr schmalen Schirmen verdeckt die Legende mehr, als sie erklärt. */ @media (max-width: 560px) { .map-legend { display: none; } } /* ------------------------------------------------------------- Ergebnisse */ .results { margin-top: 18px; } .status { display: flex; align-items: center; gap: 11px; padding: 13px 17px; border-radius: var(--r-md); font-size: 14px; color: var(--label-2); margin-bottom: 16px; } .status.is-error { color: var(--label); box-shadow: var(--shadow), inset 0 0 0 1px color-mix(in srgb, var(--bad) 45%, transparent); } .status span { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .spinner { width: 15px; height: 15px; flex: none; border-radius: 50%; border: 2px solid var(--fill-strong); border-top-color: var(--blue); animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .summary { display: grid; gap: 12px; margin-bottom: 18px; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); } .summary-card { padding: 13px 16px; border-radius: var(--r-md); } .summary-card .k { font-size: 12px; font-weight: 590; color: var(--label-2); letter-spacing: -.004em; } .summary-card .v { font-size: 21px; font-weight: 620; letter-spacing: -.026em; margin-top: 2px; } .summary-card .s { font-size: 12.5px; color: var(--label-2); } /* Segmentsteuerung im Stil von iOS */ .view-switch { position: relative; display: inline-flex; padding: 2px; margin-bottom: 16px; background: var(--glass-sunken); border-radius: var(--r-sm); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .view-thumb { position: absolute; top: 2px; bottom: 2px; left: 2px; width: calc(50% - 2px); border-radius: 8px; background: var(--glass-strong); box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .04); transition: transform .28s cubic-bezier(.32, .72, 0, 1); } .view-switch:has(.view-btn:last-child.is-active) .view-thumb { transform: translateX(100%); } .view-btn { position: relative; z-index: 1; flex: 1; font: inherit; font-size: 13.5px; font-weight: 510; padding: 6px 18px; border: 0; background: transparent; color: var(--label); cursor: pointer; transition: color .2s ease; } .view-btn:not(.is-active) { color: var(--label-2); } .view-btn:not(.is-active):hover { color: var(--label); } /* -------------------------------------------------------------- Tagesachse */ .timeline { display: flex; flex-direction: column; gap: 14px; } .day { overflow: hidden; transition: box-shadow .2s ease, transform .2s ease; } .day::after { z-index: 2; } .day.is-ride { cursor: pointer; } .day.is-ride:hover { box-shadow: var(--shadow-lift); transform: translateY(-1px); } .day.is-flash { animation: flash 1.3s cubic-bezier(.32, .72, 0, 1); } @keyframes flash { 0%, 100% { box-shadow: var(--shadow); } 30% { box-shadow: var(--shadow-lift), 0 0 0 4px color-mix(in srgb, var(--blue) 28%, transparent); } } .day-head { position: relative; z-index: 3; display: flex; align-items: center; gap: 11px; flex-wrap: wrap; padding: 13px 18px; border-bottom: .5px solid var(--separator); } /* Farbkante nach Fahrbarkeit – die einzige kräftige Farbe auf der Karte. */ .day-head::before { content: ""; position: absolute; left: 0; top: 0; bottom: -1px; width: 4px; background: var(--day-accent, transparent); } .day-date { font-size: 16px; font-weight: 620; letter-spacing: -.02em; } .day-kind { font-size: 11.5px; font-weight: 620; letter-spacing: -.002em; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--blue) 15%, transparent); color: var(--blue); } .day-kind.is-stay { background: var(--fill); color: var(--label-2); } .day-route { font-size: 13px; color: var(--label-2); width: 100%; } .day-route b { color: var(--label); font-weight: 590; } .day-body { position: relative; z-index: 3; display: grid; } /* In der Seitenleiste stehen Abfahrt und Ankunft untereinander. */ .day-body.is-ride .spot + .spot { border-top: .5px solid var(--separator); } .spot { padding: 16px 18px; min-width: 0; } .spot-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; } .spot-role { font-size: 11.5px; font-weight: 620; color: var(--label-3); } .spot-name { font-size: 15.5px; font-weight: 590; letter-spacing: -.016em; } .wx { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; } .wx-icon { flex: none; width: 54px; height: 54px; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .16)); } .wx-main { flex: 1 1 150px; min-width: 0; } .wx-temp { font-size: 30px; font-weight: 300; letter-spacing: -.03em; line-height: 1.05; } .wx-temp small { font-size: 16px; font-weight: 400; color: var(--label-2); margin-left: 6px; } .wx-desc { font-size: 14px; color: var(--label-2); margin-top: 1px; } .wx-feels { font-size: 12.5px; color: var(--label-3); } .wx-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; margin-top: 14px; } .fact { background: var(--glass-sunken); border-radius: var(--r-sm); padding: 8px 10px; } .fact .k { font-size: 11px; font-weight: 560; color: var(--label-2); } .fact .v { font-size: 14px; font-weight: 590; margin-top: 1px; letter-spacing: -.01em; } /* Fahrbarkeit als Ring */ .score { display: flex; align-items: center; gap: 11px; margin-top: 14px; } .score-ring { --val: 0; --col: var(--ok); width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--col) calc(var(--val) * 1%), var(--fill) 0); box-shadow: 0 2px 8px color-mix(in srgb, var(--col) 30%, transparent); } .score-ring::after { content: attr(data-score); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 13.5px; font-weight: 620; color: var(--col); background: var(--glass-strong); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .score-label { font-size: 14.5px; font-weight: 590; letter-spacing: -.012em; } .score-sub { font-size: 12.5px; color: var(--label-2); } .rating-top { --col: var(--top); } .rating-good { --col: var(--good); } .rating-ok { --col: var(--ok); } .rating-poor { --col: var(--poor); } .rating-bad { --col: var(--bad); } .warnings { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; } .warnings li { font-size: 13px; padding: 8px 11px; border-radius: var(--r-sm); background: var(--glass-sunken); color: var(--label-2); border-left: 3px solid var(--fill-strong); } .warnings li.level-danger { border-left-color: var(--bad); color: var(--label); background: color-mix(in srgb, var(--bad) 10%, var(--glass-sunken)); } .warnings li.level-warn { border-left-color: var(--poor); } .warnings li.level-info { border-left-color: var(--label-3); } /* Stundenband */ .hours { margin-top: 15px; } .hours-title { font-size: 11.5px; font-weight: 560; color: var(--label-2); margin-bottom: 7px; } .hours-strip { display: flex; gap: 2px; overflow-x: auto; padding-bottom: 4px; } .hour { flex: 1 0 26px; min-width: 26px; text-align: center; border-radius: 7px; padding: 5px 0 6px; background: var(--glass-sunken); } .hour .h { font-size: 10px; color: var(--label-3); } .hour .bar { height: 22px; margin: 4px auto 3px; width: 7px; border-radius: 4px; background: linear-gradient(to top, var(--hc, var(--good)) var(--fill-h, 50%), var(--fill) 0); } .hour .t { font-size: 10.5px; font-weight: 590; } .hour.is-window { background: color-mix(in srgb, var(--blue) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 35%, transparent); } .window-note { margin-top: 10px; font-size: 13.5px; color: var(--label-2); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .window-note b { color: var(--blue); font-weight: 620; } .source-note { margin-top: 12px; padding-top: 10px; font-size: 12.5px; color: var(--label-3); border-top: .5px solid var(--separator); } .badge-climate { display: inline-block; font-size: 11px; font-weight: 590; padding: 2px 8px; border-radius: 999px; vertical-align: middle; margin-left: 6px; background: color-mix(in srgb, var(--ok) 22%, transparent); color: color-mix(in srgb, var(--ok) 75%, var(--label)); } .wx-empty { font-size: 14px; color: var(--label-2); } /* ---------------------------------------------------------- Etappenansicht */ .stopview { display: flex; flex-direction: column; gap: 14px; } .stopcard { overflow: hidden; } .stopcard::after { z-index: 2; } .stopcard-head { position: relative; z-index: 3; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-bottom: .5px solid var(--separator); } .stopcard-head h3 { font-size: 16.5px; letter-spacing: -.02em; } .stopcard-range { font-size: 13.5px; color: var(--label-2); } .stopcard-dist { margin-left: auto; font-size: 13px; color: var(--label-2); } .minidays { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); } .miniday { padding: 12px 14px; border-right: .5px solid var(--separator); } .miniday-date { font-size: 12.5px; font-weight: 590; color: var(--label-2); } .miniday-row { display: flex; align-items: center; gap: 8px; margin-top: 5px; } .miniday .wx-icon { width: 34px; height: 34px; } .miniday-temp { font-size: 18px; font-weight: 400; letter-spacing: -.02em; } .miniday-temp small { font-size: 12.5px; color: var(--label-2); } .miniday-meta { font-size: 12px; color: var(--label-3); margin-top: 4px; } .miniday-score { display: inline-block; margin-top: 7px; font-size: 11.5px; font-weight: 620; padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--col, var(--ok)) 20%, transparent); color: color-mix(in srgb, var(--col, var(--ok)) 78%, var(--label)); } .empty { text-align: center; padding: 46px 24px; color: var(--label-2); border-radius: var(--r-lg); } .empty strong { display: block; color: var(--label); font-size: 17px; font-weight: 590; margin-bottom: 6px; } .legal { margin: 26px 0 40px; font-size: 12.5px; color: var(--label-3); line-height: 1.6; } .legal a { color: var(--label-2); } /* ------------------------------------------------------------------ Karte */ /* Streckenbeschriftung auf der Linie */ .route-tag.leaflet-tooltip { display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; white-space: nowrap; font: inherit; font-size: 12.5px; color: var(--label); background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-sm); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .route-tag.leaflet-tooltip::before { display: none; } .route-tag b { font-weight: 620; letter-spacing: -.012em; } .route-tag span:not(.route-tag-dot) { color: var(--label-2); } .route-tag-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--c); } /* Bedienelemente von Leaflet an die Ecken der Bühne rücken */ .leaflet-bottom.leaflet-right { margin: 0 4px 8px 0; } .leaflet-bottom.leaflet-right .leaflet-control-layers { margin-bottom: 8px; } .leaflet-bottom.leaflet-left { margin: 0 0 8px 4px; transition: margin-left .2s ease; } @media (min-width: 861px) { /* Maßstab und Namensnennung dürfen nicht hinter der Leiste verschwinden. */ .leaflet-bottom.leaflet-left { margin-left: calc(min(430px, 100vw - 24px) + 24px); } } @media (min-width: 1600px) { .leaflet-bottom.leaflet-left { margin-left: 494px; } } /* Etappen-Marker: Glaspille mit farbigem Rand nach Fahrbarkeit */ .map-marker-wrap { width: auto !important; height: auto !important; } .map-marker { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 3px 10px 3px 3px; border-radius: 999px; font-size: 13px; font-weight: 510; color: var(--label); background: var(--glass-strong); border: 1px solid color-mix(in srgb, var(--marker-color, var(--blue)) 55%, transparent); box-shadow: var(--shadow-sm), 0 0 0 .5px rgba(0, 0, 0, .05); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); transform: translate(-50%, -142%); transition: filter .16s ease; } .leaflet-marker-icon:hover .map-marker { filter: brightness(1.06); } .map-marker::after { content: ""; position: absolute; left: 50%; top: 100%; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%, 1px); background: var(--marker-color, var(--blue)); border: 2px solid var(--glass-strong); box-shadow: 0 1px 4px rgba(0, 0, 0, .3); } .map-marker-num { width: 21px; height: 21px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 620; color: #fff; background: var(--marker-color, var(--blue)); } .map-marker-body { display: flex; align-items: center; gap: 3px; } .map-marker .wx-icon { width: 20px; height: 20px; filter: none; } .map-marker-temp { font-weight: 590; font-size: 12.5px; } .route-leg { cursor: pointer; } /* Leaflet an das Farbschema angleichen */ .leaflet-container { background: var(--fill); font: inherit; } .leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--glass-strong); color: var(--label); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-lift); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); } .leaflet-popup-content-wrapper { border-radius: var(--r-md); } .leaflet-popup-content { margin: 12px 14px; font: inherit; } .leaflet-container a.leaflet-popup-close-button { color: var(--label-3); } .leaflet-bar, .leaflet-control-layers { border: 1px solid var(--glass-edge) !important; border-radius: var(--r-sm) !important; box-shadow: var(--shadow) !important; overflow: hidden; -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); } .leaflet-bar a { background-color: var(--glass-strong) !important; color: var(--label) !important; border-bottom-color: var(--separator) !important; } /* * Leaflets Layer-Symbol ist eine feste Bilddatei und damit blind für das * Farbschema. Als Maske gezeichnet nimmt es die Textfarbe an. */ .leaflet-control-layers-toggle { background-image: none !important; background-color: var(--label) !important; -webkit-mask: var(--layers-icon) center / 19px 19px no-repeat; mask: var(--layers-icon) center / 19px 19px no-repeat; } .leaflet-bar a:hover { background-color: var(--glass) !important; } .leaflet-control-layers { background: var(--glass-strong) !important; color: var(--label); } .leaflet-control-layers-list { font-size: 13.5px; padding: 6px 12px 6px 8px; } .leaflet-control-layers label { display: flex; align-items: center; gap: 7px; padding: 3px 0; } .leaflet-control-layers input { accent-color: var(--blue); } .leaflet-control-attribution { background: color-mix(in srgb, var(--glass-strong) 88%, transparent) !important; color: var(--label-3) !important; font-size: 11px; border-radius: var(--r-sm) 0 0 0; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .leaflet-control-attribution a { color: var(--label-2) !important; } .leaflet-control-scale-line { background: color-mix(in srgb, var(--glass-strong) 80%, transparent); border-color: var(--separator); color: var(--label-2); border-radius: 4px; } .map-pop-title { font-size: 15px; font-weight: 620; letter-spacing: -.018em; } .map-pop-sub { font-size: 12.5px; color: var(--label-2); margin-top: 1px; } .map-pop-days { border-collapse: collapse; margin-top: 9px; font-size: 12.5px; } .map-pop-days td { padding: 3px 9px 3px 0; vertical-align: top; } .map-pop-days td:first-child { color: var(--label-2); white-space: nowrap; } .map-pop-min { color: var(--label-2); } .map-pop-desc { display: block; color: var(--label-3); font-size: 11.5px; } .map-pop-empty { color: var(--label-3); } .map-pop-score { display: inline-block; min-width: 26px; text-align: center; font-weight: 620; font-size: 11.5px; padding: 2px 7px; border-radius: 999px; background: color-mix(in srgb, var(--c) 22%, transparent); color: color-mix(in srgb, var(--c) 78%, var(--label)); } /* --------------------------------------------------- Lichtbrechung an Kanten */ /* * `js/glass.js` setzt auf den hier genannten Flächen einen SVG-Filter als * Hintergrundfilter und markiert das Dokument mit `has-refraction`. Damit die * Brechung überhaupt sichtbar wird, müssen diese Flächen deutlich mehr * durchlassen als die übrigen – bei 86 % Deckkraft bleibt nichts zu brechen. */ .has-refraction .leaflet-bar a, .has-refraction .leaflet-control-layers, .has-refraction .leaflet-control-layers-toggle { background-color: var(--glass-thin) !important; } .has-refraction .leaflet-popup-content-wrapper, .has-refraction .suggestions { background: var(--glass-thin); } .has-refraction .sidebar { background: color-mix(in srgb, var(--glass) 82%, transparent); } .has-refraction :is(.chrome-btn, .map-legend, .map-note) { background: var(--glass-thin); } /* * Während die Karte bewegt wird, müsste der Filter in jedem Einzelbild neu * gerechnet werden. Solange fällt alles darauf Schwebende auf den einfachen * Weichzeichner zurück. */ .has-refraction .leaflet-container.is-moving :is(.leaflet-bar, .leaflet-control-layers, .leaflet-control-attribution, .leaflet-control-scale-line, .leaflet-popup-content-wrapper) { -webkit-backdrop-filter: var(--blur) !important; backdrop-filter: var(--blur) !important; } /* Die Kante wird durch die Brechung sichtbar – die Linie darf zurücktreten. */ .has-refraction .leaflet-bar, .has-refraction .leaflet-control-layers { border-color: color-mix(in srgb, var(--glass-edge) 70%, transparent) !important; } /* ------------------------------------------------------- Bewegung sparsam */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ------------------------------------------------------------------ Druck */ /* * Gedruckt wird ein Dokument, keine Anwendung: Die feste Anordnung wird * aufgelöst, Karte und Plan fließen untereinander. */ @media print { :root { --glass: #fff; --glass-strong: #fff; --glass-thin: #fff; --glass-sunken: #f4f4f6; --glass-edge: #ddd; --bg: #fff; --label: #000; --label-2: #333; --label-3: #555; --separator: #ccc; --fill: #eee; --fill-strong: #e4e4e6; --shadow: none; --shadow-sm: none; --shadow-lift: none; } html { color-scheme: light; } body { background: #fff; } body::before { display: none; } .map-stage { position: static; height: 300px; width: 100%; break-inside: avoid; margin-bottom: 12px; } .shell { position: static; padding: 0; overflow: visible; } .sidebar { position: static; width: auto; min-height: 0; border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } .sidebar-scroll { overflow: visible; padding: 0; } .head-actions, .pill-row, .plan-foot, .view-switch, .hours, .map-chrome, .skip-link, .suggestions, .stop-tools, .sidebar-grabber, .leaflet-control-container { display: none !important; } .glass::after, .day::after, .stopcard::after, .summary-card::after, .empty::after { display: none; } .day, .stopcard, .summary-card { break-inside: avoid; } }