/* RoadWhisper — Warm Adventure Theme */ :root { --rw-bg: #1b1613; --rw-surface: #241c16; --rw-surface2: #2c2218; --rw-accent: #f0a500; --rw-accent-btn:#e08a2b; --rw-accent-ink:#231202; --rw-text: #f4ece2; --rw-muted: #9a866c; --rw-border: #3a2c20; --rw-dot: #e0b15a; --rw-bg-grad: linear-gradient(180deg,#1c150f 0%,#181009 62%,#120c06 100%); --rw-cta-bg: linear-gradient(135deg,#ffc24d 0%,#f0a000 45%,#e0701a 100%); --rw-cta-ink: #2a1602; --rw-cta-glow: 0 10px 26px rgba(240,150,30,.5), 0 2px 4px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.35); --rw-raised-bg: linear-gradient(180deg,#2c2117,#241a12); --rw-raised-border: #463422; --rw-raised-shadow: 0 4px 12px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05); --rw-toggle-on-bg: linear-gradient(180deg,#3a2a12,#2e2110); --rw-inset-bg: #130d08; --rw-inset-shadow: inset 0 2px 6px rgba(0,0,0,.55); --rw-hairline: rgba(255,255,255,.05); --rw-nav-pill: rgba(240,165,0,.15); --rw-stop-bg: linear-gradient(135deg,#e8604a 0%,#c23a22 100%); --rw-stop-ink: #fff5f1; --rw-stop-glow: 0 10px 26px rgba(200,55,35,.5), 0 2px 4px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.3); --rw-mascot-veil-alpha: 88%; } /* Light-Theme „Neutral Hell“ — wird per data-theme="light" auf aktiviert (gesetzt von js/theme.js bzw. dem Anti-Flash-Inline-Script in index.html). :root bleibt Dark (Default), daher kein Eingriff ins Bestands-Verhalten. */ :root[data-theme="light"] { --rw-bg: #f4f5f7; --rw-surface: #ffffff; --rw-surface2: #eef0f3; --rw-accent: #b5700c; --rw-accent-btn:#d98a2b; --rw-accent-ink:#1a1205; --rw-text: #1f2430; --rw-muted: #6b7280; --rw-border: #d9dee5; --rw-dot: #b5700c; --rw-mascot-veil-alpha: 92%; --rw-bg-grad: linear-gradient(180deg,#fbf5ea 0%,#f4ebdb 70%,#efe3cf 100%); --rw-cta-bg: linear-gradient(135deg,#ffc24d 0%,#f0a000 45%,#e0701a 100%); --rw-cta-ink: #2a1602; --rw-cta-glow: 0 8px 20px rgba(224,123,31,.32), inset 0 1px 0 rgba(255,255,255,.4); --rw-raised-bg: #ffffff; --rw-raised-border: #d9c8ad; --rw-raised-shadow: 0 3px 8px rgba(120,90,40,.12); --rw-toggle-on-bg: linear-gradient(180deg,#fdf0d2,#f8e6bf); --rw-inset-bg: #f4ead9; --rw-inset-shadow: inset 0 1px 3px rgba(120,90,40,.14); --rw-hairline: rgba(0,0,0,.06); --rw-nav-pill: rgba(240,165,0,.18); --rw-stop-bg: linear-gradient(135deg,#e8604a 0%,#c23a22 100%); --rw-stop-ink: #fff5f1; --rw-stop-glow: 0 8px 20px rgba(200,55,35,.32), inset 0 1px 0 rgba(255,255,255,.35); } /* Akzent-Flächen, die als rgba des Marken-Amber hartcodiert sind, im Light auf den dunkleren Light-Akzent umstellen (sonst kaum sichtbar auf Weiß). */ :root[data-theme="light"] .rw-demo-bar { background: rgba(181, 112, 12, 0.12); border: 1px solid rgba(181, 112, 12, 0.35); } :root[data-theme="light"] .rw-direction-arrow { filter: drop-shadow(0 0 5px rgba(181, 112, 12, 0.4)); } :root[data-theme="light"] .rw-hint { background: rgba(181, 112, 12, 0.10); border: 1px solid rgba(181, 112, 12, 0.28); } /* light-theme rw-need-switch active shadow removed — new amber shadow is theme-neutral */ * { box-sizing: border-box; } body { background-color: var(--rw-bg); /* Fallback */ background-image: var(--rw-bg-grad); background-attachment: fixed; color: var(--rw-text); font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; min-height: 100vh; /* Platz für die fixe Tab-Leiste unten (Task 2). Inkl. Safe-Area, sonst verschwindet z.B. der Rechtliches-Footer hinter der Leiste (Gesten-Nav). */ padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } /* Bootstrap-.text-muted nutzt ein dunkles Grau, das auf dem dunklen Grund kaum lesbar ist (v.a. Impressum/Datenschutz/Quellen-Fließtext). Auf die App-eigene gedämpfte Farbe mappen (#9a866c, ~5.5:1 Kontrast → lesbar, aber dezent). */ .text-muted { color: var(--rw-muted) !important; } /* Rechtliches-Footer: Links in Akzentfarbe (DDG: Impressum "leicht erkennbar"). */ footer a.text-muted { color: var(--rw-accent) !important; } footer a.text-muted:hover, footer a.text-muted:focus { color: var(--rw-dot) !important; } /* Footer als Flex-Grid statt Fließtext mit festen me-3-Abständen — bricht dadurch gleichmäßig um (zentriert, konsistenter Gap), statt je nach Viewport-Breite zufällig 3+2 o.ä. Zeilen zu bilden. */ .rw-footer-links { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 0.9rem; row-gap: 0.35rem; text-align: center; } /* App-Header (schlank) */ .rw-navbar, .rw-appbar { background: var(--rw-bg); border-bottom: 1px solid var(--rw-hairline); padding: 0.7rem 1rem; } .rw-brand { font-size: 1.2rem; font-weight: 700; letter-spacing: 0.02em; color: var(--rw-text) !important; } .rw-brand .bi-bicycle { color: var(--rw-accent); } .rw-brand-mark{height:1.4rem;width:auto;vertical-align:-0.25rem;margin-right:.35rem} /* Dezenter Beta-Badge im Header (config-gesteuert ein-/ausgeblendet via #rw-beta). */ .rw-beta { font-size: 0.55em; font-weight: 600; color: var(--rw-muted); letter-spacing: 0.04em; margin-left: 3px; top: -0.6em; } /* Status-Punkt im Header */ .rw-status-dot { font-size: 0.8rem; font-weight: 600; color: var(--rw-dot); letter-spacing: 0.02em; } .rw-status-dot i { font-size: 1.05rem; vertical-align: middle; } .rw-status-dot i + i { margin-left: 1px; } /* Demo */ .rw-demo-badge { background: var(--rw-accent); color: var(--rw-accent-ink); font-size: 0.72rem; font-weight: 700; } /* Persistenter Shop-Einstieg im App-Bar (nur bei !fromPlay sichtbar, s. app.js App.init) */ .rw-shop-link { background: var(--rw-accent-btn); color: var(--rw-accent-ink); font-size: 0.85rem; line-height: 1; padding: 0.32em 0.5em; cursor: pointer; text-decoration: none; } .rw-shop-link:hover, .rw-shop-link:focus { background: var(--rw-accent); color: var(--rw-accent-ink); } .rw-demo-bar { background: rgba(240, 165, 0, 0.12); border: 1px solid rgba(240, 165, 0, 0.35); border-radius: 10px; padding: 0.4rem 0.75rem; font-size: 0.8rem; color: var(--rw-accent); margin-bottom: 0.75rem; } .rw-demo-link { color: var(--rw-accent); text-decoration: underline; } .rw-nav-speed { font-size: 0.9rem; font-weight: 700; color: var(--rw-dot); } /* Primärer Start/Stop-Button — handschuhtauglich groß */ /* Tour-Guide-Hauptbutton. Konvention app-weit: Akzent-Orange = AKTIV/AN. AUS ("starten") = neutral/Outline (gross & full-width = trotzdem klar die Hauptaktion). AN ("stoppen") = gefuellt-orange via .rw-btn-main--active, konsistent mit Pause/Uebernachtung. Kein Bootstrap-Gruen mehr. */ .rw-btn-main { background: var(--rw-raised-bg); color: var(--rw-text); border: 1px solid var(--rw-raised-border); font-size: 1.25rem; font-weight: 700; padding: 1.1rem 1rem; min-height: 64px; border-radius: 16px; letter-spacing: 0.02em; box-shadow: var(--rw-raised-shadow); transition: all 0.2s ease; } .rw-btn-main:hover, .rw-btn-main:focus { background: var(--rw-raised-bg); border-color: var(--rw-accent); color: var(--rw-text); } /* Theme-Segment aktiv: ruhig-amber (quiet accent, kein Glow). */ .rw-btn-main--active { background: var(--rw-toggle-on-bg); border-color: var(--rw-accent); color: var(--rw-accent); box-shadow: var(--rw-raised-shadow); } .rw-btn-main--active:hover, .rw-btn-main--active:focus { background: var(--rw-toggle-on-bg); color: var(--rw-accent); border-color: var(--rw-accent); } /* Konto-/Session-/Feedback-Buttons (Bootstrap, scoped) */ #tab-settings .btn-light, #tab-settings .btn-outline-secondary, #tab-settings .btn-outline-light { background: var(--rw-raised-bg) !important; color: var(--rw-text) !important; border: 1px solid var(--rw-raised-border) !important; box-shadow: var(--rw-raised-shadow); } #tab-settings .btn-light:hover, #tab-settings .btn-outline-secondary:hover, #tab-settings .btn-outline-light:hover { border-color: var(--rw-accent) !important; } /* Modal-Aktionsbuttons (Bootstrap-Basisklassen ohne Farbvariante, z.B. community.js: bare .btn/.ghost hatten keine Theme-Farbe -> im Dark-Mode fast unsichtbarer Text, da Bootstraps eigenes --bs-body-color nie auf das dunkle Theme reagiert (App nutzt data-theme, nicht Bootstraps data-bs-theme). Gleiche Konvention wie #tab-settings oben, global. */ .btn.ghost { background: var(--rw-raised-bg); color: var(--rw-text); border: 1px solid var(--rw-raised-border); } .btn.ghost:hover, .btn.ghost:focus { border-color: var(--rw-accent); } .rw-btn-accent { background: var(--rw-accent-btn); color: var(--rw-accent-ink); } .rw-btn-accent:hover, .rw-btn-accent:focus { background: var(--rw-accent); color: var(--rw-accent-ink); } /* Grid-Item ohne min-width:0 waechst per default (min-width:auto) auf die max-content-Breite seiner Zeilen -> #community-contributions-list (.d-grid, keine explizite grid-template-columns) hat dann eine breitere Spalte als der Container und die Beitrags-Zeile laeuft rechts aus dem sichtbaren Bereich. */ .rw-contrib-row { min-width: 0; background: var(--rw-raised-bg); border: 1px solid var(--rw-raised-border); border-radius: 10px; padding: 0.5rem 0.6rem; } .rw-contrib-head { font-size: 0.72rem; margin-bottom: 0.3rem; } .rw-contrib-map { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; background: var(--rw-surface); display: block; float: left; margin-right: 0.6rem; margin-bottom: 0.2rem; } .rw-contrib-map--empty { background: var(--rw-surface); border: 1px dashed var(--rw-raised-border); } .rw-contrib-body { font-size: 0.82rem; line-height: 1.4; color: var(--rw-text); } /* Stufe 1 — Hauptaktion: leuchtender Amber-CTA (Tour starten/stoppen). */ #btn-start.rw-cta, #btn-start.rw-cta:hover, #btn-start.rw-cta:focus { background: var(--rw-cta-bg); color: var(--rw-cta-ink); border: none; border-radius: 18px; min-height: 66px; box-shadow: var(--rw-cta-glow); } /* Laufende Tour ("stoppen"): roter Stop-Ton, klar abgesetzt vom passiven Start-CTA. */ #btn-start.rw-cta.rw-btn-main--active, #btn-start.rw-cta.rw-btn-main--active:hover, #btn-start.rw-cta.rw-btn-main--active:focus { background: var(--rw-stop-bg); color: var(--rw-stop-ink); box-shadow: var(--rw-stop-glow); } /* Karten */ .rw-card { background: var(--rw-surface); border: 1px solid var(--rw-border); border-radius: 16px; padding: 0.85rem 1rem; } .rw-card-title { font-size: 0.95rem; font-weight: 600; color: var(--rw-text); } .rw-card-sub { font-size: 0.8rem; color: var(--rw-muted); margin-top: 0.15rem; line-height: 1.4; } /* „Du hörst" Zusammenfassung */ .rw-hears-cat { display: inline-block; background: var(--rw-surface2); border-radius: 20px; padding: 0.1rem 0.6rem; font-size: 0.78rem; color: var(--rw-text); margin: 0.2rem 0.25rem 0 0; } .rw-hears-cat--off { opacity: 0.4; text-decoration: line-through; } .rw-need-switch--locked { opacity: 0.45; pointer-events: auto; } /* pointer-events bleibt an, damit der Klick fürs Popup ankommt */ .rw-locked-control { opacity: 0.45; } /* Now-Playing / Current POI Panel */ .rw-poi-panel { background: var(--rw-inset-bg); border: none; box-shadow: var(--rw-inset-shadow); border-radius: 16px; padding: 1rem; animation: rw-slide-in 0.3s ease; } @keyframes rw-slide-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .rw-arrow-wrap { flex-shrink: 0; width: 72px; height: 72px; } .rw-direction-arrow { width: 72px; height: 72px; transition: transform 0.6s cubic-bezier(0.34, 1.4, 0.64, 1); filter: drop-shadow(0 0 5px rgba(240, 165, 0, 0.4)); } .rw-poi-name { font-size: 1.1rem; font-weight: 700; color: var(--rw-text); margin-bottom: 0.25rem; } .rw-poi-distance { font-size: 0.8rem; font-weight: 700; color: var(--rw-accent); margin-bottom: 0.15rem; letter-spacing: 0.02em; } .rw-poi-text { font-size: 0.88rem; color: var(--rw-text); line-height: 1.5; } /* Dezente Statuszeile (Tour-Tab) */ .rw-status-line { text-align: center; font-size: 0.8rem; color: var(--rw-muted); padding: 0.4rem 0; } /* Section-/Settings-Labels */ .rw-section-label, .rw-settings-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--rw-muted); margin-bottom: 0.5rem; } /* Kategorie-Slider */ .rw-cat-slider { padding: 0.35rem 0; border-bottom: 1px solid var(--rw-border); } .rw-cat-slider:last-of-type { border-bottom: none; } .rw-cat-label { display: flex; align-items: center; color: var(--rw-text); font-size: 0.9rem; margin-bottom: 0.15rem; } .rw-cat-val { margin-left: auto; font-weight: 600; color: var(--rw-accent); } .rw-range-labels { font-size: 0.72rem; color: var(--rw-muted); margin-top: 0.1rem; } .form-range { height: 1.6rem; } .form-range::-webkit-slider-runnable-track { background: var(--rw-surface2); border: 1px solid var(--rw-border); border-radius: 6px; height: 7px; } .form-range::-moz-range-track { background: var(--rw-surface2); border: 1px solid var(--rw-border); border-radius: 6px; height: 7px; } .form-range::-webkit-slider-thumb { background: var(--rw-accent); width: 22px; height: 22px; margin-top: -8px; box-shadow: 0 2px 6px rgba(0,0,0,.3); } .form-range::-moz-range-thumb { background: var(--rw-accent); width: 22px; height: 22px; border: none; box-shadow: 0 2px 6px rgba(0,0,0,.3); } #tab-settings .form-select { background-color: var(--rw-surface2); color: var(--rw-text); border-color: var(--rw-border); } .form-check-input:checked { background-color: var(--rw-accent); border-color: var(--rw-accent); } /* Hint */ .rw-hint { background: rgba(240, 165, 0, 0.10); border: 1px solid rgba(240, 165, 0, 0.28); border-radius: 10px; padding: 0.75rem; font-size: 0.82rem; color: var(--rw-text); line-height: 1.5; } .rw-hint .bi { color: var(--rw-accent); margin-right: 0.3rem; } /* POI-Liste */ .rw-poi-list { border-radius: 16px; overflow: hidden; border: none; background: var(--rw-inset-bg); box-shadow: var(--rw-inset-shadow); } .rw-poi-list .list-group-item, .rw-poi-list-item { background: transparent !important; color: var(--rw-text) !important; border: none !important; border-top: 1px solid var(--rw-hairline) !important; font-size: 0.9rem; padding: 0.8rem 0.95rem; } .rw-poi-list .list-group-item:first-child, .rw-poi-list-item:first-child { border-top: none !important; } .rw-poi-list .list-group-item .bi { color: var(--rw-accent); } /* Diagnose (einklappbar, Einstellungen) */ .rw-diag-toggle { width: 100%; text-align: left; background: none; border: 1px solid var(--rw-border); border-radius: 10px; color: var(--rw-muted); font-size: 0.8rem; padding: 0.5rem 0.75rem; } .rw-diag-body { border: 1px solid var(--rw-border); border-top: none; border-radius: 0 0 10px 10px; padding: 0.6rem 0.75rem; font-size: 0.78rem; color: var(--rw-muted); } .rw-diag-body .rw-diag-row { display: flex; justify-content: space-between; padding: 0.15rem 0; } .rw-diag-body .bi { color: var(--rw-accent); margin-right: 0.25rem; } /* Leerzustand */ .rw-empty { text-align: center; color: var(--rw-muted); font-size: 0.9rem; padding: 2rem 1rem; } /* Leerzustand mit Icon + zentriertem Fokus (Logbuch/Pins ohne Inhalt) — ersetzt eine oben klebende einzeilige Meldung, unter der sonst eine lange leere Fläche bis zur Tab-Leiste folgt. list-style:none, damit es auch als
  • in Logbuchs
      funktioniert. */ .rw-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0.6rem; padding: 3rem 1.25rem; min-height: 40vh; color: var(--rw-muted); list-style: none; } .rw-empty-state .bi { font-size: 2.75rem; color: var(--rw-border); } .rw-empty-state p { margin: 0; font-size: 0.95rem; max-width: 26em; } .rw-empty-state .btn { margin-top: 0.4rem; } /* Bottom-Tab-Leiste (Task 2) */ .rw-tabbar { position: fixed; left: 0; right: 0; bottom: 0; display: flex; background: var(--rw-surface); border-top: 1px solid var(--rw-border); z-index: 1030; padding-bottom: 4px; /* WebView ist nicht edge-to-edge -> Navi-Leiste bereits ausgespart; kein doppeltes safe-area */ } .rw-tab { flex: 1; background: none; border: none; color: var(--rw-muted); font-size: 0.72rem; padding: 0.5rem 0.25rem 0.65rem; text-align: center; } .rw-tab .bi { display: block; font-size: 1.2rem; margin-bottom: 0.1rem; padding: 0.2rem 0; } .rw-tab.active { color: var(--rw-accent); } .rw-tab.active .bi { display: block; width: fit-content; margin: 0 auto 0.1rem; background: var(--rw-nav-pill); border-radius: 15px; padding: 0.2rem 1.1rem; } /* Tab-Panes */ .rw-tabpane[hidden] { display: none; } /* Tour-Tab ist ein Flex-Container, damit die zwei Frame-Wrapper (für das Querformat-Layout) sich in Portrait per display:contents auflösen und die ursprüngliche Reihenfolge per --rw-order exakt erhalten bleibt. :not([hidden]) lässt das bestehende Pane-Verstecken (display:none) gewinnen. */ #tab-tour:not([hidden]) { display: flex; flex-direction: column; } #tour-frame-main, #tour-frame-list { display: contents; } #tour-frame-main > *, #tour-frame-list > *, #tab-tour > #tour-status { order: var(--rw-order, 0); } /* McGinty-Wasserzeichen: eigene ::before-Ebene (nicht direkt auf #tab-tour), damit eine mask-image-Weichzeichnung an den Kanten NUR das Wasserzeichen betrifft, nicht Buttons/Text (mask auf #tab-tour selbst wuerde die mitmaskieren). position:absolute nimmt das ::before aus dem Flex-Fluss raus (kein Einfluss auf die display:contents-Kinder), z-index:-1 haelt es hinter dem echten Inhalt (position:relative auf #tab-tour scoped das sauber, kein Leck zu Vorfahren). Deckkraft weiterhin NICHT per opacity auf #tab-tour gesetzt (das wuerde auch Buttons/Text ausbleichen), sondern per zweiter, fast deckender linear-gradient-Ebene ueber dem Bild im selben background-image-Stack. Die harte Kante der vorherigen Version (flaechige Einzelfarbe endet abrupt gegen den Seiten-Verlauf var(--rw-bg-grad)) wird durch eine radiale mask-image weich ausgeblendet -- der echte Seiten-Hintergrund (Verlauf) scheint an den Raendern durch, farblich also immer exakt korrekt, unabhaengig von Scroll-Position/Theme/Box-Hoehe. */ #tab-tour:not([hidden]) { min-height: calc(100dvh - 220px); position: relative; } #tab-tour:not([hidden])::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-repeat: no-repeat, no-repeat; background-position: bottom center, bottom center; background-size: 100% 100%, min(70vw, 320px) auto; background-attachment: scroll, scroll; background-image: linear-gradient(color-mix(in srgb, var(--rw-bg) var(--rw-mascot-veil-alpha), transparent), color-mix(in srgb, var(--rw-bg) var(--rw-mascot-veil-alpha), transparent)), url("/img/mcginty-tourbg.svg"); -webkit-mask-image: radial-gradient(ellipse 42% 32% at 50% 63%, #000 25%, transparent 100%); mask-image: radial-gradient(ellipse 42% 32% at 50% 63%, #000 25%, transparent 100%); } .rw-tab-title { font-size: 1.15rem; font-weight: 700; color: var(--rw-text); margin: 0.25rem 0 0.75rem; } /* Alerts / Scrollbar */ /* Toasts (GPS-Warnung u.ä.) folgten vorher Bootstraps Stock-Farben (helles Creme/Gelb) und brachen damit das Dark-Theme; jetzt gleiches Bauprinzip wie .rw-hint (dunkle Fläche + Akzent-Rand) — nur Farbe/Icon codieren die Bedeutung. Rot bleibt exklusiv für Fehler reserviert (alert-danger), passend zur App-Konvention "Rot = Stop/Fehler". */ .alert { background: var(--rw-surface); color: var(--rw-text); border: 1px solid var(--rw-border); border-radius: 10px; font-size: 0.88rem; } /* #alerts ist position:fixed und schwebt ueber beliebigem Inhalt -> eine reine rgba-Fläche als Hintergrund ist teil-transparent und lässt Durchsicht auf das darunterliegende UI zu (Bug, kein Effekt). Deshalb erst eine deckende Grundfarbe (background-color), dann den Farbton als Gradient DARÜBER in derselben Element-Box — beide Layer zusammen sind voll deckend, unabhängig davon, was hinter der Box liegt. */ .alert-info, .alert-warning { background-color: var(--rw-surface); background-image: linear-gradient(rgba(240, 165, 0, 0.14), rgba(240, 165, 0, 0.14)); border-color: rgba(240, 165, 0, 0.28); } .alert-success { background-color: var(--rw-surface); background-image: linear-gradient(rgba(70, 160, 90, 0.18), rgba(70, 160, 90, 0.18)); border-color: rgba(70, 160, 90, 0.4); } .alert-danger { background-color: var(--rw-surface); background-image: linear-gradient(rgba(200, 55, 35, 0.18), rgba(200, 55, 35, 0.18)); border-color: rgba(200, 55, 35, 0.4); } .alert-secondary { background: var(--rw-surface2); border-color: var(--rw-border); } /* Bootstraps Standard-Close-X ist schwarz -> auf dunklem Alert-Hintergrund unsichtbar; hellen statt eigenes SVG pflegen zu müssen. */ .alert .btn-close { filter: invert(1) grayscale(1) brightness(1.8); opacity: 0.7; } .alert .btn-close:hover { opacity: 1; } ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--rw-bg); } ::-webkit-scrollbar-thumb { background: var(--rw-border); border-radius: 3px; } /* ── Task 5: Bedürfnis-Schalter + Navigieren-Karte ──────────────────────── */ /* Zwei Toggle-Buttons: 🍽 Pause / 🛏 Übernachtung */ .rw-need-switch { background: var(--rw-raised-bg); border: 1px solid var(--rw-raised-border); border-radius: 18px; color: var(--rw-text); box-shadow: var(--rw-raised-shadow); font-size: 1.1rem; font-weight: 700; padding: 1.1rem 0.75rem; min-height: 64px; text-align: center; cursor: pointer; transition: all 0.18s ease; line-height: 1.3; display: flex; align-items: center; justify-content: center; } .rw-need-switch:hover { border-color: var(--rw-accent); color: var(--rw-text); } .rw-need-switch.active, .rw-need-switch[aria-pressed="true"] { background: var(--rw-toggle-on-bg); border-color: var(--rw-accent); color: var(--rw-accent); box-shadow: var(--rw-raised-shadow); } /* Tap-to-Act-Karte: Navigieren / Anrufen / Website */ .rw-act-card { background: var(--rw-inset-bg); border: none; box-shadow: var(--rw-inset-shadow); border-radius: 16px; padding: 0.85rem 1rem; animation: rw-slide-in 0.25s ease; } .rw-act-card-name { font-size: 1rem; font-weight: 700; color: var(--rw-text); margin-bottom: 0.2rem; } .rw-act-card-line { font-size: 0.78rem; color: var(--rw-muted); margin-bottom: 0.6rem; text-transform: uppercase; letter-spacing: 0.06em; } .rw-act-card-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; } .rw-act-btn { display: inline-flex; align-items: center; gap: 0.3rem; background: var(--rw-surface2); border: 1px solid var(--rw-border); border-radius: 10px; color: var(--rw-text); font-size: 0.82rem; font-weight: 600; padding: 0.4rem 0.75rem; text-decoration: none; cursor: pointer; transition: border-color 0.15s; } .rw-act-btn:hover { border-color: var(--rw-accent); color: var(--rw-accent); } .rw-act-btn--nav { color: var(--rw-accent); border-color: var(--rw-accent); } /* ── Entdecken-Tab — Akkordions + Checkbox-Chips ─────────────────────────── */ .rw-discover-accordion { border: none; border-radius: 0; overflow: visible; } .rw-discover-group { border: 1px solid var(--rw-border); border-radius: 16px; background: var(--rw-surface); overflow: hidden; margin-bottom: 11px; } .rw-discover-group:last-child { border: 1px solid var(--rw-border); margin-bottom: 0; } /* Header (h3 reset) */ .rw-discover-header { margin: 0; padding: 0; } /* Toggle button */ .rw-discover-toggle { display: flex; align-items: center; width: 100%; border: none; color: var(--rw-text); cursor: pointer; text-align: left; transition: background 0.15s; background: transparent; padding: 0.95rem 1rem; font-size: 0.95rem; font-weight: 700; } .rw-discover-toggle:hover, .rw-discover-toggle:focus { background: rgba(255,255,255,.03); outline: none; } /* Group count badge */ .rw-group-count { margin-left: auto; font-size: 0.72rem; font-weight: 700; color: var(--rw-accent); background: var(--rw-nav-pill); border-radius: 20px; padding: 2px 9px; } /* Rotating chevron */ .rw-discover-chevron { font-size: 0.85rem; transition: transform 0.2s ease; color: var(--rw-muted); margin-left: 0.6rem; } .rw-discover-chevron--open { transform: rotate(180deg); } /* Body inside collapsed panel */ .rw-discover-body { background: transparent; padding: 0 1rem 0.85rem; } .rw-discover-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 0.7rem; } /* Checkbox chip — label wraps the hidden checkbox */ .rw-sub-chip { display: inline-flex; align-items: center; background: var(--rw-raised-bg); border: 1px solid var(--rw-raised-border); border-radius: 11px; padding: 9px 13px; font-size: 0.82rem; font-weight: 600; color: var(--rw-text); cursor: pointer; user-select: none; transition: background .15s, border-color .15s, color .15s; } .rw-sub-chip--on { background: var(--rw-toggle-on-bg); border-color: var(--rw-accent); color: var(--rw-accent); } .rw-sub-chip:hover { border-color: var(--rw-accent); } .rw-sub-chip--locked { opacity: 0.55; } .rw-sub-chip-input { /* visuell versteckt, aber fokussierbar/SR-lesbar (Zustand zeigt die Chip-Farbe) */ position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; pointer-events: none; } /* Select all / deselect all helpers */ .rw-discover-helpers { display: flex; gap: 18px; margin-top: 0.4rem; } .rw-discover-helper-btn { background: transparent; border: none; color: var(--rw-accent); font-size: 0.78rem; font-weight: 600; padding: 4px 2px; cursor: pointer; } .rw-discover-helper-btn:hover { color: var(--rw-dot); } /* ===== Querformat (Motorrad-Lenkermontage) — nur kurze Landscape-Viewports. Trifft Handy-Querformat, lässt Portrait/Tablet/Desktop unberührt. ===== */ @media (orientation: landscape) and (max-height: 500px) { /* Header nicht sticky im Querformat: eine statische Leiste im Fluss kann den oberen Frame-Inhalt nie überlappen (Mobile-Page-Scroll-Schutz). */ .rw-appbar { position: static; } /* Tab-Leiste: unten → schmale Icon-Rail links */ body { padding-bottom: 0; padding-left: 60px; /* Platz für die fixe Rail */ } .rw-tabbar { top: 0; bottom: 0; right: auto; width: 60px; flex-direction: column; justify-content: flex-start; border-top: none; border-right: 1px solid var(--rw-border); padding-bottom: 0; } .rw-tab { flex: 0 0 auto; font-size: 0; /* blendet das Text-Label aus, Icon bleibt */ padding: 0.65rem 0.25rem; } .rw-tab .bi { font-size: 1.35rem; margin: 0; } .rw-tab.active { border-top: none; margin-top: 0; } .rw-tab.active .bi { padding: 0.25rem 0.55rem; border-radius: 12px; } /* Tour-Tab: zwei Spalten */ #tab-tour:not([hidden]) { flex-direction: row; align-items: flex-start; gap: 1rem; } /* McGinty-Wasserzeichen im engen Zwei-Spalten-Landscape-Layout deaktivieren: das SVG (min(70vw,320px) hoch) waere in einem ~360-400px hohen Viewport fast bildschirmfuellend und wuerde die dichten Inhaltsspalten dominieren statt nur leeren Platz zu fuellen. */ #tab-tour:not([hidden]) { background-image: none; } #tour-frame-main, #tour-frame-list { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; max-height: calc(100dvh - 72px); /* dvh = echter sichtbarer Viewport (Mobile-100vh-Falle) */ overflow-y: auto; } #tour-frame-list #poi-list { max-height: 50dvh; /* ~5 Einträge sichtbar, Rest scrollt */ overflow-y: auto; } /* GPS-Status an den Fuß der Rail pinnen */ #tour-status { position: fixed; left: 0; bottom: 0; width: 60px; padding: 0.3rem 0.15rem; font-size: 0.6rem; line-height: 1.1; z-index: 1031; } } /* Onboarding-Wizard-Overlay */ #rw-onboarding { position: fixed; inset: 0; z-index: 2000; background: var(--rw-bg); display: flex; flex-direction: column; opacity: 1; transition: opacity .25s; } #rw-onboarding.rw-ob-out { opacity: 0; } .rw-ob-top { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; } .rw-ob-dots { display: flex; gap: 6px; } .rw-ob-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--rw-border); display: inline-block; transition: width .2s; } .rw-ob-dots i.on { background: var(--rw-accent); width: 22px; border-radius: 4px; } .rw-ob-skip { color: var(--rw-muted); font-size: 13px; cursor: pointer; } .rw-ob-body { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 8px 24px 0; max-width: 460px; margin: 0 auto; width: 100%; } .rw-ob-ic { font-size: 54px; color: var(--rw-accent); margin: 24px 0 16px; } .rw-ob-ttl { color: var(--rw-text); font-weight: 800; font-size: 22px; margin-bottom: 12px; } .rw-ob-badge { font-size: 11px; color: var(--rw-accent-ink); background: var(--rw-dot); border-radius: 6px; padding: 1px 7px; font-weight: 700; vertical-align: middle; } .rw-ob-txt { color: var(--rw-muted); font-size: 15px; line-height: 1.55; } .rw-ob-seg { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 22px; width: 100%; } .rw-ob-segbtn { border: 1px solid var(--rw-border); color: var(--rw-text); background: var(--rw-surface2); border-radius: 11px; padding: 10px 14px; font-size: 14px; cursor: pointer; } .rw-ob-segbtn.on { background: var(--rw-toggle-on-bg); color: var(--rw-accent); border-color: var(--rw-accent); font-weight: 700; } .rw-ob-btn-main { display: block; width: 100%; max-width: 320px; background: var(--rw-accent-btn); color: var(--rw-accent-ink); border: none; border-radius: 12px; padding: 13px 0; font-weight: 700; font-size: 15px; margin-top: 22px; cursor: pointer; } .rw-ob-btn-sec { display: block; width: 100%; max-width: 320px; background: var(--rw-surface2); color: var(--rw-text); border: 1px solid var(--rw-border); border-radius: 12px; padding: 13px 0; font-weight: 600; font-size: 15px; margin-top: 10px; cursor: pointer; } .rw-ob-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 320px; border: 1px solid var(--rw-border); background: var(--rw-surface); color: var(--rw-text); border-radius: 12px; padding: 12px 14px; margin-top: 12px; font-size: 15px; cursor: pointer; } .rw-ob-sw { width: 42px; height: 24px; border-radius: 12px; background: var(--rw-border); position: relative; flex: 0 0 auto; } .rw-ob-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .15s; } .rw-ob-toggle.on .rw-ob-sw { background: var(--rw-accent-btn); } .rw-ob-toggle.on .rw-ob-sw::after { left: 20px; } .rw-ob-hint { font-size: 13px; color: var(--rw-muted); margin-top: 14px; } .rw-ob-hint--tight { margin-top: 2px; margin-bottom: 10px; } .rw-ob-foot { margin-top: auto; padding: 16px 4px 8px; font-size: 12px; color: var(--rw-muted); opacity: .8; font-style: italic; } .rw-ob-nav { display: flex; gap: 10px; padding: 16px 18px; max-width: 460px; margin: 0 auto; width: 100%; } .rw-ob-next { flex: 1; background: var(--rw-accent-btn); color: var(--rw-accent-ink); border-radius: 12px; padding: 13px 0; text-align: center; font-weight: 700; font-size: 15px; cursor: pointer; } .rw-ob-back { color: var(--rw-muted); padding: 13px 14px; font-size: 15px; align-self: center; cursor: pointer; } /* Bootstrap-Modals (z.B. Feature-Gate-Paygate) muessen ueber dem Onboarding- Overlay liegen -- sonst oeffnen sie zwar (DOM/Show-State korrekt), bleiben aber unsichtbar hinter #rw-onboarding (z-index:2000) bis der Wizard schliesst. Gleiche Koordinations-Logik wie #alerts (ueber 1055 platziert). */ .modal-backdrop { z-index: 2010; } .modal { z-index: 2020; } /* Kategorien-Vorauswahl (Onboarding Screen 3) */ .rw-ob-cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-top: 18px; } .rw-ob-cat-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; border: 1px solid var(--rw-raised-border); background: var(--rw-raised-bg); box-shadow: var(--rw-raised-shadow); border-radius: 13px; padding: 14px 8px; font-size: 0.82rem; font-weight: 700; color: var(--rw-text); cursor: pointer; } .rw-ob-cat-tile i { font-size: 22px; } .rw-ob-cat-tile--on { background: var(--rw-toggle-on-bg); border-color: var(--rw-accent); color: var(--rw-accent); } .rw-ob-cat-tile--locked { opacity: 0.55; } /* Task 5: Hero-Zeile */ .rw-tour-hero { padding: 0.25rem 0.25rem 0.5rem; } .rw-tour-hero-title { font-size: 1.6rem; font-weight: 800; color: var(--rw-text); line-height: 1.15; } .rw-tour-hero-sub { font-size: 0.9rem; color: var(--rw-muted); margin-top: 0.25rem; } /* Task 1 P2: Dichte-Segment */ .rw-density-seg { display: flex; gap: 8px; } .rw-density-seg-btn { flex: 1; text-align: center; padding: 12px 4px; border-radius: 13px; font-size: 0.8rem; font-weight: 700; cursor: pointer; line-height: 1.2; color: var(--rw-text); background: var(--rw-raised-bg); border: 1px solid var(--rw-raised-border); box-shadow: var(--rw-raised-shadow); } .rw-density-seg-btn--on { background: var(--rw-toggle-on-bg); border-color: var(--rw-accent); color: var(--rw-accent); } .rw-density-seg-btn--locked { opacity: 0.45; } /* Abstands-Unterzeile im Dichte-Regler: eigene Zeile unter dem Stufennamen. Ohne `display: block` liefe sie inline hinter den Namen und der Knopf wuerde in der Breite ausreissen -- die drei Stufen teilen sich per `flex: 1` dieselbe Zeile. Gedaempft und kleiner, weil es eine Erlaeuterung ist und nicht die Beschriftung. */ .rw-density-seg-sub { display: block; margin-top: 3px; font-size: 0.68rem; font-weight: 500; line-height: 1.15; opacity: 0.65; white-space: nowrap; } /* === P3 Task 2: Logbuch-Einträge als eingelassene Karten === */ #shownotes-list { padding-left: 0 !important; list-style: none; } .rw-log-item { list-style: none; background: var(--rw-inset-bg); box-shadow: var(--rw-inset-shadow); border-radius: 14px; padding: 0.85rem 0.95rem; margin-bottom: 10px; overflow: hidden; } .rw-log-actions { display: flex; flex-wrap: wrap; gap: 9px; margin: 10px 0 0; } .rw-log-btn { width: 48px; height: 48px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: var(--rw-cta-bg); color: var(--rw-cta-ink); border-radius: 13px; box-shadow: 0 3px 10px rgba(224,123,31,.35); font-size: 1.3rem; text-decoration: none; border: 0; padding: 0; -webkit-appearance: none; appearance: none; cursor: pointer; } .rw-log-btn:hover, .rw-log-btn:focus { color: var(--rw-cta-ink); filter: brightness(1.06); } .rw-log-name { color: var(--rw-text); font-weight: 700; } .rw-empty { list-style: none; color: var(--rw-muted); padding: 0.6rem 0; } .rw-nav-link, .rw-nav-link:hover { color: var(--rw-accent) !important; } /* Toasts/Alerts schweben ueber der App, statt das Layout zu verschieben. Container ist klick-durchlaessig; nur die Alerts selbst sind interaktiv. */ #alerts { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 8px); left: 50%; transform: translateX(-50%); z-index: 1090; /* ueber Inhalt und Bootstrap-Modals (1055) */ width: min(92vw, 480px); pointer-events: none; } #alerts .alert { pointer-events: auto; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); /* Der Container ist auf min(92vw,480px) fixiert. Lange Tokens ohne Leerzeichen (URL im Changelog, versionName, ein durchgereichter I18n-Key) bieten dem normalen Zeilenumbruch keine Bruchstelle und liefen sonst seitlich raus. */ overflow-wrap: anywhere; } /* Community-Pin-Karten: Kartenausschnitt links (Hoehe = 3 Buttons), Icon-Buttons rechts untereinander */ .rw-pin-card { padding: .6rem; } .rw-pin-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .rw-pin-map-link { flex: 0 0 auto; display: block; line-height: 0; } .rw-pin-map { width: 160px; height: 160px; border-radius: 10px; object-fit: cover; background: var(--rw-surface); display: block; } .rw-pin-actions { display: flex; flex-direction: column; gap: 8px; flex: 0 0 auto; } .rw-pin-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; } .rw-pin-coords { font-size: .8rem; color: var(--rw-text); } .rw-pin-when { font-size: .8rem; } .rw-pin-discard { font-size: .82rem; opacity: .85; flex: 0 0 auto; } #tab-tour { padding-bottom: 58px; } /* POI-Meter: schlanker Streifen, sticky ueber der Tab-Leiste (Position per JS). */ .rw-poimeter { position: fixed; z-index: 1029; background: var(--rw-surface); border-top: 1px solid var(--rw-border); padding: 6px 12px; } .rw-poimeter-count { color: var(--rw-text); font-size: 0.78rem; font-weight: 600; text-align: center; margin-bottom: 3px; min-height: 1em; } .rw-poimeter-bar { display: flex; gap: 2px; height: 9px; } .rw-poimeter-seg { flex: 1 1 0; border-radius: 2px; background: var(--rw-surface); transition: background 0.3s; } .rw-poimeter-seg.lvl0 { background: color-mix(in srgb, var(--rw-dot) 10%, transparent); } .rw-poimeter-seg.lvl1 { background: color-mix(in srgb, var(--rw-dot) 32%, transparent); } .rw-poimeter-seg.lvl2 { background: color-mix(in srgb, var(--rw-dot) 55%, transparent); } .rw-poimeter-seg.lvl3 { background: color-mix(in srgb, var(--rw-dot) 78%, transparent); } .rw-poimeter-seg.lvl4 { background: var(--rw-dot); } .rw-poimeter-ticks { display: flex; justify-content: space-between; color: var(--rw-muted); font-size: 0.66rem; margin-top: 2px; } .rw-status-dot .rw-sat { font-size: 0.95rem; } /* Gratis-Kontingent in der Titelleiste: "Free 3/15" */ .rw-quota-badge { font-size: 0.74rem; color: var(--rw-muted); white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; } .rw-quota-tag { background: var(--rw-dot); color: var(--rw-accent-ink); border-radius: 6px; padding: 1px 7px; font-weight: 700; font-size: 0.68rem; } /* QR-Modal (Web-App aufs Handy) — geteilt zwischen Startseite (/) und /shop */ .qr-overlay{position:fixed;inset:0;background:rgba(8,6,4,.78);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px} .qr-overlay[hidden]{display:none} .qr-card{background:var(--rw-surface);border:1px solid var(--rw-border,#3a2c20);border-radius:20px;padding:30px 28px 24px;max-width:340px;width:100%;text-align:center;position:relative;box-shadow:0 24px 60px rgba(0,0,0,.55)} .qr-close{position:absolute;top:12px;right:12px;background:transparent;border:0;color:var(--rw-muted);font-size:18px;cursor:pointer;padding:6px;line-height:1} .qr-close:hover{color:var(--rw-text)} .qr-card h3{margin:0 0 8px;font-size:1.3rem;font-weight:800} .qr-sub{color:var(--rw-muted);font-size:14px;line-height:1.5;margin:0 0 18px} .qr-box{background:#fff;border-radius:14px;padding:14px;width:216px;height:216px;margin:0 auto 16px;display:flex;align-items:center;justify-content:center} .qr-box svg{width:100%;height:100%;display:block} .qr-fallback{color:var(--rw-accent);font-size:14px;text-decoration:none} .qr-fallback:hover{text-decoration:underline} .qr-card .go{color:var(--rw-accent)} .go{color:var(--rw-accent)} /* Nelly-Chat-Widget */ .nelly-fab { position: fixed; right: 20px; bottom: 20px; width: 56px; height: 56px; border-radius: 50%; background: var(--rw-accent, #2c7a4b); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 24px; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.25); z-index: 1000; } .nelly-panel { position: fixed; right: 20px; bottom: 88px; width: min(360px, calc(100vw - 40px)); max-height: min(520px, calc(100vh - 120px)); display: flex; flex-direction: column; background: #fff; border-radius: 12px; box-shadow: 0 4px 24px rgba(0,0,0,.3); z-index: 1000; overflow: hidden; } .nelly-panel[hidden] { display: none; } .nelly-panel-header { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid #eee; } .nelly-ai-label { font-size: 11px; text-transform: uppercase; color: #888; background: #f0f0f0; border-radius: 4px; padding: 2px 6px; } .nelly-panel-header button { margin-left: auto; background: none; border: none; font-size: 20px; cursor: pointer; } .nelly-messages { flex: 1; overflow-y: auto; padding: 12px 16px; } .nelly-msg { margin-bottom: 10px; max-width: 85%; padding: 8px 12px; border-radius: 10px; } .nelly-msg.user { margin-left: auto; background: var(--rw-accent, #2c7a4b); color: #fff; } .nelly-msg.assistant { background: #f2f2f2; color: #222; } .nelly-suggestions { padding: 0 16px 8px; display: flex; flex-wrap: wrap; gap: 6px; } .nelly-suggestion { font-size: 12px; border: 1px solid #ccc; background: #fff; border-radius: 14px; padding: 4px 10px; cursor: pointer; } .nelly-form { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid #eee; } .nelly-form input { flex: 1; padding: 8px; border: 1px solid #ccc; border-radius: 6px; } .nelly-form button { padding: 8px 14px; border: none; border-radius: 6px; background: var(--rw-accent, #2c7a4b); color: #fff; cursor: pointer; }