/* Root: Fullscreen only when enabled (fn-has-app) */ /* WP admin bar adds a top margin to when logged in. On fullscreen-map pages we prefer overlay, so remove the margin. */ html.fn-has-app{ margin-top:0 !important; } body.fn-has-app.admin-bar{ margin-top:0 !important; } html.fn-has-app, body.fn-has-app{ width:100%; height:100%; /* WP admin bar injects `html{margin-top:32px !important;}` when logged in. That would create a white stripe above the fullscreen app. Override hard. */ margin:0 !important; padding:0 !important; overflow:hidden; /* prevent scrollbars behind fullscreen map */ } /* Some themes apply transforms/filters/perspective on or wrapper elements (Elementor, off-canvas menus). That can break position:fixed (it becomes relative to the transformed ancestor). On fullscreen map pages we disable those effects. */ html.fn-has-app{ transform:none !important; filter:none !important; perspective:none !important; } body.fn-has-app{ transform:none !important; filter:none !important; perspective:none !important; } /* Hide common theme headers/footers on fullscreen map pages (the app is moved to ) */ body.fn-has-app header, body.fn-has-app footer, body.fn-has-app #masthead, body.fn-has-app #colophon, body.fn-has-app .site-header, body.fn-has-app .site-footer, body.fn-has-app .elementor-location-header, body.fn-has-app .elementor-location-footer, body.fn-has-app .page-header, body.fn-has-app .header, body.fn-has-app .footer{ display:none !important; } #fn-app{ /* Default: eingebettet im Content (Shortcode) */ position:relative; width:100%; height: var(--fn-embed-height, 80vh); min-height: var(--fn-embed-min-height, 520px); overflow:hidden; z-index:1; /* Design defaults (können im Backend überschrieben werden) */ --fn-card-radius:16px; --fn-popup-radius:16px; --fn-title-size:14px; --fn-title-weight:900; --fn-title-color:#111111; --fn-btn-radius:999px; --fn-btn-bg:#ffffff; --fn-btn-text:#111111; --fn-btn-border:#d1d5db; --fn-accent:#e63946; --fn-accent-rgb:230,57,70; --fn-search-fs:14px; --fn-search-py:10px; --fn-search-px:12px; --fn-search-radius:14px; --fn-search-bg:#ffffff; --fn-search-text:#111111; --fn-search-border:#f8c8cb; --fn-search-border-focus:#ee7e87; --fn-search-ph:#737373; } /* Fullscreen: App überlagert das Theme (Header/Footer ausblenden) */ body.fn-has-app #fn-app{ position:fixed !important; inset:0 !important; top:0 !important; right:0 !important; bottom:0 !important; left:0 !important; width:100vw !important; height:100vh !important; margin:0 !important; padding:0 !important; /* Fullscreen app should sit above theme UI. WP admin bar (if present) can overlay above it. */ z-index:2147483000; } /* Leaflet Map */ #fn-map{ position:absolute; inset:0; width:100%; height:100%; z-index:1; } #fn-map .leaflet-container{ width:100%; height:100%; } /* OSM/Leaflet Zoom Buttons ausblenden (zusätzlich zu zoomControl:false) */ #fn-map .leaflet-control-zoom{ display:none !important; } /* Radius overlay circle (Umkreis) */ .fn-radius-circle{ pointer-events:none; } /* GPS Marker (Mein Standort) */ #fn-map .fn-gps-icon{ background: transparent !important; border: none !important; } #fn-map .fn-gps{ position: relative; width: 16px; height: 16px; } #fn-map .fn-gps__dot{ position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border-radius: 999px; background: #1e88e5; transform: translate(-50%, -50%); box-shadow: 0 0 0 2px rgba(30,136,229,.25), 0 6px 12px rgba(0,0,0,.18); } #fn-map .fn-gps__pulse{ position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border-radius: 999px; background: rgba(30,136,229,.25); transform: translate(-50%, -50%); animation: fnGpsPulse 1.8s ease-out infinite; pointer-events: none; } @keyframes fnGpsPulse{ 0%{ transform: translate(-50%, -50%) scale(1); opacity:.65; } 100%{ transform: translate(-50%, -50%) scale(5); opacity:0; } } /* Marker Hover Highlight (Mouseover in Sidebar) */ #fn-map .leaflet-marker-icon{ transition: filter .12s ease, transform .12s ease; transform-origin: 50% 100%; /* tip bleibt optisch stabil */ } #fn-map .leaflet-marker-icon.fn-marker--hover{ transform: scale(1.10); filter: drop-shadow(0 10px 14px rgba(0,0,0,.35)) drop-shadow(0 0 10px rgba(var(--fn-accent-rgb), .55)); } /* Cluster Hover Highlight (wenn Marker noch geclustert ist) */ #fn-map .marker-cluster{ transition: filter .12s ease, transform .12s ease; transform-origin: 50% 50%; } #fn-map .marker-cluster.fn-cluster--hover{ transform: scale(1.06); filter: drop-shadow(0 10px 14px rgba(0,0,0,.28)); } /* UI Layer (Sidebar/Buttons/Context) */ #fn-ui{ position:absolute; inset:0; pointer-events:none; /* UI-Container fängt nix */ z-index:10; } /* Sidebar */ .fn-sidebar{ pointer-events:auto; position:absolute; top:16px; left:16px; bottom:16px; width:360px; max-width:calc(100vw - 32px); border-radius:22px; background:#fff; box-shadow:0 18px 60px rgba(0,0,0,.22); overflow:hidden; display:flex; flex-direction:column; } .fn-sidebar__header{ padding:14px 14px 10px; font-weight:900; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(0,0,0,.08); } .fn-sidebar__body{ padding:12px 14px; overflow:auto; flex:1; } /* List view: keep pagination fixed at bottom */ .fn-sidebar__body--list{ padding:0; overflow:hidden; display:flex; flex-direction:column; } .fn-side-scroll{ padding:12px 14px; overflow:auto; flex:1 1 auto; min-height:0; /* important for flex overflow */ } .fn-sidebar__body--list .fn-pager{ margin-top:0; padding:12px 14px 14px; border-top:1px solid rgba(0,0,0,.08); background:rgba(255,255,255,.98); backdrop-filter: blur(4px); } /* Mobile Bottom-Sheet helpers (default: hidden on desktop) */ .fn-sidebar__headrow{ display:flex; align-items:center; justify-content:space-between; width:100%; flex:1 1 auto; } .fn-sidebar__headrow > :first-child{ flex:1 1 auto; min-width:0; } .fn-sidebar__headrow > .fn-row{ margin-left:auto; } .fn-sheet__handle{ display:none; } .fn-sheet__grab{ width:44px; height:5px; border-radius:999px; background:rgba(0,0,0,.18); } .fn-sheet__summary{ display:none; font-size:12px; font-weight:900; color:rgba(0,0,0,.72); padding:0 0 2px; } .fn-row{ display:flex; gap:10px; align-items:center; } .fn-input, .fn-select, .fn-textarea{ width:100%; border:1px solid rgba(0,0,0,.14); border-radius:14px; padding:10px 12px; font:inherit; } .fn-textarea{ min-height:90px; resize:vertical; } .fn-btn{ border:1px solid var(--fn-btn-border); background:var(--fn-btn-bg); color:var(--fn-btn-text); border-radius:var(--fn-btn-radius); padding:10px 14px; font-weight:900; cursor:pointer; } .fn-btn--primary{ background:rgba(var(--fn-accent-rgb), .08); border-color:rgba(var(--fn-accent-rgb), .35); } .fn-btn--danger{ background: rgba(220,38,38,.96); border-color: rgba(127,29,29,.55); color: #fff; } .fn-list{ margin-top:12px; display:flex; flex-direction:column; gap:10px; } /* Pagination (Sidebar Marker-Liste) */ .fn-pager{ margin-top:10px; display:flex; align-items:center; justify-content:center; gap:10px; } .fn-pager__text{ font-size:12px; color:rgba(0,0,0,.65); font-weight:900; white-space:nowrap; } .fn-pager__btn{ padding:8px 10px; border-radius:12px; } .fn-pager .fn-btn[disabled]{ opacity:.45; cursor:default; } .fn-item{ background:#fff; border-radius:var(--fn-card-radius); padding:10px 12px; } /* Dünner Rand für Marker-Karten in der Sidebar-Liste */ .fn-list .fn-item{ border:1px solid rgba(0,0,0,.10); transition: box-shadow .12s ease, transform .12s ease; } /* Sidebar card hover highlight */ .fn-list .fn-item:hover, .fn-list .fn-item.fn-item--hover{ transform: translateY(-1px); box-shadow:0 10px 28px rgba(0,0,0,.12); } .fn-item__title{ font-weight:var(--fn-title-weight); font-size:var(--fn-title-size); color:var(--fn-title-color); } .fn-item__title--route{ font-size:18px; letter-spacing:-0.2px; } @media (max-width:860px){ .fn-item__title--route{ font-size:17px; } } .fn-item__meta{ color:rgba(0,0,0,.65); font-size:12px; margin-top:4px; } /* Extra fields: label shown as icon (instead of text) */ .fn-meta-row{ display:flex; align-items:center; gap:8px; min-width:0; } .fn-meta-ic{ display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; flex:0 0 auto; } .fn-meta-ic svg{ width:16px; height:16px; display:block; } .fn-meta-ic img{ width:16px; height:16px; object-fit:contain; display:block; } .fn-meta-val{ min-width:0; overflow-wrap:anywhere; word-break:break-word; } /* Route: Von/Nach Anzeige */ .fn-route-fromto{ margin-top:6px; display:flex; flex-direction:column; gap:6px; } .fn-route-fromto .fn-item__meta{ display:flex; flex-direction:column; gap:2px; } .fn-route-fromto .fn-route-lbl{ font-weight:900; color:rgba(0,0,0,.74); margin-right:0; } .fn-route-fromto .fn-route-val{ color:rgba(0,0,0,.72); } /* Route: Von/Nach klickbar */ .fn-route-link{ display:grid; grid-template-columns: 1fr auto; align-items:start; gap:8px; width:100%; padding:0; margin:0; border:0; background:transparent; font:inherit; text-align:left; cursor:pointer; } .fn-route-link__txt{ display:block; min-width:0; white-space:normal; overflow-wrap:anywhere; word-break:break-word; line-height:1.25; } .fn-route-link__ic{ align-self:start; } .fn-route-link:hover{ text-decoration:underline; color:rgba(0,0,0,.86); } .fn-route-link:focus-visible{ outline:none; border-radius:10px; box-shadow:0 0 0 3px rgba(230,57,70,.16); } .fn-route-link__ic svg{ width:14px; height:14px; opacity:.65; } /* Route: Alternative Cards */ .fn-route-card{ display:flex; align-items:flex-start; gap:10px; margin-top:10px; padding:10px 12px; border-radius:16px; border:1px solid rgba(0,0,0,.10); background:rgba(255,255,255,.92); cursor:pointer; transition: box-shadow .12s ease, transform .12s ease, border-color .12s ease; } .fn-route-card input[type="radio"]{ margin-top:4px; } .fn-route-card:hover{ transform: translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.10); } .fn-route-card.is-selected{ border-color: rgba(37,99,235,.55); background:#fff; box-shadow:0 12px 30px rgba(37,99,235,.15); } .fn-route-card__body{ flex:1; min-width:0; } .fn-route-card__top{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; } .fn-route-card__title{ font-weight:900; white-space:nowrap; flex:0 0 auto; } .fn-route-card__badges{ display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; margin-left:auto; min-width:0; } .fn-route-card__meta{ color:rgba(0,0,0,.65); font-size:12px; margin-top:4px; line-height:1.35; } /* Route badge variants */ .fn-badge--rec{ background:rgba(230,57,70,.10); border-color:rgba(230,57,70,.35); } .fn-badge--short{ background:rgba(14,165,233,.10); border-color:rgba(14,165,233,.35); } .fn-badge--fast{ background:rgba(16,185,129,.10); border-color:rgba(16,185,129,.35); } .fn-badge--flat{ background:rgba(245,158,11,.10); border-color:rgba(245,158,11,.35); } /* Route: Profil-Selector */ .fn-profsel{ display:flex; flex-wrap:wrap; gap:8px; } .fn-profbtn{ border:1px solid rgba(0,0,0,.10); background:rgba(255,255,255,.92); color:#111; border-radius:999px; padding:8px 10px; font-weight:900; font-size:12px; cursor:pointer; transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease; } .fn-profbtn:hover{ transform: translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.10); } .fn-profbtn.is-active{ border-color: rgba(var(--fn-accent-rgb), .55); background: rgba(var(--fn-accent-rgb), .16); box-shadow: inset 0 0 0 1px rgba(var(--fn-accent-rgb), .20); } /* Route: Profilcanvas */ #fn-route-prof{ border-radius:16px; border:1px solid rgba(0,0,0,.10); background:rgba(0,0,0,.03); } #fn-routeplan-prof{ border-radius:16px; border:1px solid rgba(0,0,0,.10); background:rgba(0,0,0,.03); } /* Sidebar search */ .fn-sidebar__search{ width:100%; box-sizing:border-box; margin-bottom:10px; padding:var(--fn-search-py) var(--fn-search-px); border-radius:var(--fn-search-radius); border:1px solid var(--fn-search-border); background:var(--fn-search-bg); font-size:var(--fn-search-fs); color:var(--fn-search-text); outline:none; } .fn-sidebar__search::placeholder{ color:var(--fn-search-ph); } .fn-sidebar__search:focus{ border-color:var(--fn-search-border-focus); box-shadow:0 0 0 3px rgba(var(--fn-accent-rgb), .14); } /* Filter-Chips "Wolke" in der Sidebar (Mobile) */ .fn-side-filters{ margin-top:8px; display:flex; flex-wrap:wrap; gap:8px; } .fn-side-filters .fn-menu{ min-width:220px; max-width:calc(100vw - 32px); } /* Sidebar marker counter */ .fn-side-count{ margin-top:8px; padding:10px 12px; border-radius:16px; background:rgba(0,0,0,.03); border:1px solid rgba(0,0,0,.08); font-weight:900; color:rgba(0,0,0,.78); font-size:13px; } /* Marker cards: title row + distance badge */ .fn-item__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; } .fn-item__left{ display:flex; flex-direction:column; min-width:0; } .fn-badge{ display:inline-flex; align-items:center; justify-content:center; padding:4px 8px; border-radius:999px; border:1px solid rgba(0,0,0,.12); background:rgba(0,0,0,.04); font-size:12px; font-weight:900; line-height:1; white-space:nowrap; } .fn-badge--dist{ opacity:.95; } /* Rating (★★★★★) */ .fn-rating{ display:inline-flex; align-items:center; gap:8px; margin-top:4px; font-size:12px; font-weight:900; color:rgba(0,0,0,.65); } .fn-rating--sm{ gap:6px; font-size:11px; margin-top:2px; } .fn-rating--interactive{ cursor:pointer; user-select:none; } .fn-rating.is-loading{ opacity:.55; pointer-events:none; } /* Notices (e.g., Marker melden) */ .fn-notice{ margin-top:8px; padding:10px 12px; border-radius:14px; font-weight:900; border:1px solid rgba(0,0,0,.12); } .fn-notice--ok{ background:rgba(16,185,129,.10); border-color:rgba(16,185,129,.35); } .fn-notice--err{ background:rgba(239,68,68,.10); border-color:rgba(239,68,68,.35); } .fn-stars{ position:relative; display:inline-block; line-height:1; letter-spacing:1px; font-size:14px; } .fn-rating--sm .fn-stars{ font-size:13px; } .fn-stars__base{ color:rgba(0,0,0,.18); } .fn-stars__fill{ position:absolute; left:0; top:0; width:var(--pct, 0%); overflow:hidden; pointer-events:none; color:rgba(246, 179, 0, .95); } .fn-rating.is-preview .fn-rating__text{ opacity:.85; } /* Popup styling (Marker) */ .fn-leaflet-popup .leaflet-popup-content{ margin:0 !important; } .fn-leaflet-popup .leaflet-popup-content-wrapper{ padding:0 !important; border-radius:var(--fn-popup-radius); } .fn-popup{ border:0; border-radius:var(--fn-popup-radius); padding:10px 12px; box-sizing:border-box; /* angenehmeres Responsive-Sizing */ width:clamp(260px, 70vw, 360px); max-width:calc(100vw - 48px); /* Popup-Typografie unabhängig vom Theme */ font-size:13px; line-height:1.35; } .fn-popup *{ box-sizing:border-box; } .fn-popup h1,.fn-popup h2,.fn-popup h3,.fn-popup h4,.fn-popup h5,.fn-popup h6{ font-size:inherit; line-height:inherit; margin:0; font-weight:inherit; } .fn-popup p{ margin:0; } .fn-popup__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; } .fn-popup__left{ display:flex; flex-direction:column; min-width:0; } .fn-popup__title{ font-weight:var(--fn-title-weight); font-size:var(--fn-title-size); color:var(--fn-title-color); } .fn-popup__meta{ color:rgba(0,0,0,.65); font-size:12px; margin-top:4px; } .fn-popup__desc{ margin-top:8px; } .fn-popup__actions{ margin-top:10px; gap:10px; flex-wrap:wrap; } .fn-popup__actions .fn-btn{ -webkit-appearance:none; appearance:none; padding:8px 12px; font-size:13px; line-height:1.15; } /* Popup Buttons gegen Theme-Overrides absichern */ #fn-app .fn-popup .fn-btn{ border:1px solid var(--fn-btn-border) !important; background:var(--fn-btn-bg) !important; color:var(--fn-btn-text) !important; border-radius:var(--fn-btn-radius) !important; font-weight:900; text-decoration:none; } #fn-app .fn-popup .fn-btn--primary{ background:rgba(var(--fn-accent-rgb), .08) !important; border-color:rgba(var(--fn-accent-rgb), .35) !important; } /* Screenreader-only helper */ .fn-sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* Filterleiste (oben neben Sidebar) */ .fn-filterbar{ --fn-filterbar-shift: 372px; /* 360 Sidebar + 12px Gap */ --fn-filter-peek: 56px; /* sichtbarer Teil im eingeklappten Zustand */ pointer-events:auto; position:absolute; top:16px; left:16px; z-index:25; width:auto; max-width:calc(100vw - 32px - var(--fn-filterbar-shift)); transform: translateX(var(--fn-filterbar-shift)); transition: transform .28s ease, opacity .20s ease; will-change: transform; } /* Wenn Sidebar minimiert ist, rückt die Filterleiste an den linken Rand (Basis) */ #fn-ui.fn-ui--sidebar-hidden .fn-filterbar{ --fn-filterbar-shift: 0px; } .fn-filterbar.fn-filterbar--hidden{ display:none !important; } /* Eingeklappt: nach rechts rausfahren, nur Toggle bleibt sichtbar */ .fn-filterbar.is-collapsed{ transform: translateX(calc(100vw + 80px)); } .fn-filterbar__inner{ display:flex; gap:10px; align-items:flex-start; padding:0; border-radius:0; background:transparent; box-shadow:none; border:0; backdrop-filter:none; } .fn-filterbar__controls{ display:flex; gap:10px; align-items:center; flex:1 1 auto; min-width:0; flex-wrap:wrap; visibility: visible; } /* "Wolke"-Optik: jedes Feld ist ein eigenes Pill */ .fn-filterbar__cloud{ padding:0; } /* Chip-Dropdown (Kategorie etc.) */ .fn-filterbar__dd{ flex:0 0 auto; } .fn-dd{ position:relative; } .fn-chip{ display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border-radius:999px; border:0; background:rgba(255,255,255,.96); box-shadow:0 10px 30px rgba(0,0,0,.14); backdrop-filter: blur(2px); font:inherit; font-weight:900; line-height:1; cursor:pointer; transition: transform .16s ease, box-shadow .16s ease; user-select:none; white-space:nowrap; } /* Filterbar-Chips: Icon + Text immer nebeneinander, mehr Abstand, vertikal zentriert (Theme-sicher) */ #fn-ui .fn-filterbar .fn-chip{ display:inline-flex !important; flex-direction:row !important; flex-wrap:nowrap !important; align-items:center !important; justify-content:flex-start !important; gap:20px !important; } #fn-ui .fn-filterbar .fn-chip .fn-ico, #fn-ui .fn-filterbar .fn-chip .fn-ic{ flex:0 0 auto !important; } #fn-ui .fn-filterbar .fn-chip .fn-ico{ width:18px !important; height:18px !important; display:flex !important; align-items:center !important; justify-content:center !important; flex:0 0 18px !important; } #fn-ui .fn-filterbar .fn-chip .fn-ico svg, #fn-ui .fn-filterbar .fn-chip .fn-ico img{ width:18px !important; height:18px !important; display:block !important; } #fn-ui .fn-filterbar .fn-chip .fn-chip__label, #fn-ui .fn-filterbar .fn-chip .fn-label{ display:inline-flex !important; align-items:center !important; flex:0 1 auto !important; width:auto !important; min-width:0 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; line-height:1.1 !important; } /* Filterleiste: Buttons ohne Rahmen + Icon links neben Text (Theme-sicher) */ #fn-ui .fn-filterbar .fn-chip, #fn-ui .fn-filterbar .fn-btn{ border:0 !important; outline:0 !important; box-shadow:0 10px 30px rgba(0,0,0,.14) !important; background:rgba(255,255,255,.96) !important; } /* Toggle-Button in der Filterleiste (wenn Sidebar minimiert ist) soll wie die Chips aussehen */ #fn-ui .fn-filterbar .fn-filterbar__toggle{ border-radius:999px !important; padding:10px 12px !important; font-weight:900 !important; display:inline-flex !important; flex-direction:row !important; flex-wrap:nowrap !important; align-items:center !important; justify-content:flex-start !important; gap:20px !important; line-height:1 !important; } /* icon sizing for toggle (iconFromCtl liefert .fn-ic) */ #fn-ui .fn-filterbar .fn-filterbar__toggle .fn-ic{ width:18px !important; height:18px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; flex:0 0 18px !important; } #fn-ui .fn-filterbar .fn-filterbar__toggle .fn-ic svg, #fn-ui .fn-filterbar .fn-filterbar__toggle .fn-ic img{ width:18px !important; height:18px !important; display:block !important; } .fn-chip:hover{ transform: translateY(-1px); box-shadow:0 14px 40px rgba(0,0,0,.18); } .fn-chip.is-active{ box-shadow:0 0 0 3px rgba(0,0,0,.10), 0 14px 40px rgba(0,0,0,.18); } .fn-chip:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(0,0,0,.10); } .fn-chip .fn-ico{ width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; } .fn-chip .fn-ico svg{ width:18px; height:18px; display:block; } .fn-chip--count{ padding:10px 12px; font-weight:900; opacity:.8; } .fn-chip--icon{ padding:10px 12px; } .fn-chip--icon .fn-ic, .fn-chip--icon .fn-ico{ margin:0; } .fn-chip--reset{ padding:10px 12px; } .fn-chip__caret{ width:16px; height:16px; display:inline-flex; align-items:center; justify-content:center; opacity:.75; } .fn-chip__caret svg{ width:16px; height:16px; display:block; } /* Dropdown-Chips wie Reset-Button: kein Caret */ .fn-filterbar__chip .fn-chip__caret{ display:none; } .fn-menu{ position:absolute; top:calc(100% + 10px); left:0; min-width:240px; max-width:320px; max-height:340px; overflow:auto; padding:8px; border-radius:18px; border:0; background:rgba(255,255,255,.98); box-shadow:0 18px 60px rgba(0,0,0,.18); backdrop-filter: blur(3px); z-index:40; visibility:hidden; opacity:0; pointer-events:none; transform: translateY(-6px); transition: opacity .15s ease, transform .18s ease, visibility 0s linear .18s; } /* Filterbar dropdown menus: theme-safe button styling (no borders), and row layout for icon+text */ #fn-ui .fn-filterbar .fn-menu{ border:0 !important; outline:0 !important; } #fn-ui .fn-filterbar .fn-menu__item{ border:0 !important; outline:0 !important; background:transparent !important; box-shadow:none !important; text-decoration:none !important; text-align:left !important; } /* Force category option rows to keep icon + text side-by-side (no stacking) */ #fn-ui .fn-filterbar .fn-menu__item--row{ display:inline-flex !important; flex-direction:row !important; flex-wrap:nowrap !important; align-items:center !important; justify-content:flex-start !important; gap:20px !important; /* match chip/button icon-text spacing */ text-align:left !important; column-gap:20px !important; grid-template-columns: unset !important; justify-items: unset !important; } #fn-ui .fn-filterbar .fn-menu__ic{ width:20px !important; height:20px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; flex:0 0 20px !important; } #fn-ui .fn-filterbar .fn-menu__ic img, #fn-ui .fn-filterbar .fn-menu__ic svg{ width:18px !important; height:18px !important; display:block !important; } #fn-ui .fn-filterbar .fn-menu__lbl{ display:inline-flex !important; align-items:center !important; line-height:1.1 !important; } .fn-dd.is-open .fn-menu{ visibility:visible; opacity:1; pointer-events:auto; transform: translateY(0); transition: opacity .15s ease, transform .18s ease; } .fn-menu__item{ width:100%; border:0; background:transparent; padding:10px 12px; border-radius:14px; text-align:center; font:inherit; font-weight:800; cursor:pointer; transition: transform .14s ease, text-shadow .14s ease; } .fn-menu__item:hover{ transform: translateY(-1px); text-shadow:0 10px 22px rgba(0,0,0,.22); } .fn-menu__item.is-active{ text-decoration: underline; text-underline-offset: 4px; } /* Filter menu items with category icons */ .fn-menu__item--row{ display:grid; grid-template-columns: 24px 1fr; align-items:center; justify-items:start; text-align:left; column-gap:16px; padding:11px 14px; } .fn-menu__ic{ width:24px; height:24px; flex:0 0 24px; display:flex; align-items:center; justify-content:center; } .fn-menu__ic img{ width:22px; height:22px; display:block; object-fit:contain; } .fn-menu__ic svg{ width:22px; height:22px; display:block; } .fn-menu__lbl{ flex:1 1 auto; min-width:0; overflow-wrap:anywhere; word-break:break-word; line-height:1.2; } .fn-menu__sep{ height:1px; margin:6px 10px; background:rgba(0,0,0,.08); border-radius:999px; } .fn-filterbar__togglewrap{ flex:0 0 auto; } /* Floating Filter-Open Button (sichtbar wenn Filterleiste ausgeblendet/eingeklappt ist) */ .fn-filter-fab{ position:absolute; top:16px; right:16px; z-index:26; width:44px; height:44px; border-radius:16px; display:inline-flex; align-items:center; justify-content:center; background:rgba(255,255,255,.96); border:1px solid rgba(0,0,0,.08); box-shadow:0 18px 60px rgba(0,0,0,.18); backdrop-filter: blur(3px); opacity:0; pointer-events:none; transform: translateX(12px); transition: opacity .20s ease, transform .28s ease; } .fn-filter-fab--show{ opacity:1; pointer-events:auto; transform: translateX(0); } .fn-filter-fab .fn-ico svg{ width:18px; height:18px; display:block; } /* FAB nur dann relevant, wenn Sidebar minimiert ist */ #fn-ui:not(.fn-ui--sidebar-hidden) .fn-filter-fab{ display:none; } /* Filter-Button (Icon + Text) - Im eingeklappten Zustand wird das Label per CSS ausgeblendet (Icon-only) */ .fn-filterbar__toggle{ display:inline-flex; align-items:center; gap:8px; line-height:1; } .fn-filterbar__toggle .fn-ico{ width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; } .fn-filterbar__toggle .fn-ico svg{ width:18px; height:18px; display:block; } .fn-filterbar.is-collapsed .fn-filterbar__toggle .fn-label{ display:none; } .fn-filterbar.is-collapsed .fn-filterbar__controls{ opacity:0; pointer-events:none; width:0; overflow:hidden; visibility: hidden; } .fn-filterbar.is-collapsed .fn-filterbar__inner{ justify-content:flex-end; } /* Toggle nur sichtbar, wenn Sidebar minimiert ist */ #fn-ui:not(.fn-ui--sidebar-hidden) .fn-filterbar__togglewrap{ display:none; } .fn-filterbar__search{ flex:1 1 auto; min-width:220px; } .fn-filterbar__select{ flex:1 1 240px; min-width:180px; max-width:320px; } .fn-filterbar__right{ display:flex; gap:10px; align-items:center; flex:0 0 auto; } .fn-filterbar__count{ font-size:12px; color:rgba(0,0,0,.65); font-weight:900; white-space:nowrap; } @media (max-width: 860px){ .fn-filterbar{ top:12px; left:12px; right:12px; width:auto; max-width:none; --fn-filterbar-shift: 0px; /* Mobile: keine Sidebar-Dock-Verschiebung */ } .fn-filterbar.is-collapsed{ transform: translateX(calc(100vw - 24px - var(--fn-filter-peek))); } .fn-filterbar__inner{ flex-wrap:wrap; } .fn-filterbar__controls{ flex-wrap:wrap; } .fn-filterbar__search{ min-width:160px; } .fn-filterbar__select{ flex:1 1 180px; max-width:none; } .fn-filterbar__right{ margin-left:auto; } } /* Top Buttons */ .fn-fab{ pointer-events:auto; position:absolute; top:16px; left:16px; z-index:20; display:none; /* nur sichtbar, wenn Sidebar minimiert ist */ } #fn-ui.fn-ui--sidebar-hidden .fn-fab{ display:block; } .fn-fab .fn-btn{ border-radius:18px; } /* Sidebar öffnen (FAB) – Icon/Text nebeneinander + sauber zentriert (theme-sicher) */ .fn-fab .fn-btn--icon{ flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; gap: 18px !important; /* Abstand Icon↔Text */ line-height: 1 !important; } .fn-fab .fn-btn--icon .fn-ic, .fn-fab .fn-btn--icon img{ flex: 0 0 auto !important; align-self: center !important; } .fn-fab .fn-btn--icon .fn-label{ align-self: center !important; line-height: 1.1 !important; } /* Wenn nur Icon: runder Button */ .fn-fab .fn-btn--icononly{ min-width: 44px; height: 44px; padding: 0 !important; border-radius: 9999px !important; } /* Context Menu */ .fn-context{ pointer-events:auto; position:absolute; z-index:30; background:rgba(255,255,255,var(--fn-cm-bg-alpha, .96)); border:1px solid rgba(0,0,0,.12); border-radius:var(--fn-cm-radius, 18px); box-shadow:0 18px 60px rgba(0,0,0,var(--fn-cm-shadow-alpha, .28)); padding:10px; min-width:var(--fn-cm-width, 240px); max-width:min(calc(100vw - 24px), var(--fn-cm-max-width, 360px)); display:none; } .fn-context.is-open{ display:block; } .fn-context__title{ font-weight:900; margin:4px 6px 10px; } .fn-context__item{ width:100%; text-align:left; border:0; background:rgba(0,0,0,.06); border-radius:14px; padding:10px 12px; margin:6px 0; cursor:pointer; font-weight:900; } .fn-context__item:hover{ background:rgba(0,0,0,.10); } /* Mobile: Sidebar als Bottom Sheet (3 Zustände + Drag) */ @media (max-width: 860px){ .fn-fab{ display:none; } /* Auf Mobile liegen die Filter in der Sidebar (Bottom-Sheet) */ .fn-filterbar, .fn-filter-fab{ display:none !important; } .fn-sidebar{ position:fixed; left:0; right:0; bottom:0; top:auto; width:100%; max-width:none; margin:0; box-sizing:border-box; height:45vh; /* MID default */ max-height:85vh; transition: height .28s ease; border-radius:22px 22px 0 0; } .fn-sidebar.is-dragging{ transition:none; } .fn-sidebar__header{ padding:10px 14px 8px; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:8px; } .fn-sidebar__headrow{ display:flex; align-items:center; justify-content:space-between; width:100%; flex:1 1 auto; } .fn-sidebar__headrow > :first-child{ flex:1 1 auto; min-width:0; } .fn-sidebar__headrow > .fn-row{ margin-left:auto; } .fn-sheet__handle{ display:flex; align-items:center; justify-content:center; padding:6px 0 2px; cursor:grab; touch-action:none; user-select:none; } /* Snap states */ .fn-sidebar.fn-sheet--min{ height:12vh; } .fn-sidebar.fn-sheet--mid{ height: var(--fn-sheet-mid, 45vh); } .fn-sidebar.fn-sheet--max{ height:85vh; } /* MIN: nur Handle + Counter */ .fn-sidebar.fn-sheet--min .fn-sidebar__headrow{ display:none; } .fn-sidebar.fn-sheet--min .fn-sidebar__body{ display:none; } .fn-sidebar.fn-sheet--min .fn-sheet__summary{ display:block; text-align:center; } /* MID/MAX: Counter im Header aus, Body normal */ .fn-sidebar.fn-sheet--mid .fn-sheet__summary, .fn-sidebar.fn-sheet--max .fn-sheet__summary{ display:none; } } /* Overlay */ .fn-overlay{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:1000000; background:rgba(255,255,255,.55); backdrop-filter: blur(2px); } .fn-overlay.is-visible{ display:flex; } .fn-overlay-card{ background:#fff; border-radius:18px; box-shadow:0 18px 60px rgba(0,0,0,.25); padding:14px 16px; display:flex; gap:12px; align-items:center; font-weight:900; } .fn-spinner{ width:18px;height:18px;border-radius:50%; border:2px solid rgba(0,0,0,.15); border-top-color: rgba(0,0,0,.55); animation: fnspin .9s linear infinite; } @keyframes fnspin{ to{ transform:rotate(360deg); } } /* Navigation Panel */ .fn-nav{ pointer-events:auto; position:absolute; right:16px; bottom:16px; width:420px; max-width:calc(100vw - 32px); background:#fff; border-radius:22px; box-shadow:0 18px 60px rgba(0,0,0,.24); overflow:hidden; z-index:40; } .fn-nav__head{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid rgba(0,0,0,.08); } .fn-nav__title{ font-weight:900; } .fn-nav__body{ padding:12px 14px; } .fn-nav-next{ font-weight:900; } .fn-nav-meta{ margin-top:8px;color:rgba(0,0,0,.7);font-size:12px; } .fn-nav__reopen{ display:none; position:absolute; left:12px; bottom:12px; } .fn-nav.is-min{ height:56px; width:210px; } .fn-nav.is-min .fn-nav__body, .fn-nav.is-min .fn-nav__head{ display:none; } .fn-nav.is-min .fn-nav__reopen{ display:inline-flex; } /* Mobile: volle Breite */ @media (max-width: 860px){ .fn-nav{ left:12px; right:12px; width:auto; } } /* ===== Navi-Bar unten ===== */ .fn-navbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; background: #fff; border-top: 1px solid rgba(0,0,0,.08); box-shadow: 0 -10px 24px rgba(0,0,0,.10); border-radius: 18px 18px 0 0; max-height: 52vh; display: flex; flex-direction: column; overflow: hidden; } .fn-navbar--hidden { display: none; } .fn-navbar__top { display:flex; align-items:center; justify-content:space-between; padding: 10px 12px; gap: 10px; } .fn-navbar__title { font-weight: 900; } .fn-navbar__actions { display:flex; gap:10px; flex-wrap:wrap; } .fn-btn--small { padding: 8px 10px; border-radius: 12px; } /* Icon buttons */ .fn-btn--icon{ padding: 8px 10px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .fn-btn--icon-lg{ padding: 10px 12px; } .fn-ic{ display: inline-flex; align-items: center; justify-content: center; } .fn-ic svg{ width: 18px; height: 18px; display: block; } .fn-ic img{ width: 18px; height: 18px; display: block; object-fit: contain; } .fn-sr{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .fn-navbar__mini { display:none; padding: 10px 12px; font-weight: 700; border-top: 1px solid rgba(0,0,0,.06); } .fn-navbar__body { padding: 10px 12px 14px; overflow: auto; } .fn-navbar--min .fn-navbar__body { display:none; } .fn-navbar--min .fn-navbar__mini { display:block; } .fn-navbar__stats { font-size: 13px; opacity: .85; } .fn-navbar__next { margin-top: 8px; font-weight: 800; } .fn-navbar__profile { margin-top: 10px; } .fn-navbar__profilehdr { font-weight: 800; font-size: 13px; opacity: .9; margin-bottom: 6px; } .fn-prof-wrap { position: relative; width: 100%; } #fn-prof-canvas { width: 100%; display: block; border-radius: 14px; border: 1px solid rgba(0,0,0,.08); } .fn-prof-tip{ position:absolute; pointer-events:none; background:#fff; border:1px solid rgba(0,0,0,.12); box-shadow: 0 10px 18px rgba(0,0,0,.12); padding:6px 8px; border-radius: 12px; font-size: 12px; font-weight: 800; } .fn-navbar__steps { margin-top: 10px; } .fn-navstep { padding: 10px 10px; border-radius: 12px; border: 1px solid rgba(0,0,0,.06); margin-top: 8px; background: rgba(0,0,0,.02); font-size: 13px; font-weight: 650; } .fn-navstep--muted { opacity:.75; } /* ===== Swipebar + Swipe Views in Navi ===== */ .fn-swipebar{ display:flex; gap:8px; padding: 0 12px 10px; } .fn-swipebar__btn{ flex:1; border:0; background:#fff; border-radius: 14px; padding: 8px 10px; font-weight: 800; font-size: 13px; opacity: .85; } .fn-swipebar__btn.is-active{ opacity: 1; border-color: rgba(0,0,0,.18); box-shadow: 0 6px 14px rgba(0,0,0,.08); } .fn-swipe{ display:flex; overflow-x:auto; scroll-snap-type: x mandatory; scroll-behavior:smooth; -webkit-overflow-scrolling: touch; padding: 0 12px 14px; gap: 12px; } .fn-swipe::-webkit-scrollbar{ display:none; } .fn-swipe__page{ scroll-snap-align: start; flex: 0 0 100%; min-width: 100%; } .fn-navbar__substats{ margin-top: 8px; font-size: 13px; font-weight: 750; opacity: .88; } /* beim Minimieren: Tabs + Swipe ausblenden (du siehst nur die Mini-Leiste) */ .fn-navbar--min .fn-swipebar{ display:none; } .fn-navbar--min .fn-swipe{ display:none; } /* ========================================================= NAV UI: Swipebar + Swipe Views (Update) ========================================================= */ /* etwas mehr Luft in der Navbar */ .fn-navbar__body{ padding: 8px 0 14px; /* Tabs & Swipe haben eigene Paddings */ } /* Tabs / Swipebar */ .fn-swipebar{ display:flex; gap:10px; padding: 0 12px 10px; align-items:center; } .fn-swipebar__btn{ flex:1; appearance:none; border: 1px solid rgba(0,0,0,.12); background:#fff; border-radius: 999px; padding: 10px 12px; font-weight: 900; font-size: 13px; line-height: 1; opacity: .86; box-shadow: 0 6px 14px rgba(0,0,0,.06); transition: transform .08s ease, opacity .12s ease, box-shadow .12s ease, border-color .12s ease; } .fn-swipebar__btn:active{ transform: scale(.98); } .fn-swipebar__btn.is-active{ opacity: 1; border-color: rgba(0,0,0,.22); box-shadow: 0 10px 18px rgba(0,0,0,.10); } /* Swipe container: scroll-snap + “feel” */ .fn-swipe{ display:flex; gap: 12px; overflow-x:auto; scroll-snap-type: x mandatory; scroll-behavior:smooth; -webkit-overflow-scrolling: touch; padding: 0 12px 14px; overscroll-behavior-x: contain; scroll-padding-left: 12px; scroll-padding-right: 12px; } .fn-swipe::-webkit-scrollbar{ display:none; } /* Jede Page nimmt genau eine Viewport-Breite ein */ .fn-swipe__page{ flex: 0 0 100%; min-width: 100%; scroll-snap-align: start; scroll-snap-stop: always; } /* Overview spacing */ .fn-navbar__stats{ padding-top: 2px; font-size: 13px; opacity: .86; } .fn-navbar__next{ margin-top: 8px; font-weight: 900; font-size: 14px; } .fn-navbar__substats{ margin-top: 10px; font-size: 13px; font-weight: 850; opacity: .86; } /* Steps: etwas “cardiger” */ .fn-navbar__steps{ margin-top: 6px; } .fn-navstep{ padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(0,0,0,.08); margin-top: 10px; background: rgba(0,0,0,.02); font-size: 13px; font-weight: 750; } .fn-navstep--muted{ opacity:.75; } /* Höhenprofil: Full-width, schöner Rahmen */ .fn-prof-wrap{ position: relative; width: 100%; margin-top: 8px; } #fn-prof-canvas{ width: 100%; display:block; border-radius: 16px; border: 1px solid rgba(0,0,0,.10); background: rgba(0,0,0,.01); } .fn-prof-tip{ position:absolute; pointer-events:none; background:#fff; border:1px solid rgba(0,0,0,.14); box-shadow: 0 10px 20px rgba(0,0,0,.14); padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 900; } /* Minimiert: Tabs/Swipe ausblenden, nur Mini-Bar sichtbar */ .fn-navbar--min .fn-swipebar{ display:none; } .fn-navbar--min .fn-swipe{ display:none; } /* Mini-Bar: kompakter, besser lesbar */ .fn-navbar__mini{ display:none; padding: 10px 12px; font-weight: 850; border-top: 1px solid rgba(0,0,0,.06); } .fn-navbar--min .fn-navbar__mini{ display:block; } /* Mobile: noch etwas größere Touch Targets */ @media (max-width: 480px){ .fn-swipebar__btn{ padding: 12px 12px; font-size: 13px; } .fn-navbar{ border-radius: 18px 18px 0 0; max-height: 58vh; } } /* Optional: reduzierte Bewegung respektieren */ @media (prefers-reduced-motion: reduce){ .fn-swipe{ scroll-behavior: auto; } .fn-swipebar__btn{ transition: none; } } /* Umkreis-Radius um den Standort */ .fn-radius-circle{ pointer-events:none; } /* ===== Navi-Bar: Basis-Styles für neue Struktur ===== */ .fn-navbar__bar{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-bottom:1px solid rgba(0,0,0,.06); } .fn-navbar__lane{ flex:0 0 44px; width:44px; display:flex; align-items:center; justify-content:center; opacity:.9; } .fn-navbar__laneico svg{ width:20px; height:20px; display:block; } .fn-navbar__main{ flex:1 1 auto; min-width:0; } .fn-navbar__meta{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } .fn-navbar__metaItem{ display:flex; flex-direction:column; min-width:0; } .fn-navbar__metaItem--right{ align-items:flex-end; text-align:right; } .fn-navbar__kicker{ font-size:12px; font-weight:900; opacity:.75; line-height:1.1; } .fn-navbar__tonext{ font-size:18px; font-weight:900; line-height:1; margin-top:4px; white-space:nowrap; } .fn-navbar__todest{ font-size:18px; font-weight:900; line-height:1; margin-top:4px; white-space:nowrap; } .fn-navbar__instr{ font-size:13px; font-weight:800; line-height:1.25; opacity:.9; margin-top:6px; } .fn-navbar__bar-actions{ flex:0 0 auto; display:flex; align-items:center; } .fn-navbar__infohead{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; gap:10px; background: rgba(0,0,0,.03); } .fn-navbar__infotitle{ font-weight:900; } /* ========================================================= MOBILE NAV (Portrait) — neue Struktur + Map Resize ========================================================= */ @media (max-width: 860px){ /* Karte soll nicht unter der Navi-Bar verschwinden */ #fn-map{ top: var(--fn-map-top, 0px); bottom: 0; transition: top .28s ease; } /* Navi-Bar oben (Mobile Portrait): Karte darunter */ .fn-navbar{ top: 0; bottom: auto; border-top: none; border-bottom: 1px solid rgba(0,0,0,.08); box-shadow: 0 10px 24px rgba(0,0,0,.10); border-radius: 0 0 22px 22px; max-height: 52vh; overflow: hidden; } .fn-navbar__bar{ display:flex; align-items:stretch; justify-content:space-between; gap: 10px; padding: 0; background: #2f7d32; /* grün wie in deinem Mock */ color: #000; } .fn-navbar__lane{ width: 44px; display:flex; align-items:center; justify-content:center; background: rgba(0,0,0,.06); } .fn-navbar__laneico svg{ width:22px; height:22px; display:block; } .fn-navbar__main{ flex: 1 1 auto; min-width: 0; padding: 12px 12px; display:flex; flex-direction:column; } .fn-navbar__meta{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; } .fn-navbar__metaItem{ display:flex; flex-direction:column; min-width:0; } .fn-navbar__metaItem--right{ align-items:flex-end; text-align:right; } .fn-navbar__kicker{ font-size: 12px; font-weight: 900; opacity: .9; line-height: 1.1; } .fn-navbar__tonext{ font-size: 30px; font-weight: 900; line-height: 1; margin-top: 4px; white-space: nowrap; } .fn-navbar__todest{ font-size: 30px; font-weight: 900; line-height: 1; margin-top: 4px; white-space: nowrap; opacity: .95; } .fn-navbar__instr{ font-size: 13px; font-weight: 800; line-height: 1.25; opacity: .95; margin-top: 8px; } .fn-navbar__bar-actions{ flex: 0 0 auto; padding: 10px 12px 10px 0; display:flex; align-items:flex-start; } .fn-navbar__bar-actions .fn-btn{ background: rgba(255,255,255,.88); border-color: rgba(0,0,0,.10); box-shadow: 0 10px 18px rgba(0,0,0,.12); } /* Navi-Info Bereich */ .fn-navbar__info{ background: rgba(0,0,0,.10); } .fn-navbar__infohead{ display:flex; align-items:center; justify-content:space-between; padding: 10px 12px; gap: 10px; background: rgba(0,0,0,.14); } .fn-navbar__infotitle{ font-weight: 900; } #fn-nav-min-ic{ transition: transform .18s ease; } /* Mini-Row (wenn Info eingeklappt) */ .fn-navbar__mini{ padding: 10px 12px; border-top: 1px solid rgba(0,0,0,.08); background: rgba(255,255,255,.55); } .fn-navbar__body{ background: rgba(0,0,0,.00); } /* Navi Info aufgeklappt: Höhe auf Profil begrenzen (max. 22vh), Schritte scrollen */ .fn-navbar:not(.fn-navbar--min) .fn-navbar__body{ overflow: hidden; } .fn-navbar:not(.fn-navbar--min) .fn-swipe{ height: min(22vh, var(--fn-nav-swipe-h, 180px)); overflow-y: hidden; align-items: stretch; } .fn-navbar:not(.fn-navbar--min) .fn-swipe__page{ height: 100%; } .fn-navbar:not(.fn-navbar--min) .fn-swipe__page[data-page="2"]{ overflow: hidden; display: flex; flex-direction: column; } .fn-navbar:not(.fn-navbar--min) .fn-navbar__steps, .fn-navbar:not(.fn-navbar--min) #fn-nav-steps{ flex: 1 1 auto; height: 100%; overflow-y: auto; margin-top: 0; padding-top: 6px; padding-bottom: 6px; -webkit-overflow-scrolling: touch; } } /* ======================= * Custom Category Markers (DivIcon) * ======================= */ #fn-map .leaflet-div-icon.fn-divicon{ background:transparent; border:0; } .fn-div-marker{ position:relative; display:block; pointer-events:auto; } .fn-div-marker .fn-mk-bubble{ width:var(--fn-mk-size); height:var(--fn-mk-size); background:var(--fn-mk-bg); border:2px solid var(--fn-mk-bd); border-radius:999px; box-shadow:0 10px 18px rgba(0,0,0,.25); display:flex; align-items:center; justify-content:center; overflow:hidden; } .fn-div-marker.fn-shape-rounded .fn-mk-bubble{ border-radius:16px; } .fn-div-marker.fn-shape-circle .fn-mk-tip{ display:none; } .fn-div-marker .fn-mk-tip{ position:absolute; left:50%; top:calc(var(--fn-mk-size) - 2px); transform:translateX(-50%); width:0; height:0; border-left:calc(var(--fn-mk-size) * 0.24) solid transparent; border-right:calc(var(--fn-mk-size) * 0.24) solid transparent; border-top:calc(var(--fn-mk-size) * 0.42) solid var(--fn-mk-bg); filter:drop-shadow(0 2px 2px rgba(0,0,0,.18)); } .fn-div-marker .fn-mk-icon{ width:var(--fn-ic-w); height:var(--fn-ic-h); display:flex; align-items:center; justify-content:center; color:var(--fn-ic-color); } .fn-div-marker .fn-mk-icon img{ width:100%; height:100%; object-fit:contain; } .fn-div-marker .fn-mk-icon img.fn-mk-original{ width:100%; height:100%; object-fit:contain; } .fn-div-marker .fn-mk-icon .fn-mk-mask{ display:none; width:100%; height:100%; background-color: currentColor; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain; } .fn-div-marker .fn-mk-icon img.fn-mk-fallback{ width:100%; height:100%; object-fit:contain; } @supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) { .fn-div-marker .fn-mk-icon .fn-mk-mask{ display:block; } .fn-div-marker .fn-mk-icon img.fn-mk-fallback{ display:none; } } .fn-div-marker .fn-mk-icon svg{ width:100%; height:100%; display:block; fill:currentColor; stroke:currentColor; } /* Center primary action rows inside the sidebar */ .fn-sidebar .fn-actions{ display:flex; justify-content:center; align-items:center; gap:12px; flex-wrap:wrap; width:100%; } /* Sidebar "Zurück" Button: same icon/text spacing as filter chips */ #fn-ui #fn-sidebar .fn-view-back.fn-btn--icon{ gap:20px !important; align-items:center !important; } #fn-ui #fn-sidebar .fn-view-back.fn-btn--icon .fn-label{ line-height:1 !important; display:inline-block; } #fn-ui #fn-sidebar .fn-view-back.fn-btn--icon .fn-ic, #fn-ui #fn-sidebar .fn-view-back.fn-btn--icon .fn-ico{ display:inline-flex !important; align-items:center !important; justify-content:center !important; } /* Comments in marker details */ .fn-comments{ margin-top:12px; border-top:1px dashed rgba(0,0,0,.10); padding-top:12px; } .fn-comments__head{ display:flex; align-items:center; justify-content:space-between; gap:10px; } .fn-comments__title{ font-weight:900; font-size:15px; letter-spacing:.2px; } .fn-comments__list{ display:flex; flex-direction:column; gap:10px; margin-top:10px; } .fn-comment{ padding:10px 12px; border:1px solid rgba(0,0,0,.10); border-radius:14px; background:rgba(255,255,255,.92); box-shadow:0 1px 6px rgba(0,0,0,.04); } .fn-comment__meta{ display:flex; gap:10px; flex-wrap:wrap; font-size:12px; color:rgba(0,0,0,.58); } .fn-comment__author{ font-weight:900; color:rgba(0,0,0,.72); } .fn-comment__body{ margin-top:6px; font-size:13px; line-height:1.35; white-space:pre-wrap; overflow-wrap:anywhere; } .fn-comments__form{ margin-top:12px; } .fn-menu__ic--empty{ opacity:0; } /* Sidebar icon+text: Theme-sichere Overrides */ #fn-ui .fn-sidebar .fn-btn--icon{ display:inline-flex !important; flex-direction:row !important; flex-wrap:nowrap !important; align-items:center !important; justify-content:center !important; gap:20px !important; line-height:1 !important; } #fn-ui .fn-sidebar .fn-btn--icon .fn-label{ display:inline-flex !important; align-items:center !important; line-height:1.1 !important; } #fn-ui .fn-sidebar .fn-btn--icon .fn-ic, #fn-ui .fn-sidebar .fn-btn--icon .fn-ico, #fn-ui .fn-sidebar .fn-btn--icon img{ display:inline-flex !important; align-items:center !important; justify-content:center !important; } /* Sidebar: Icon+Text wie Filter-Chips (mehr Abstand + vertikal zentriert) */ #fn-ui .fn-sidebar .fn-btn--icon{ display:inline-flex; flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:center; gap:20px; line-height:1; } /* Sidebar: Action-Buttons (z.B. Route planen/Zentrieren/Zurück) sollen wie "Kommentar senden" aussehen */ #fn-ui .fn-sidebar .fn-actions .fn-btn, #fn-ui #fn-sidebar .fn-view-back.fn-btn{ padding:var(--fn-sidebar-btn-py, 10px) var(--fn-sidebar-btn-px, 14px) !important; border-radius:var(--fn-btn-radius) !important; font-weight:900 !important; font-size:var(--fn-sidebar-btn-fs, 14px) !important; line-height:1.1 !important; } /* Icon+Text Buttons innerhalb der Sidebar (auch wenn sie technisch als --icon gerendert werden) */ #fn-ui .fn-sidebar .fn-actions .fn-btn--icon, #fn-ui #fn-sidebar .fn-view-back.fn-btn--icon{ padding:var(--fn-sidebar-btn-py, 10px) var(--fn-sidebar-btn-px, 14px) !important; border-radius:var(--fn-btn-radius) !important; gap:18px !important; align-items:center !important; justify-content:center !important; font-size:var(--fn-sidebar-btn-fs, 14px) !important; } /* Comments "Kommentar senden" in sidebar should follow the same sizing as action buttons */ #fn-ui .fn-sidebar .fn-comments__form .fn-btn, #fn-ui .fn-sidebar .fn-comments__form .fn-btn--icon{ padding:var(--fn-sidebar-btn-py, 10px) var(--fn-sidebar-btn-px, 14px) !important; font-size:var(--fn-sidebar-btn-fs, 14px) !important; font-weight:900 !important; line-height:1.1 !important; } /* Icon-only Buttons (z.B. Reload/Minimieren im Header) bleiben kompakt */ #fn-ui .fn-sidebar .fn-btn--icononly{ padding:8px 10px !important; border-radius:12px !important; } #fn-ui .fn-sidebar .fn-btn--icon .fn-ic, #fn-ui .fn-sidebar .fn-btn--icon .fn-ico, #fn-ui .fn-sidebar .fn-btn--icon img{ flex:0 0 auto; align-self:center; } #fn-ui .fn-sidebar .fn-btn--icon .fn-label{ align-self:center; line-height:1.1; white-space:nowrap; } /* ===== Toast / Info Chips (overlay) ===== */ .fn-toast-area{ position:absolute; z-index: 9999; display:flex; flex-direction:column; gap:10px; pointer-events:none; max-width:min(520px, calc(100% - 24px)); } #fn-app{ position:relative; } .fn-toast-area--top-left{ top:12px; left:12px; align-items:flex-start; } .fn-toast-area--top-center{ top:12px; left:50%; transform:translateX(-50%); align-items:center; } .fn-toast-area--top-right{ top:12px; right:12px; align-items:flex-end; } .fn-toast-area--bottom-left{ bottom:12px; left:12px; align-items:flex-start; } .fn-toast-area--bottom-center{ bottom:12px; left:50%; transform:translateX(-50%); align-items:center; } .fn-toast-area--bottom-right{ bottom:12px; right:12px; align-items:flex-end; } .fn-toast{ pointer-events:auto; display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border-radius:999px; border:1px solid rgba(0,0,0,.10); background: rgba(255,255,255,.96); box-shadow:0 10px 30px rgba(0,0,0,.16); backdrop-filter: blur(2px); max-width:100%; transform: translateY(6px); opacity:0; transition: transform .16s ease, opacity .16s ease; } .fn-toast.is-in{ transform: translateY(0); opacity:1; } .fn-toast.is-leaving{ transform: translateY(6px); opacity:0; } .fn-toast__body{ font: inherit; font-weight: 800; line-height: 1.25; font-size: 14px; color: #111; word-break: break-word; white-space: pre-line; } .fn-toast__body a{ color: inherit; text-decoration: underline; } .fn-toast__x{ border:0; background: transparent; cursor:pointer; padding:2px; margin-left:2px; line-height:1; color: inherit; opacity:.85; } .fn-toast__x:hover{ opacity:1; } .fn-toast__x svg{ width:18px; height:18px; display:block; } .fn-toast--info{ background: rgba(255,255,255,.96); } .fn-toast--success{ background: rgba(240,253,244,.96); border-color: rgba(22,163,74,.35); } .fn-toast--warn{ background: rgba(255,251,235,.96); border-color: rgba(245,158,11,.35); } .fn-toast--error{ background: rgba(220,38,38,.96); border-color: rgba(127,29,29,.55); } .fn-toast--error .fn-toast__body{ color: #fff; } .fn-toast--error .fn-toast__x{ color: #fff; } /* Clickable route preview lines */ .fn-route-clickable{ cursor:pointer; } /* ========================= * Routeplan (Context menu + Mode button) * ========================= */ .fn-modebtn{ pointer-events:auto; position:absolute; right:14px; top:14px; z-index:26; display:flex; align-items:center; gap:4px; background:var(--fn-mode-bg, rgba(255,255,255,.94)); border:2px solid rgba(var(--fn-mode-accent-rgb, var(--fn-accent-rgb)), .35); border-radius:999px; padding:4px; box-shadow:0 14px 50px rgba(0,0,0,.20); backdrop-filter:saturate(1.2) blur(10px); } .fn-modebtn__seg{ border:0; background:transparent; color:var(--fn-mode-text, #111); font-weight:900; border-radius:999px; padding:10px 14px; cursor:pointer; display:flex; align-items:center; gap:8px; opacity:.92; transition: background .15s ease, color .15s ease, transform .15s ease, opacity .15s ease; } .fn-modebtn__seg:hover{ background:rgba(var(--fn-mode-accent-rgb, var(--fn-accent-rgb)), .08); opacity:1; } .fn-modebtn__seg.is-active{ background:var(--fn-mode-accent, var(--fn-accent)); color:var(--fn-mode-active-text, #fff); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 0 10px 22px rgba(0,0,0,.18); opacity:1; } .fn-modebtn__ic{ display:inline-flex; align-items:center; justify-content:center; } .fn-modebtn__txt{ font-size:13px; } /* Routeplan pins */ .fn-rp-pin{ width:38px; height:38px; border-radius:999px; display:flex; align-items:center; justify-content:center; font-weight:900; color:#111; background:#fff; border:2px solid rgba(0,0,0,.18); box-shadow:0 14px 40px rgba(0,0,0,.22); } .fn-rp-pin--start{ border-color:rgba(34,197,94,.65); } .fn-rp-pin--end{ border-color:rgba(239,68,68,.70); } .fn-rp-pin--via{ border-color:rgba(59,130,246,.65); } .fn-rp-pin--draft{ border-color:rgba(0,0,0,.25); opacity:.85; } /* New context menu layout */ .fn-context{ padding:12px; } .fn-context__head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:2px 4px 10px; } .fn-context__title{ font-weight:900; margin:0; font-size:14px; } .fn-context__x{ border:0; background:rgba(0,0,0,.06); border-radius:999px; width:34px; height:34px; display:flex; align-items:center; justify-content:center; cursor:pointer; } .fn-context__x:hover{ background:rgba(0,0,0,.10); } .fn-context__x svg{ width:18px; height:18px; } .fn-context__items{ display:flex; flex-direction:column; gap:8px; } .fn-context__hint{ padding:10px 12px; border-radius:14px; background:rgba(0,0,0,.04); border:1px dashed rgba(0,0,0,.12); font-weight:800; opacity:.78; line-height:1.25; } .fn-context__item{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; border:0; background:rgba(0,0,0,.06); border-radius:14px; padding:10px 12px; cursor:pointer; font-weight:900; } .fn-context__item svg{ width:18px; height:18px; } .fn-context__item:hover{ background:rgba(0,0,0,.10); } .fn-context__item:disabled{ opacity:.45; cursor:default; } .fn-context__item--muted{ opacity:.82; font-weight:700; } .fn-context__sep{ height:1px; background:rgba(0,0,0,.10); margin:6px 4px; } /* Sidebar routeplan list */ .fn-rp-list{ display:flex; flex-direction:column; gap:8px; margin-top:10px; } .fn-rp-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; background:rgba(0,0,0,.04); border:1px solid rgba(0,0,0,.08); border-radius:14px; } .fn-rp-row__l{ display:flex; flex-direction:column; gap:2px; } .fn-rp-row__k{ font-size:12px; opacity:.72; font-weight:900; } .fn-rp-row__v{ font-size:13px; font-weight:900; } .fn-rp-row__btn{ border:0; background:rgba(0,0,0,.08); border-radius:999px; width:34px; height:34px; display:flex; align-items:center; justify-content:center; cursor:pointer; } .fn-rp-row__btn:hover{ background:rgba(0,0,0,.12); } /* Routeplan view helpers */ .fn-route-row{ display:flex; align-items:center; gap:10px; } .fn-route-label{ font-weight:900; color:rgba(0,0,0,.74); min-width:90px; } .fn-route-row--via .fn-route-label{ min-width:22px; } .fn-route-via-del{ border:none; background:rgba(0,0,0,.06); border-radius:10px; width:28px; height:28px; display:flex; align-items:center; justify-content:center; font-size:18px; line-height:1; cursor:pointer; } .fn-route-via-del:hover{ background:rgba(0,0,0,.10); } /* Small toggle (used in routeplan view) */ .fn-toggle{ border: 1px solid rgba(0,0,0,.12); background: rgba(0,0,0,.10); width: 48px; height: 28px; border-radius: 999px; padding: 0; position: relative; cursor: pointer; display: inline-flex; align-items: center; } .fn-toggle__knob{ width: 22px; height: 22px; border-radius: 999px; background: #fff; box-shadow: 0 10px 20px rgba(0,0,0,.16); position: absolute; left: 3px; top: 2px; transform: translateX(0); transition: transform .18s ease; } .fn-toggle.is-on{ background: rgba(var(--fn-accent-rgb, 230, 57, 70), .26); border-color: rgba(var(--fn-accent-rgb, 230, 57, 70), .26); } .fn-toggle.is-on .fn-toggle__knob{ transform: translateX(20px); } .fn-toggle:focus-visible{ outline: 2px solid rgba(var(--fn-accent-rgb, 230, 57, 70), .55); outline-offset: 2px; } .fn-route-loading{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:16px; background:rgba(0,0,0,.04); font-weight:900; } .fn-route-loading .fn-spinner{ width:16px; height:16px; }