:root{
  --bg:#030608;
  --panel:#081015;
  --panel2:#0d151b;
  --line:rgba(255,255,255,.085);
  --text:#f7f9fb;
  --muted:#95a0a7;
  --lime:#d7ff35;
  --orange:#ffad47;
  --red:#ff5e67;
  --blue:#6da6ff;
  --green:#54e59c;
  --icon-bell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 4 1.5 6 2 7H4c.5-1 2-3 2-7Z'/%3E%3Cpath d='M10 19a2 2 0 0 0 4 0'/%3E%3C/svg%3E");
  --icon-live: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='1.5' fill='black' stroke='none'/%3E%3Cpath d='M8.6 8.6a5.4 5.4 0 0 0 0 6.8'/%3E%3Cpath d='M15.4 8.6a5.4 5.4 0 0 1 0 6.8'/%3E%3Cpath d='M5.8 5.8a9.6 9.6 0 0 0 0 12.4'/%3E%3Cpath d='M18.2 5.8a9.6 9.6 0 0 1 0 12.4'/%3E%3C/svg%3E");
  --icon-route: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='2.2'/%3E%3Ccircle cx='18' cy='18' r='2.2'/%3E%3Cpath d='M8 7.2c1.8.2 2.6 1.3 2.6 3v3.6c0 1.7 1 2.9 2.8 3.1'/%3E%3Cpath d='M13.8 13l3 3.9-3 3'/%3E%3C/svg%3E");
  --icon-report: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h14a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-9l-4 4v-4H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z'/%3E%3C/svg%3E");
  --icon-profile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.4'/%3E%3Cpath d='M5 20c0-3.6 3.1-6.2 7-6.2s7 2.6 7 6.2'/%3E%3C/svg%3E");
  /* Auto-Live footer restructure: "Aktuell" reuses the exact old --icon-live radar-pulse
     glyph -- it absorbs what LIVE conceptually represented in the nav, see aktuell.js's own
     header comment. */
  --icon-aktuell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='1.5' fill='black' stroke='none'/%3E%3Cpath d='M8.6 8.6a5.4 5.4 0 0 0 0 6.8'/%3E%3Cpath d='M15.4 8.6a5.4 5.4 0 0 1 0 6.8'/%3E%3Cpath d='M5.8 5.8a9.6 9.6 0 0 0 0 12.4'/%3E%3Cpath d='M18.2 5.8a9.6 9.6 0 0 1 0 12.4'/%3E%3C/svg%3E");
  --icon-community: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='2.6'/%3E%3Ccircle cx='16.5' cy='9.5' r='2.1'/%3E%3Cpath d='M4 19c0-3 2.2-5.2 5-5.2s5 2.2 5 5.2'/%3E%3Cpath d='M14.3 14.2c2.2.4 3.3 2.1 3.3 4.8'/%3E%3C/svg%3E");
  --icon-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h14a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-9l-4 4v-4H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z'/%3E%3C/svg%3E");
  --icon-settings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='2.8'/%3E%3Cpath d='M12 4.2v2.2M12 17.6v2.2M19.8 12h-2.2M6.4 12h-2.2M17.3 6.7l-1.55 1.55M8.25 15.75l-1.55 1.55M17.3 17.3l-1.55-1.55M8.25 8.25 6.7 6.7'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
/* Sonntags-Feldtest fix (C): this MUST match manifest.webmanifest's background_color/
   theme_color (#05090c) and index.html's <meta name="theme-color"> exactly -- Android paints
   the system status-/gesture-bar chrome (in standalone PWA mode) using that manifest value,
   so any different body background here shows as a visible seam/foreign-colored stripe right
   where OS chrome meets the page, most noticeable behind the bottom gesture-bar pill. Was
   #020406 (a different near-black), a real, if subtle, mismatch -- now unified. */
html,body{margin:0;background:#05090c;color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{min-height:100dvh}
button{font:inherit;cursor:pointer}

/* app shell — exact viewport fill, header/view stacked in a column */
.app-shell{width:min(100%,460px);height:100dvh;margin:auto;position:relative;background:linear-gradient(180deg,#050a0d,#030608);overflow:hidden;display:flex;flex-direction:column}
/* Header restructure: [Avatar] VORAUS [Notification][Settings], VORAUS genuinely centered --
   a 3-column grid (not flex space-between) is needed because the left (avatar, one button)
   and right (two icon buttons) groups have different total widths; space-between would only
   center the logo when both sides happen to be equal width. `1fr auto 1fr` gives the outer
   columns equal available space regardless of their own content width, so the auto-sized
   center column (the logo) always sits at the true midpoint. */
.topbar{flex:0 0 auto;height:71px;padding:0 18px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid rgba(255,255,255,.04);background:rgba(4,8,11,.95)}
.logo{justify-self:center;font-size:22.5px;font-weight:950;letter-spacing:.22em}.logo span{color:var(--lime)}
.top-actions{justify-self:end;display:flex;align-items:center;gap:10px}

/* Header restructure: avatar button, left column -- profile access (brief §6/§11). Same
   rounded-frame language as .voraus-avatar-portrait (profile.js's own card), just smaller;
   the actual avatar SVG is injected by app.js's applyHeaderAvatar() into the
   [data-header-avatar] mount point, not hardcoded here. */
.header-avatar{justify-self:start;width:44px;height:44px;border-radius:50%;overflow:hidden;flex:none;background:#0d151b;border:1px solid rgba(215,255,53,.4);padding:0}
.header-avatar svg{display:block;width:100%;height:100%}

/* header icon buttons (bell + settings) — CSS mask, no markup change per button beyond an
   optional modifier class picking which icon. .icon-button alone (no modifier) is the bell
   (notifications) -- its original, only variant before Auto-Live's header restructure added
   a second one. */
.icon-button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#0b1217;color:#fff;display:flex;align-items:center;justify-content:center;font-size:0;position:relative}
.icon-button::before{content:'';width:18px;height:18px;background-color:currentColor;mask-image:var(--icon-bell);-webkit-mask-image:var(--icon-bell);mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center;mask-size:contain;-webkit-mask-size:contain}
.icon-button-settings::before{mask-image:var(--icon-settings);-webkit-mask-image:var(--icon-settings)}

.view{flex:1 1 auto;min-height:0;overflow:auto}
.hero{padding:18px}.eyebrow{font-size:10px;color:var(--lime);text-transform:uppercase;letter-spacing:.13em;font-weight:900}.hero h1{font-size:30px;line-height:1.03;margin:8px 0}.hero p{margin:0;color:var(--muted);font-size:13px;line-height:1.5}

/* route screen — fills the full remaining height, map takes the rest */
.route-layout{display:flex;flex-direction:column;height:100%;padding:8px 12px 0}

/* turn / exit card */
.turn-card{flex:0 0 auto;height:92px;border-radius:18px;padding:12px 16px;background:linear-gradient(180deg,#0b1217,#080e12);border:1px solid var(--line);display:grid;grid-template-columns:60px 1fr;gap:12px;align-items:flex-start}
.turn-lead{display:flex;flex-direction:column;align-items:center;gap:2px;padding-top:2px}
.turn-arrow{color:var(--lime);filter:drop-shadow(0 0 10px rgba(215,255,53,.55))}
.turn-arrow svg{width:46px;height:46px;display:block}
.turn-distance{color:var(--lime);font-weight:950;font-size:16px}
.turn-copy h2{margin:0;font-size:21px}
.turn-copy p{margin:3px 0 0;font-size:11px;color:#d1d8dc}
.lane-indicators{display:flex;gap:5px;margin-top:7px}
.lane{width:18px;height:18px;border-radius:6px;display:grid;place-items:center;background:transparent;color:#3a444b}
.lane svg{width:11px;height:11px}
.lane.active{background:rgba(215,255,53,.14);color:var(--lime)}

/* map + overlays */
.mock-map{flex:1 1 auto;min-height:0;margin-top:8px;position:relative;overflow:hidden;background:radial-gradient(circle at 45% 28%,rgba(30,60,85,.22),transparent 10rem),#071016}
.route-map{position:absolute;inset:0}
.route-map .maplibregl-ctrl-bottom-right{bottom:2px;right:2px}
.route-map .maplibregl-ctrl-attrib{background:rgba(6,11,15,.55);font-size:9px;padding:1px 6px;border-radius:8px;color:#8a949b}
.route-map .maplibregl-ctrl-attrib a{color:#8a949b}
.route-map .maplibregl-ctrl-attrib-button{filter:invert(1) brightness(1.6)}

/* Block A (Phase 6.6.4) -- restyle MapLibre's own NavigationControl (zoom +/-,
   compass) to the app's dark theme, same scoping precedent as the attribution
   override above. Positioning is left to MapLibre's own control-container
   layout (top-right, auto-stacked) -- only colors/borders are touched. */
.route-map .maplibregl-ctrl-top-right{top:16px;right:14px}
.route-map .maplibregl-ctrl-group{background:rgba(6,11,15,.9);border:1px solid var(--line);box-shadow:0 6px 16px rgba(0,0,0,.4)}
.route-map .maplibregl-ctrl-group button{background:transparent}
.route-map .maplibregl-ctrl-group button:not(:disabled):hover{background:rgba(255,255,255,.06)}
.route-map .maplibregl-ctrl-icon{filter:invert(1) brightness(1.8)}
.route-map .maplibregl-ctrl-group button + button{border-top:1px solid var(--line)}

.voraus-pitch-ctrl-btn{width:29px;height:29px;border:0;background:transparent;color:var(--text);font-size:10px;font-weight:800;letter-spacing:.02em;cursor:pointer}
.voraus-pitch-ctrl-btn:hover{background:rgba(255,255,255,.06)}

.voraus-recenter-btn{position:absolute;right:14px;bottom:320px;z-index:5;display:flex;align-items:center;gap:7px;padding:9px 14px;border-radius:999px;border:1px solid rgba(215,255,53,.4);background:rgba(8,14,18,.92);color:var(--lime);font-size:12px;font-weight:800;backdrop-filter:blur(10px);box-shadow:0 10px 24px rgba(0,0,0,.4);transition:transform .2s ease,opacity .2s ease}
.voraus-recenter-btn svg{width:16px;height:16px}
.voraus-recenter-btn.is-hidden{opacity:0;transform:translateY(8px);pointer-events:none}

.weather-badge{position:absolute;left:14px;top:16px;display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:rgba(6,11,15,.82);border:1px solid var(--line);color:var(--text);font-size:12px;font-weight:700;backdrop-filter:blur(10px)}
.weather-badge svg{width:15px;height:15px;color:#b8c4cc}

.limit-sign{position:absolute;right:20px;top:14px;width:60px;height:60px;border-radius:50%;border:3px solid var(--red);background:#0a0f13;display:grid;place-items:center;box-shadow:0 8px 18px rgba(0,0,0,.4)}
.limit-sign span{color:var(--text);font-weight:900;font-size:20px}
.speed-readout{position:absolute;right:20px;top:84px;width:68px;padding:9px 6px;border-radius:18px;background:rgba(6,11,15,.9);border:1px solid var(--line);text-align:center}
.speed-readout b{display:block;font-size:22px}
.speed-readout small{display:block;color:var(--muted);font-size:9px;margin-top:2px}

.side-actions{position:absolute;right:20px;top:176px;display:flex;flex-direction:column;gap:14px}
.side-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:rgba(6,11,15,.9);color:var(--text);display:grid;place-items:center}
.side-btn svg{width:18px;height:18px}

.vehicle{width:64px;height:64px;border-radius:50%;border:2px solid var(--lime);background:#080d05;box-shadow:0 0 0 9px rgba(215,255,53,.06),0 0 34px rgba(215,255,53,.42);display:grid;place-items:center;color:var(--lime)}
.vehicle svg{width:30px;height:30px}

.event-pin{width:44px;height:44px;border-radius:13px;transform:rotate(45deg);display:grid;place-items:center;border:2px solid rgba(255,255,255,.2);box-shadow:0 10px 22px rgba(0,0,0,.5)}
.event-pin svg{width:20px;height:20px;transform:rotate(-45deg);color:#fff}
.pin-police{background:linear-gradient(160deg,#5f8ee0,#274a99)}
.pin-hazard{background:linear-gradient(160deg,#d98a3d,#8a4f16)}
.pin-accident{background:linear-gradient(160deg,#ff5e67,#b52630)}
/* Haltestellen-Pin: bewusst kleiner/dezenter als der aktive Nutzer-Marker (.vehicle,
   64px, Lime-Ring) und auch kleiner als die übrigen Event-Pins (44px) -- die Haltestelle
   ist ein Ort, kein aktiver Marker, und bekommt darum nie einen Lime-Ring. */
.pin-transit{width:32px;height:32px;border-radius:10px;background:linear-gradient(160deg,#7dd3c0,#2b7d68);box-shadow:0 6px 14px rgba(0,0,0,.4);opacity:.92;cursor:pointer}
.pin-transit svg{width:15px;height:15px}

/* ÖV stop bottom-sheet — floats inside the map, just above the nav, same slot as
   .bottom-card (only one of the two is ever rendered, gated by profile.mode). Hidden by
   default via transform+opacity; .is-open reveals it with a soft slide-up. */
.voraus-stop-sheet{position:absolute;left:14px;right:14px;bottom:98px;z-index:6;display:flex;flex-direction:column;max-height:min(58vh,420px);border-radius:20px;background:rgba(8,14,18,.96);border:1px solid var(--line);backdrop-filter:blur(20px);box-shadow:0 24px 50px rgba(0,0,0,.5);transform:translateY(16px);opacity:0;pointer-events:none;transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .22s ease}
.voraus-stop-sheet.is-open{transform:translateY(0);opacity:1;pointer-events:auto}
.voraus-stop-sheet-close{position:absolute;top:10px;right:10px;width:24px;height:24px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--muted);display:grid;place-items:center;z-index:3}
.voraus-stop-sheet-close svg{width:11px;height:11px}
/* UI-Polish: scrollen bleibt via touch/trackpad/Mausrad voll erhalten (overflow-y:auto
   unangetastet) -- nur die native Scrollbar wird ausgeblendet, plus sehr dezente
   Fade-Kanten oben/unten, die nur erscheinen, wenn dort tatsächlich weiterer Inhalt
   liegt (klassischer CSS-only "scroll shadow": zwei lokale Deck-Gradients scrollen mit
   dem Inhalt mit und verschwinden am jeweiligen Rand von selbst, zwei feste
   Schatten-Gradients bleiben am Viewport-Rand). Keine JS-Logik beteiligt. */
.voraus-stop-sheet-body{
  overflow-y:auto;padding:16px 16px 14px;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  scrollbar-width:none;
  background-image:
    linear-gradient(to bottom, rgba(8,14,18,.97), rgba(8,14,18,0)),
    linear-gradient(to top, rgba(8,14,18,.97), rgba(8,14,18,0)),
    radial-gradient(farthest-side at 50% 0%, rgba(0,0,0,.3), rgba(0,0,0,0)),
    radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.3), rgba(0,0,0,0));
  background-repeat:no-repeat;
  background-size:100% 24px,100% 24px,100% 10px,100% 10px;
  background-position:top,bottom,top,bottom;
  background-attachment:local,local,scroll,scroll;
}
.voraus-stop-sheet-body::-webkit-scrollbar{display:none;width:0;height:0}
/* Kopf (Titel/Tabs bzw. Fahrtdetail-Kopf/Plan-Prognose) bleibt beim Scrollen der
   Stopfolge/Reminder-Buttons ruhig stehen -- reine Positionierung, keine neue Logik. */
.voraus-sheet-sticky{position:sticky;top:0;z-index:2;background:rgba(8,14,18,.97);padding-bottom:6px;margin-bottom:2px}
.voraus-stop-sheet-head{padding-right:26px}
.voraus-stop-sheet-head h3{margin:0;font-size:16px}
.voraus-stop-sheet-dist{display:block;margin-top:2px;font-size:11px;color:var(--muted)}
.voraus-stop-sheet-tabs{display:flex;gap:6px;margin:12px 0 8px;padding:3px;background:rgba(255,255,255,.03);border-radius:12px}
.voraus-stop-sheet-tab{flex:1;border:0;background:transparent;color:var(--muted);font-size:11px;font-weight:700;padding:7px 0;border-radius:9px}
.voraus-stop-sheet-tab.is-active{background:rgba(109,166,255,.16);color:var(--blue)}
.voraus-board-row{display:grid;grid-template-columns:30px 1fr auto auto;align-items:center;gap:8px;padding:8px 2px;border-bottom:1px solid rgba(255,255,255,.05)}
.voraus-board-row:last-child{border-bottom:0}
/* Block B (Phase 6.6.5) -- the row IS this journey's own connection, in the full
   stop-sheet board list. is-journey gets a lime-tinted background across the whole
   grid; the tag itself spans the full row width on its own line underneath. */
.voraus-board-row.is-journey{background:rgba(215,255,53,.07);border-radius:10px;border-bottom-color:transparent}
.voraus-board-journey-tag{grid-column:1/-1;font-size:9px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--lime)}
.voraus-board-line{display:grid;place-items:center;width:26px;height:20px;border-radius:6px;font-size:10px;font-weight:800;color:#08121a}
.voraus-board-tram{background:var(--blue)}
.voraus-board-bus{background:var(--orange)}
.voraus-board-zug{background:var(--green)}
.voraus-board-dir{font-size:12px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.voraus-board-countdown{font-size:10px;color:var(--lime);font-weight:700;white-space:nowrap}
.voraus-board-time{display:flex;flex-direction:column;align-items:flex-end;font-size:10px;color:var(--muted);white-space:nowrap}
.voraus-board-time em{font-style:normal;color:var(--red);font-size:9px}
.voraus-board-empty{padding:16px 2px;text-align:center;font-size:11px;color:var(--muted)}
.voraus-board-fallback{display:flex;align-items:center;gap:6px;margin-bottom:8px;padding:6px 10px;border-radius:10px;background:rgba(255,173,71,.1);border:1px solid rgba(255,173,71,.3);font-size:10px;color:var(--orange);font-weight:700}
.voraus-board-skeleton-row{height:34px;border-radius:8px;margin-bottom:6px;background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.1),rgba(255,255,255,.04));background-size:200% 100%;animation:voraus-skeleton-pulse 1.3s ease-in-out infinite}
@keyframes voraus-skeleton-pulse{0%{background-position:200% 0}100%{background-position:-200% 0}}
.voraus-stop-sheet-live{margin-top:10px;padding:10px 12px;border-radius:14px;background:rgba(125,211,192,.08);border:1px solid rgba(125,211,192,.25)}
.voraus-stop-sheet-live-label{display:block;font-size:9px;font-weight:900;letter-spacing:.08em;color:#7dd3c0;text-transform:uppercase;margin-bottom:6px}
.voraus-stop-sheet-live p{margin:0 0 4px;font-size:11px;color:#d1d8dc}
.voraus-stop-sheet-live p:last-child{margin-bottom:0}
.voraus-stop-sheet-actions{display:flex;gap:8px;margin-top:12px}
.voraus-stop-sheet-btn{flex:1;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--muted);font-size:11px;font-weight:700;padding:9px 8px;border-radius:12px;display:flex;flex-direction:column;align-items:center;gap:2px;opacity:.55}
.voraus-stop-sheet-btn small{font-size:8.5px;font-weight:600;color:var(--muted)}
.voraus-stop-sheet-btn:disabled{cursor:not-allowed}
.voraus-stop-sheet-btn.is-enabled{opacity:1;color:var(--text);border-color:rgba(215,255,53,.4);background:rgba(215,255,53,.08)}

/* Kompakte Abfahrten + Fahrtdetail + intelligente Erinnerungen -- Ziel 1-4 */
.voraus-stop-sheet-back{position:absolute;top:10px;left:10px;width:24px;height:24px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--muted);display:grid;place-items:center;z-index:3}
.voraus-stop-sheet-back svg{width:13px;height:13px}
.voraus-stop-sheet-back.is-hidden{display:none}
/* Back button sits top-left, close stays top-right -- head/copy keep their own
   right-padding (voraus-stop-sheet-head) already clearing the close button; give the
   head left-padding too whenever the back button is visible so the title never runs
   under it. */
.voraus-stop-sheet.is-open .voraus-stop-sheet-back:not(.is-hidden) ~ .voraus-stop-sheet-body .voraus-stop-sheet-head,
.voraus-stop-sheet.is-open .voraus-stop-sheet-back:not(.is-hidden) ~ .voraus-stop-sheet-body .voraus-trip-detail-head{padding-left:26px}

.voraus-board-row{cursor:pointer}
.voraus-board-toggle{width:100%;margin-top:8px;padding:8px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--blue);font-size:11px;font-weight:700;border-radius:10px}

.voraus-trip-detail-head{display:flex;align-items:center;gap:10px;padding-right:26px}
.voraus-trip-detail-head-copy{flex:1;min-width:0}
.voraus-trip-detail-head-copy h3{margin:0;font-size:16px}
.voraus-trip-detail-head-copy p{margin:2px 0 0;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.voraus-trip-detail-tag{flex-shrink:0}

.voraus-trip-detail-stats{display:flex;gap:8px;margin-top:12px}
.voraus-trip-detail-stat{flex:1;padding:9px 10px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.voraus-trip-detail-stat span{display:block;font-size:9px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.voraus-trip-detail-stat b{font-size:13px;font-weight:800;color:var(--text)}
.voraus-trip-detail-stat b em{font-style:normal;color:var(--red);font-size:11px;margin-left:2px}

.voraus-trip-detail-section{margin-top:14px}
.voraus-trip-detail-label{display:block;font-size:9px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.voraus-trip-detail-empty{margin:0;font-size:11px;color:var(--muted)}
.voraus-trip-stop-list{
  max-height:180px;overflow-y:auto;display:flex;flex-direction:column;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  scrollbar-width:none;
  background-image:
    linear-gradient(to bottom, rgba(8,14,18,.95), rgba(8,14,18,0)),
    linear-gradient(to top, rgba(8,14,18,.95), rgba(8,14,18,0)),
    radial-gradient(farthest-side at 50% 0%, rgba(0,0,0,.25), rgba(0,0,0,0)),
    radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.25), rgba(0,0,0,0));
  background-repeat:no-repeat;
  background-size:100% 14px,100% 14px,100% 8px,100% 8px;
  background-position:top,bottom,top,bottom;
  background-attachment:local,local,scroll,scroll;
}
.voraus-trip-stop-list::-webkit-scrollbar{display:none;width:0;height:0}
.voraus-trip-stop-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 2px;border-bottom:1px solid rgba(255,255,255,.05);font-size:12px;color:var(--muted)}
.voraus-trip-stop-row:last-child{border-bottom:0}
.voraus-trip-stop-row.is-board{color:var(--text);font-weight:700}
.voraus-trip-stop-time{white-space:nowrap;color:var(--text)}
.voraus-trip-stop-time em{font-style:normal;color:var(--red);font-size:10px;margin-left:4px}

.voraus-trip-reminder{margin-top:14px}
.voraus-trip-reminder-options{display:flex;flex-wrap:wrap;gap:6px}
.voraus-trip-reminder-btn{border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--muted);font-size:11px;font-weight:700;padding:8px 10px;border-radius:10px}
.voraus-trip-reminder-btn.is-active{color:var(--lime);border-color:rgba(215,255,53,.4);background:rgba(215,255,53,.1)}
.voraus-trip-reminder-btn:disabled{opacity:.4;cursor:not-allowed}
.voraus-trip-reminder-smart{flex:1 0 100%}

/* CommunityEvent read-integration (Gate 2) -- stop-sheet's own list (voraus-community-
   section, inside stopViewHTML()) and trip-detail's per-departure list (inside
   tripDetailCommunityListHTML()) share the same card component. */
.voraus-community-section{margin-top:14px}
.voraus-community-list{display:flex;flex-direction:column;gap:8px}
.voraus-community-card{padding:9px 11px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid var(--line);border-left:3px solid var(--muted)}
.voraus-community-card.is-warning{border-left-color:var(--orange)}
.voraus-community-card.is-critical,.voraus-community-card.is-emergency{border-left-color:var(--red)}
.voraus-community-card.is-info{border-left-color:var(--blue)}
/* Journey-relevant event -- same lime-tinted emphasis language as .voraus-board-row.is-journey. */
.voraus-community-card.is-journey{background:rgba(215,255,53,.07);border-left-color:var(--lime)}
.voraus-community-card-row1{display:flex;align-items:center;justify-content:space-between;gap:8px}
.voraus-community-category{font-size:12px;font-weight:800;color:var(--text)}
.voraus-community-source{font-size:8.5px;font-weight:900;letter-spacing:.06em;padding:3px 7px;border-radius:999px;white-space:nowrap}
.voraus-community-source.is-community{background:rgba(255,255,255,.06);color:var(--muted)}
.voraus-community-source.is-official{background:rgba(109,166,255,.16);color:var(--blue)}
.voraus-community-payload{margin:5px 0 0;font-size:11.5px;color:#d1d8dc}
.voraus-community-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px;font-size:10px;color:var(--muted)}
.voraus-community-card .voraus-board-journey-tag{display:block;margin-top:6px}

/* Gate 4: disputed (safety-only in v1) reads as visibly contested, not as a live
   warning -- amber dashed border distinct from the plain solid severity-color borders
   above, so it never looks like "just another warning". */
.voraus-community-card.is-disputed{border-left-style:dashed;border-left-color:var(--orange)}

.voraus-community-actions{display:flex;gap:6px;margin-top:8px}
.voraus-community-action-btn{flex:1;padding:7px 8px;border-radius:9px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--text);font-size:10.5px;font-weight:700}
.voraus-community-action-btn:active{border-color:var(--lime);background:rgba(215,255,53,.08)}
.voraus-community-action-refute{color:var(--muted)}

/* Foto-Vorschau + Melden (Gate 7) -- thumbnail tap-expands inline (no new modal/view-
   stack level), status text only for the reporter's own photo, flag reason picker only
   for someone else's (already-approved-only) photo. */
.voraus-community-photo-block{margin-top:8px}
.voraus-community-photo-thumb{display:block;width:100%;max-height:110px;object-fit:cover;border-radius:10px;cursor:pointer;transition:max-height .22s ease}
.voraus-community-photo-thumb.is-expanded{max-height:280px}
.voraus-community-photo-status{display:inline-block;margin-top:6px;font-size:10px;font-weight:800;letter-spacing:.03em;color:var(--muted)}
.voraus-community-photo-flag-btn{display:block;margin-top:6px;padding:0;border:0;background:transparent;color:var(--muted);font-size:10px;text-decoration:underline}
.voraus-community-photo-flag-picker{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
.voraus-community-photo-flag-picker.is-hidden{display:none}
.voraus-community-photo-flag-reason-btn{padding:8px 6px;border-radius:9px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--text);font-size:10px;font-weight:700;text-align:center}
.voraus-community-photo-flag-reason-btn:active{border-color:var(--orange);background:rgba(255,173,71,.1)}

/* Melde-Flow (Gate 3) -- shared between route.js's sheet-embedded host (Stop-Sheet/
   Fahrtdetail "Melden" buttons) and the standalone views/report.js screen (global "+"/
   Melden nav entry). Both render communityReportFlow.js's stepContentHTML() into their
   own chrome, so this is the one set of classes both need. */
.voraus-report-cta{display:block;width:100%;margin-top:12px;padding:11px 14px;border-radius:12px;border:1px solid rgba(215,255,53,.4);background:rgba(215,255,53,.08);color:var(--lime);font-size:12.5px;font-weight:800;text-align:center}
.voraus-report-cta:active{background:rgba(215,255,53,.16)}

.voraus-report-screen{padding:6px 18px 100px}
.voraus-report-body{margin-top:6px}
.voraus-report-step-back{display:inline-block;margin-bottom:10px;padding:0;border:0;background:transparent;color:var(--blue);font-size:12px;font-weight:700}
.voraus-report-active-context{margin:0 0 12px;font-size:12px;color:var(--muted)}

.voraus-report-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.voraus-report-category-btn,.voraus-report-preset-btn{padding:14px 10px;border-radius:14px;border:1px solid var(--line);background:#0d151b;color:var(--text);font-size:13px;font-weight:700;text-align:center}
.voraus-report-category-btn:active,.voraus-report-preset-btn:active{border-color:var(--lime);background:rgba(215,255,53,.08)}

.voraus-report-confirm{padding-top:2px}
.voraus-report-confirm-line{margin:0 0 4px;font-size:14px;color:var(--text)}
.voraus-report-confirm-context{margin:0 0 16px;font-size:12px;color:var(--muted)}
.voraus-report-submit-btn{display:block;width:100%;padding:14px;border-radius:14px;border:1px solid var(--lime);background:rgba(215,255,53,.1);color:var(--lime);font-weight:800;font-size:14px}
.voraus-report-submit-btn:active{background:rgba(215,255,53,.2)}

.voraus-report-status{padding:18px 4px;text-align:center;font-size:13px;color:var(--text)}
.voraus-report-status p{margin:0 0 14px}
.voraus-report-status-ok p{color:var(--lime)}
.voraus-report-status-error p{color:var(--orange)}
.voraus-report-done-btn,.voraus-report-retry-btn{padding:10px 20px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text);font-size:12.5px;font-weight:700}

/* Photo picker (Gate 6) -- optional, only rendered for photo-eligible categories */
.voraus-report-photo-picker{margin:14px 0}
.voraus-report-photo-hint{margin:0 0 8px;font-size:10.5px;color:var(--muted);line-height:1.4}
.voraus-report-photo-label{display:flex;align-items:center;justify-content:center;gap:6px;padding:12px 14px;border-radius:14px;border:1px dashed var(--line);background:rgba(255,255,255,.02);color:var(--muted);font-size:12.5px;font-weight:700;text-align:center;cursor:pointer}
.voraus-report-photo-label.has-file{border-style:solid;border-color:rgba(215,255,53,.4);color:var(--lime);background:rgba(215,255,53,.06)}
.voraus-report-photo-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.voraus-report-photo-remove{display:block;margin:6px auto 0;padding:0;border:0;background:transparent;color:var(--muted);font-size:11px;text-decoration:underline}
.voraus-report-photo-status{margin:10px 0 0;font-size:12px;text-align:center}
.voraus-report-photo-status.is-ok{color:var(--lime)}
.voraus-report-photo-status.is-error{color:var(--orange)}
.voraus-report-photo-preview{display:block;max-width:100%;max-height:160px;margin:10px auto 0;border-radius:12px;object-fit:cover}

/* In-app "rechtzeitig erinnern" banner -- foreground only, no push/Service-Worker (see
   journeyAlerts.js's header comment). Floats above the stop-sheet/transit-panel slot so
   it's visible whether or not either of those happens to be open. */
.voraus-alert-banner{position:absolute;left:14px;right:14px;bottom:184px;z-index:7;display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:16px;background:rgba(215,255,53,.12);border:1px solid rgba(215,255,53,.4);backdrop-filter:blur(18px);box-shadow:0 18px 40px rgba(0,0,0,.45);transform:translateY(-8px);opacity:0;pointer-events:none;transition:transform .24s cubic-bezier(.2,.8,.2,1),opacity .2s ease}
.voraus-alert-banner.is-open{transform:translateY(0);opacity:1;pointer-events:auto}
.voraus-alert-banner-text{flex:1;margin:0;font-size:12.5px;font-weight:600;color:var(--text);line-height:1.4}
.voraus-alert-banner-close{flex-shrink:0;width:20px;height:20px;border-radius:50%;border:1px solid rgba(215,255,53,.4);background:transparent;color:var(--lime);font-size:13px;line-height:1;display:grid;place-items:center}

/* Phase 6.6 -- shared-mobility map layer: category filter pills, stale/offline
   badge, and the vehicle bottom-sheet (same slide-up mechanics as
   .voraus-stop-sheet above, distinct class since it's a different data shape
   and can coexist in the same DOM without the two ever needing to interact). */
/* pointer-events:none on the flex container + auto on each pill -- Block A
   (Phase 6.6.4) found this bar's empty right-hand space (it only visually
   wraps its pills, but as a plain block-level flex container was still
   hit-testable across its full left:14/right:14 width) was silently
   swallowing clicks meant for the NavigationControl/2D-3D toggle now sharing
   the same top-right corner -- confirmed via document.elementFromPoint()
   returning this div instead of the zoom button underneath it. */
.voraus-mobility-filterbar{position:absolute;left:14px;right:14px;top:16px;z-index:5;display:flex;flex-wrap:wrap;gap:6px;pointer-events:none}
.voraus-mobility-pill{pointer-events:auto;border:1px solid var(--line);background:rgba(6,11,15,.82);color:var(--muted);font-size:10.5px;font-weight:700;padding:6px 11px;border-radius:999px;backdrop-filter:blur(10px);display:flex;align-items:center;gap:6px}
.voraus-mobility-pill::before{content:'';display:block;width:7px;height:7px;border-radius:50%;background:var(--pill-color,var(--muted));opacity:.4}
.voraus-mobility-pill.is-active{color:var(--text);border-color:var(--pill-color,var(--line))}
.voraus-mobility-pill.is-active::before{opacity:1}
.voraus-mobility-pill-provider{background:rgba(215,255,53,.12);border-color:rgba(215,255,53,.4);color:var(--lime)}
.voraus-mobility-pill-provider::before{display:none}
.voraus-mobility-pill.is-hidden{display:none}

.voraus-mobility-badge{position:absolute;left:14px;right:14px;top:64px;z-index:5;padding:8px 12px;border-radius:12px;font-size:11px;font-weight:700;text-align:center;backdrop-filter:blur(10px)}
.voraus-mobility-badge.is-hidden{display:none}
.voraus-mobility-badge.is-stale{background:rgba(255,173,71,.14);border:1px solid rgba(255,173,71,.4);color:var(--orange)}
.voraus-mobility-badge.is-offline{background:rgba(255,94,103,.14);border:1px solid rgba(255,94,103,.4);color:var(--red)}

.voraus-vehicle-sheet{position:absolute;left:14px;right:14px;bottom:98px;z-index:6;display:flex;flex-direction:column;max-height:min(58vh,420px);border-radius:20px;background:rgba(8,14,18,.96);border:1px solid var(--line);backdrop-filter:blur(20px);box-shadow:0 24px 50px rgba(0,0,0,.5);transform:translateY(16px);opacity:0;pointer-events:none;transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .22s ease}
.voraus-vehicle-sheet.is-open{transform:translateY(0);opacity:1;pointer-events:auto}
.voraus-mobility-sheet-rows{margin-top:10px;display:flex;flex-direction:column;gap:2px}
.voraus-mobility-sheet-row{display:flex;justify-content:space-between;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:12px}
.voraus-mobility-sheet-row:last-child{border-bottom:0}
.voraus-mobility-sheet-row span{color:var(--muted)}
.voraus-mobility-sheet-row b{color:var(--text);font-weight:700;text-align:right}
.voraus-mobility-provider-filter{margin-top:10px;width:100%;border:1px dashed var(--line);background:transparent;color:var(--blue);font-size:11px;font-weight:700;padding:8px;border-radius:10px}
.voraus-mobility-sheet-status{margin-top:10px;padding:9px 11px;border-radius:10px;font-size:11px;font-weight:600;line-height:1.4}
.voraus-mobility-sheet-status.is-hidden{display:none}
.voraus-mobility-sheet-status.is-error{background:rgba(255,94,103,.12);border:1px solid rgba(255,94,103,.35);color:var(--red)}

/* CommunityEvent map layer (Gate 5) -- detail sheet reuses the exact .voraus-stop-sheet/
   .voraus-vehicle-sheet geometry under its own class (same "distinct class, same rule,
   can coexist" precedent .voraus-vehicle-sheet's own comment already documents), plus a
   compact top-right filter control mirroring mapControls.js's own IControl-group styling
   (.voraus-pitch-ctrl-btn) instead of a second full-width filter bar. */
.voraus-community-sheet{position:absolute;left:14px;right:14px;bottom:98px;z-index:6;display:flex;flex-direction:column;max-height:min(58vh,420px);border-radius:20px;background:rgba(8,14,18,.96);border:1px solid var(--line);backdrop-filter:blur(20px);box-shadow:0 24px 50px rgba(0,0,0,.5);transform:translateY(16px);opacity:0;pointer-events:none;transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .22s ease}
.voraus-community-sheet.is-open{transform:translateY(0);opacity:1;pointer-events:auto}
.voraus-community-sheet-status{margin-top:10px;padding:9px 11px;border-radius:10px;font-size:11px;font-weight:600;line-height:1.4}
.voraus-community-sheet-status.is-hidden{display:none}
.voraus-community-sheet-status.is-ok{background:rgba(215,255,53,.1);border:1px solid rgba(215,255,53,.3);color:var(--lime)}
.voraus-community-sheet-status.is-error{background:rgba(255,94,103,.12);border:1px solid rgba(255,94,103,.35);color:var(--red)}
/* weaker cousin of .voraus-board-journey-tag ("Deine Verbindung") -- an event at a stop the
   traveller will pass through, but not claimed to be about their specific connection (Gate
   5 brief §5: "nicht behaupten, eine Meldung betreffe die eigene Verbindung"), so it gets
   the neutral --blue token instead of --lime's "this is yours" language. */
.voraus-community-stop-tag{grid-column:1/-1;font-size:9px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--blue)}

.voraus-community-filter-ctrl{position:relative}
/* Sonntags-Feldtest fix (B): `appearance:none` on both custom buttons below -- without it, a
   plain <button> can still render its browser/OS-native chrome (a beveled/gradient
   background, most visible on Android Chrome/WebView) underneath the transparent custom
   styling, exactly the "ghost/background box" behind an unselected filter pill. */
.voraus-community-filter-btn{width:29px;height:29px;border:0;background:transparent;color:var(--text);display:grid;place-items:center;cursor:pointer;appearance:none;-webkit-appearance:none}
.voraus-community-filter-btn:hover{background:rgba(255,255,255,.06)}
.voraus-community-filter-panel{position:absolute;top:calc(100% + 6px);right:0;z-index:5;display:flex;flex-direction:column;gap:4px;min-width:158px;padding:6px;border-radius:12px;background:rgba(8,14,18,.96);border:1px solid var(--line);backdrop-filter:blur(14px);box-shadow:0 14px 30px rgba(0,0,0,.4)}
.voraus-community-filter-panel.is-hidden{display:none}
.voraus-community-filter-pill{appearance:none;-webkit-appearance:none;border:1px solid transparent;background:transparent;color:var(--muted);font-size:11px;font-weight:700;padding:7px 9px;border-radius:9px;text-align:left}
.voraus-community-filter-pill.is-active{color:var(--lime);background:rgba(215,255,53,.1);border-color:rgba(215,255,53,.35)}

/* bottom info card — floats inside the map, just above the nav */
.bottom-card{position:absolute;left:14px;right:14px;bottom:98px;border-radius:18px;padding:11px 13px;background:rgba(6,11,15,.92);border:1px solid var(--line);backdrop-filter:blur(18px)}
.card-close{position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--muted);display:grid;place-items:center}
.card-close svg{width:11px;height:11px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);text-align:center;padding:4px 0 6px}
.stats>div+div{border-left:1px solid rgba(255,255,255,.06)}
.stats b{display:block;font-size:18px}
.stats span{font-size:9px;color:var(--muted)}
.progress{height:4px;border-radius:999px;background:#27323a;margin:10px 6px}
.progress i{display:block;width:62%;height:100%;background:var(--lime);border-radius:inherit}
.event-row{display:flex;align-items:center;gap:8px;padding:0 2px}
.event-badge{width:22px;height:22px;border-radius:50%;background:var(--blue);display:grid;place-items:center;flex-shrink:0}
.event-badge svg{width:12px;height:12px;color:#fff}
.event-row p{flex:1;margin:0;font-size:10px;color:#d1d8dc}
.details-btn{border:1px solid var(--line);background:transparent;color:var(--text);font-size:10px;font-weight:700;padding:6px 10px;border-radius:10px}

.screen-pad{padding:18px 18px 100px}.card{padding:14px;border-radius:18px;background:#0d151b;border:1px solid var(--line);margin-bottom:10px}

/* Community hub (brief §9): entry-point cards reusing the plain .card look, just made into
   full-width left-aligned buttons -- appearance:none same as every other custom-styled
   button this app resets (Sonntags-Feldtest fix B's own reasoning applies here too). */
.voraus-community-hub-card{appearance:none;-webkit-appearance:none;display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;color:inherit;font:inherit}
.voraus-community-hub-card-title{font-size:14px;font-weight:800;color:var(--text)}
.voraus-community-hub-card-hint{font-size:12px;color:var(--muted)}

/* Gate 8: language switcher (views/profile.js) */
.voraus-settings-language{display:flex;flex-direction:column;gap:10px}
.voraus-settings-field{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--muted)}
.voraus-settings-field select{appearance:none;-webkit-appearance:none;padding:10px 32px 10px 12px;border-radius:12px;background:#0a1218 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2395a0a7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center/14px;border:1px solid var(--line);color:var(--text);font-size:14px;font-family:inherit}
.voraus-settings-hint{margin:0;font-size:10px;color:var(--muted)}
/* Identity / Login Foundation, Phase 2 (2026-09-02) -- account section (profile.js). Reuses
   .card/.voraus-trip-detail-label/.voraus-settings-field/.voraus-support-form-actions/
   .voraus-support-secondary/.voraus-support-submit throughout (no new layout primitives);
   only these three account-specific accents are new. */
.voraus-account-section{display:flex;flex-direction:column;gap:10px}
.voraus-account-error{color:#ff8a8a}
.voraus-account-delete-btn{color:#ff8a8a;border-color:rgba(255,138,138,.35)}
.voraus-account-delete-btn:active{background:rgba(255,138,138,.1)}
.voraus-account-google-btn{opacity:.5;cursor:not-allowed}

/* PO-9: "Über VORAUS" grouped row list (views/profile.js) -- Android/iOS-inspired (icon +
   title, chevron or value on the right) but built entirely from this app's own .card/row
   primitives, no borrowed component library. Replaces PO-8's simpler .voraus-settings-legal
   link list (same section, now with more rows). */
.voraus-settings-about{display:flex;flex-direction:column}
.voraus-about-row{display:flex;align-items:center;gap:10px;padding:11px 2px;color:var(--text);border-top:1px solid var(--line);text-align:left;background:none;border-left:none;border-right:none;border-bottom:none;width:100%;text-decoration:none}
.voraus-about-row:first-child{border-top:none}
.voraus-about-row-icon{width:18px;height:18px;flex:none;color:var(--muted)}
.voraus-about-row-title{flex:1;font-size:13px;font-weight:700}
.voraus-about-row-chevron{width:14px;height:14px;flex:none;color:var(--muted)}
.voraus-about-row-value{font-size:12px;color:var(--muted);font-weight:700}
.voraus-about-row-badge{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);background:rgba(255,255,255,.06);border-radius:8px;padding:4px 8px}
.voraus-about-row.is-disabled{opacity:.55}
.voraus-about-row.is-disabled .voraus-about-row-title{color:var(--muted)}

/* floating bottom navigation */
.bottom-nav{position:fixed;left:50%;bottom:calc(12px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(430px,calc(100% - 24px));height:78px;background:rgba(10,16,20,.92);border:1px solid rgba(255,255,255,.06);border-radius:30px;display:grid;grid-template-columns:1fr 1fr 72px 1fr 1fr;box-shadow:0 20px 40px rgba(0,0,0,.45);backdrop-filter:blur(20px);z-index:100}
.bottom-nav::after{content:'';position:absolute;left:50%;bottom:8px;transform:translateX(-50%);width:120px;height:4px;border-radius:999px;background:rgba(255,255,255,.25)}

/* --- PO-3 -> PWA Update & Cache Reliability Rebuild (2026-09-02): PWA update UI. Originally
   a small fixed banner (globally centered like .bottom-nav itself, not view-scoped like
   route.js's own .voraus-alert-banner), now a centered, full-screen-backdrop modal (Aufgabe
   4) -- a can't-miss confirmation moment with room to state that tickets/settings/saved data
   are preserved, not a passive toast easy to dismiss without reading. Appended directly to
   <body> so it survives across screens exactly like the banner did; same dark-glass/lime-
   accent language and backdrop pattern as .voraus-origin-picker (this file), centered
   instead of bottom-anchored. --------------------------------------------------------- */
.voraus-update-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;visibility:hidden;pointer-events:none;opacity:0;transition:opacity .22s ease}
.voraus-update-modal.is-open{visibility:visible;pointer-events:auto;opacity:1}
.voraus-update-modal-backdrop{position:absolute;inset:0;background:rgba(3,6,8,.72)}
.voraus-update-modal-card{position:relative;width:min(380px,100%);padding:24px 22px;border-radius:22px;background:rgba(8,14,18,.98);border:1px solid rgba(215,255,53,.4);backdrop-filter:blur(20px);box-shadow:0 24px 60px rgba(0,0,0,.55);transform:translateY(14px) scale(.98);transition:transform .26s cubic-bezier(.2,.8,.2,1)}
.voraus-update-modal.is-open .voraus-update-modal-card{transform:translateY(0) scale(1)}
.voraus-update-modal-title{margin:0 0 10px;font-size:18px;font-weight:900;color:var(--text)}
.voraus-update-modal-body{margin:0 0 20px;font-size:13.5px;line-height:1.5;color:var(--muted)}
.voraus-update-modal-actions{display:flex;flex-direction:column;gap:10px}
.voraus-update-modal-cta{padding:13px;border-radius:14px;border:1px solid rgba(215,255,53,.4);background:rgba(215,255,53,.12);color:var(--lime);font-size:14px;font-weight:800}
.voraus-update-modal-cta:active{background:rgba(215,255,53,.2)}
.voraus-update-modal-dismiss{padding:10px;border-radius:14px;border:0;background:transparent;color:var(--muted);font-size:12.5px;font-weight:700}
body.voraus-splash-active .voraus-update-modal,
body.voraus-onboarding-active .voraus-update-modal{display:none}

.nav-item{border:0;background:transparent;color:#75828a;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:0;position:relative}
.nav-item::before{content:'';display:block;width:22px;height:22px;background-color:currentColor;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center;mask-size:contain;-webkit-mask-size:contain}
.nav-item[data-route="live"]::before{mask-image:var(--icon-live);-webkit-mask-image:var(--icon-live)}
.nav-item[data-route="route"]::before{mask-image:var(--icon-route);-webkit-mask-image:var(--icon-route)}
.nav-item[data-route="report"]::before{mask-image:var(--icon-report);-webkit-mask-image:var(--icon-report)}
.nav-item[data-route="profile"]::before{mask-image:var(--icon-profile);-webkit-mask-image:var(--icon-profile)}
/* Auto-Live footer restructure: the new normal footer -- Aktuell/Route/+/Community/Chat.
   The rules above (live/report/profile) are now dead in the footer itself (no more
   .nav-item uses those data-route values) but deliberately left in place -- profile.js's
   own "Live-Diagnose" row and its "About" rows reuse this exact same icon-mask CSS pattern
   via .voraus-about-row-icon, not these selectors, so nothing here is truly orphaned by the
   footer change; removing them would just be unrelated churn. */
.nav-item[data-route="aktuell"]::before{mask-image:var(--icon-aktuell);-webkit-mask-image:var(--icon-aktuell)}
.nav-item[data-route="community"]::before{mask-image:var(--icon-community);-webkit-mask-image:var(--icon-community)}
.nav-item[data-route="chat"]::before{mask-image:var(--icon-chat);-webkit-mask-image:var(--icon-chat)}
.nav-item span{font-size:10px}
.nav-item.active{color:var(--lime)}
.fab-slot{display:grid;place-items:center;position:relative}
.fab{width:60px;height:60px;border-radius:50%;border:2px solid var(--lime);background:#0b1107;color:var(--lime);display:grid;place-items:center;box-shadow:0 0 0 7px rgba(215,255,53,.06),0 0 26px rgba(215,255,53,.4);transform:translateY(-18px)}
/* Sonntags-Feldtest fix (A): a real SVG cross instead of a "+" text glyph -- a text
   character's own font metrics (baseline, line-height, glyph bounding box) never sit
   perfectly centered inside its box, which is why the old markup needed a hand-tuned
   `translateY(-3.5px)` fudge that would silently go stale on any font/weight change. An SVG
   path is drawn exactly on the coordinates given, so `.fab`'s own `place-items:center` alone
   centers it exactly, no magic-number offset needed. */
.fab-glyph{width:22px;height:22px}

/* onboarding: hide app chrome for the splash / first-run flow */
body.voraus-splash-active .topbar,
body.voraus-splash-active .bottom-nav{display:none}
body.voraus-onboarding-active .bottom-nav{display:none}

/* splash */
.splash-screen{position:absolute;inset:0;z-index:200;display:grid;place-items:center;background:linear-gradient(180deg,#050a0d,#030608)}
.splash-logo{font-size:34px;font-weight:950;letter-spacing:.24em;color:var(--text)}
.splash-accent{display:inline-block;color:var(--lime);animation:voraus-splash-flare 900ms ease-out both}
@keyframes voraus-splash-flare{
  0%{opacity:.35;filter:drop-shadow(0 0 0 rgba(215,255,53,0));transform:scale(.85)}
  55%{opacity:1;filter:drop-shadow(0 0 18px rgba(215,255,53,.9));transform:scale(1.12)}
  100%{opacity:1;filter:drop-shadow(0 0 6px rgba(215,255,53,.5));transform:scale(1)}
}

/* onboarding: mode/detail selection tiles, color swatches, confirm cta */
.onboarding-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 18px 18px}
.onboarding-tile{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 10px;border-radius:16px;background:#0d151b;border:1px solid var(--line);color:var(--text)}
.onboarding-tile svg{width:34px;height:34px}
.onboarding-tile span{font-size:12px;font-weight:700}
.onboarding-tile.selected{border-color:var(--lime);background:rgba(215,255,53,.08);box-shadow:0 0 0 1px rgba(215,255,53,.4)}

.onboarding-swatches{display:flex;gap:10px;padding:0 18px 8px;flex-wrap:wrap}
.onboarding-swatch{width:30px;height:30px;border-radius:50%;border:2px solid rgba(255,255,255,.15)}
.onboarding-swatch.selected{border-color:var(--lime);box-shadow:0 0 0 2px rgba(215,255,53,.25)}

.onboarding-cta{display:block;margin:8px 18px 18px;width:calc(100% - 36px);padding:14px;border-radius:14px;border:1px solid var(--lime);background:rgba(215,255,53,.1);color:var(--lime);font-weight:800;font-size:14px}
.onboarding-cta[disabled]{opacity:.4;pointer-events:none}

/* route screen: CTA into the search screen -- sits between the turn-card and the map,
   full-width, deliberately reading as a persistent "search bar" entry point rather than
   a generic button. */
.voraus-route-search-cta{display:flex;align-items:center;gap:10px;width:100%;margin-top:8px;padding:13px 16px;border:1px solid var(--line);border-radius:16px;background:#0d151b;color:var(--muted);font-size:14px;font-weight:700;text-align:left;flex:0 0 auto}
.voraus-route-search-cta svg{width:17px;height:17px;color:var(--muted);flex-shrink:0}
.voraus-route-search-cta:active{border-color:var(--lime);color:var(--text)}

/* route screen, transit mode: leg-info panel -- replaces .bottom-card in the exact same
   screen slot (bottom:98px), so it must never be visible at the same time as the stop-
   sheet (same slot too) -- route.js toggles .is-hidden from openStopSheet/closeStopSheet. */
.voraus-transit-panel{position:absolute;left:14px;right:14px;bottom:98px;max-height:min(46vh,340px);overflow-y:auto;border-radius:18px;padding:12px 14px;background:rgba(6,11,15,.92);border:1px solid var(--line);backdrop-filter:blur(18px);transition:opacity .2s ease}
.voraus-transit-panel:empty{display:none}
.voraus-transit-panel.is-hidden{opacity:0;pointer-events:none}
.voraus-transit-panel-walk{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--text)}
.voraus-transit-panel-walk b{font-size:16px;font-weight:900;color:var(--lime)}
.voraus-transit-panel-row1{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.voraus-transit-panel-dir{flex:1;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.voraus-transit-panel-delay{font-size:11px;font-weight:800;color:var(--red);white-space:nowrap}
.voraus-transit-panel-row2{display:flex;align-items:center;gap:10px}
.voraus-transit-panel-next{flex:1;font-size:12px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.voraus-transit-panel-platform{font-size:11px;font-weight:700;color:var(--muted);padding:2px 7px;border:1px solid var(--line);border-radius:8px;white-space:nowrap}
.voraus-transit-panel-countdown{font-size:15px;font-weight:900;color:var(--lime);white-space:nowrap}

/* Block B (Phase 6.6.5) -- compact journey stop-preview, nested inside the reduced
   (walk) transit panel above. Kept visually secondary to the "Zu Fuss · X Min." row
   above it (smaller text, a top divider) so it reads as supporting context, not a
   competing headline. */
.voraus-stop-preview{margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.06)}
.voraus-stop-preview-lines{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.01em;margin-bottom:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.voraus-stop-preview-row{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:8px;padding:6px 0}
.voraus-stop-preview-row.is-journey{background:rgba(215,255,53,.08);border-radius:10px;padding:6px 8px;margin:0 -8px 4px}
.voraus-stop-preview-tag{grid-column:1/-1;font-size:9px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--lime)}
.voraus-stop-preview-delay{font-size:10px;font-weight:800;color:var(--red);margin-left:4px}
.voraus-stop-preview-empty{margin:4px 0 8px;font-size:11px;color:var(--muted)}
.voraus-stop-preview-more{width:100%;margin-top:6px;padding:8px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--blue);font-size:11px;font-weight:700;border-radius:10px}

/* search screen -- a real navi-style search sheet: fixed "Start" (no GPS yet), free
   "Ziel", one prominent submit, then result cards. Reuses the app shell's header/bottom-
   nav (rendered outside <main id="view">, untouched by this file). */
.voraus-search-screen{padding:6px 18px 100px}
.voraus-search-back{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--text);display:grid;place-items:center;margin-bottom:8px}
.voraus-search-back svg{width:16px;height:16px}
.voraus-search-hero h1{font-size:24px;margin:6px 0 18px}

/* Sonntags-Feldtest fix (1): the compact search tile -- Start/Ziel (unchanged fields below)
   plus a thin Datum/Zeit + Präferenzen footer row, replacing the old permanently-visible
   5-icon mode row above the fields. */
.voraus-search-tile{border-radius:18px;background:#0d151b;border:1px solid var(--line);padding:4px 12px;margin-bottom:4px}
.voraus-search-tile-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 4px 10px;border-top:1px solid var(--line)}
.voraus-search-datetime{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--muted)}
.voraus-search-datetime-sep{opacity:.5}
.voraus-search-prefs-btn{flex-shrink:0;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--lime);display:grid;place-items:center;appearance:none;-webkit-appearance:none}
.voraus-search-prefs-btn svg{width:18px;height:18px}

.voraus-search-route{position:relative;display:flex;flex-direction:column;padding:4px 0}
.voraus-search-field{display:flex;align-items:center;gap:12px;padding:12px 4px}
.voraus-search-dot{width:10px;height:10px;flex-shrink:0;border-radius:50%}
.voraus-search-dot-origin{background:var(--blue);box-shadow:0 0 0 4px rgba(109,166,255,.18)}
.voraus-search-dot-dest{background:var(--lime);border-radius:3px;box-shadow:0 0 0 4px rgba(215,255,53,.18)}
.voraus-search-connector{width:1px;height:20px;margin-left:9px;background:repeating-linear-gradient(180deg,var(--line) 0 4px,transparent 4px 8px)}
.voraus-search-field-body{flex:1;min-width:0}
.voraus-search-field-body label{display:block;margin-bottom:2px;font-size:9px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.voraus-search-field-value{font-size:15px;font-weight:700;color:var(--text)}
.voraus-search-input{width:100%;padding:0;border:0;background:transparent;color:var(--text);font-size:15px;font-weight:700;font-family:inherit}
/* CRITICAL FOUNDATION SPRINT: outline:none on plain :focus with no :focus-visible
   companion rule hid the keyboard focus indicator entirely (mouse clicks and keyboard
   Tab both matched :focus, so both lost the ring). This is the standard two-rule pattern:
   :focus keeps outline:none for pointer interactions, :focus-visible (same specificity,
   later in source order) restores the same ring language already used for the avatar
   editor's own focus-visible styles below. */
.voraus-search-input:focus{outline:none}
.voraus-search-input:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.voraus-search-input::placeholder{color:var(--muted);font-weight:600}

.voraus-search-submit{display:block;width:100%;margin:14px 0 20px;padding:14px;border-radius:14px;border:1px solid var(--lime);background:rgba(215,255,53,.1);color:var(--lime);font-weight:800;font-size:14px}
.voraus-search-submit:active{background:rgba(215,255,53,.2)}
.voraus-search-submit:disabled{opacity:.5;cursor:not-allowed}

/* PO-12 (Location Selection V1): the origin field is now a real <button>, reset to look
   exactly like the plain .voraus-search-field div it replaced. */
.voraus-search-field-origin{width:100%;border:0;background:transparent;text-align:left;font:inherit;color:inherit;cursor:pointer}

/* PO-12: origin picker -- full-screen backdrop + bottom sheet, same dark-glass/lime-accent
   language as .voraus-stop-sheet/.voraus-alert-banner elsewhere, but position:fixed (not
   absolute-within-a-map-container) since search.js is a normal scrollable page, not a map
   overlay. */
.voraus-origin-picker{position:fixed;inset:0;z-index:150;visibility:hidden;pointer-events:none}
.voraus-origin-picker.is-open{visibility:visible;pointer-events:auto}
.voraus-origin-picker-backdrop{position:absolute;inset:0;background:rgba(3,6,8,.6);opacity:0;transition:opacity .2s ease}
.voraus-origin-picker.is-open .voraus-origin-picker-backdrop{opacity:1}
.voraus-origin-picker-sheet{position:absolute;left:0;right:0;bottom:0;max-height:80vh;overflow-y:auto;padding:18px 18px calc(24px + env(safe-area-inset-bottom));border-radius:22px 22px 0 0;background:rgba(8,14,18,.98);border:1px solid var(--line);border-bottom:0;backdrop-filter:blur(20px);box-shadow:0 -20px 50px rgba(0,0,0,.5);transform:translateY(100%);transition:transform .26s cubic-bezier(.2,.8,.2,1)}
.voraus-origin-picker.is-open .voraus-origin-picker-sheet{transform:translateY(0)}
.voraus-origin-picker-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;font-size:14px;font-weight:800;color:var(--text)}
.voraus-origin-picker-menu{display:flex;flex-direction:column;gap:8px}
.voraus-origin-picker-option{display:flex;align-items:center;gap:12px;width:100%;padding:14px;border-radius:14px;background:#0d151b;border:1px solid var(--line);color:var(--text);font-size:14px;font-weight:700;text-align:left}
.voraus-origin-picker-option:active{border-color:var(--lime);background:rgba(215,255,53,.06)}
.voraus-origin-picker-option-icon{width:22px;flex-shrink:0;text-align:center;font-size:16px;color:var(--lime)}
.voraus-origin-picker-status{padding:10px 2px;color:var(--muted);font-size:12.5px}
.voraus-origin-picker-back{display:block;margin-bottom:10px;padding:0;border:0;background:transparent;color:var(--muted);font-size:12px;font-weight:700}
.voraus-origin-picker-search-row{display:flex;align-items:center;gap:8px;padding:10px 12px;margin-bottom:10px;border-radius:12px;background:#0d151b;border:1px solid var(--line)}
.voraus-origin-picker-search-row .voraus-search-input{flex:1}
.voraus-origin-picker-search-btn{flex-shrink:0;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--lime);display:grid;place-items:center;font-size:14px}
.voraus-origin-picker-results{display:flex;flex-direction:column;gap:2px}
.voraus-origin-picker-result{display:flex;align-items:center;gap:10px;width:100%;padding:10px 6px;border:0;border-bottom:1px solid rgba(255,255,255,.05);background:transparent;color:var(--text);font-size:13.5px;font-weight:600;text-align:left}
.voraus-origin-picker-result:last-child{border-bottom:0}
.voraus-origin-picker-result-kind{width:18px;flex-shrink:0;text-align:center;color:var(--muted);font-size:13px}

.voraus-search-hint{padding:20px 8px;color:var(--muted);font-size:12px;text-align:center}
.voraus-search-state{padding:24px 8px;color:var(--muted);font-size:12px;text-align:center}
.voraus-search-state-error p{color:var(--orange)}
.voraus-search-retry{margin-top:10px;padding:8px 16px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.04);color:var(--text);font-size:12px;font-weight:700}

.voraus-journey-card{display:block;width:100%;margin-bottom:10px;padding:14px 16px;border-radius:16px;background:#0d151b;border:1px solid var(--line);color:var(--text);text-align:left}
.voraus-journey-card:active{border-color:var(--lime);background:rgba(215,255,53,.05)}
.voraus-journey-times{display:flex;align-items:baseline;gap:8px}
.voraus-journey-times b{font-size:18px}
.voraus-journey-arrow{color:var(--muted);font-size:13px}
.voraus-journey-delay{margin-left:auto;color:var(--red);font-size:11px;font-weight:800}
.voraus-journey-lines{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin:8px 0}
.voraus-journey-line-sep{color:var(--muted);font-size:11px}
.voraus-journey-linelabel{color:var(--muted);font-size:11px}
.voraus-journey-meta{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:11px}
.voraus-journey-dot{opacity:.6}
.voraus-journey-card-skeleton{height:78px;background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.09),rgba(255,255,255,.04));background-size:200% 100%;animation:voraus-skeleton-pulse 1.3s ease-in-out infinite}

/* Phase 6.5: mode selector (search screen) -- reuses .onboarding-tile's base look via a
   second class, just a tighter 5-across grid and smaller icon/label so all five modes
   fit one row at mobile widths. */
.voraus-mode-row{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;padding:2px 0 16px}
.voraus-mode-tile{padding:10px 4px;border-radius:12px;gap:5px}
.voraus-mode-tile svg{width:24px;height:24px}
.voraus-mode-tile span{font-size:8.5px;text-align:center;line-height:1.15}

.voraus-scooter-toggle{display:flex;gap:8px;margin-bottom:16px}
.voraus-scooter-toggle-btn{flex:1;padding:10px;border-radius:12px;border:1px solid var(--line);background:#0d151b;color:var(--muted);font-size:12px;font-weight:700}
.voraus-scooter-toggle-btn.selected{border-color:var(--lime);background:rgba(215,255,53,.08);color:var(--lime)}

.voraus-search-confidence-badge{margin-top:8px;padding:7px 10px;border-radius:10px;background:rgba(255,173,71,.12);border:1px solid rgba(255,173,71,.35);color:var(--orange);font-size:11px;font-weight:600;line-height:1.4}

/* --- Gate 10B: Community Help Network (GATE_10A_SOS_ARCHITECTURE.md) -- deliberately
   sober/calm styling throughout, no playful colors/animation (Gate 10A §12: "niemals ein
   spielerischer/gamifizierter Ton"). Reuses .voraus-report-cta's own look for the entry
   button rather than inventing a second CTA style. */
.voraus-help-cta{display:block;width:100%;margin-top:8px;padding:11px 14px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--text);font-size:12.5px;font-weight:800;text-align:center}
.voraus-help-cta:active{background:rgba(255,255,255,.07)}

.voraus-help-choice{display:flex;flex-direction:column;gap:10px}
.voraus-help-choice-btn{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:#0d151b;text-align:left}
.voraus-help-choice-btn:active{border-color:var(--lime);background:rgba(215,255,53,.08)}
.voraus-help-choice-title{font-size:14px;font-weight:800;color:var(--text)}
.voraus-help-choice-sub{font-size:11.5px;color:var(--muted);line-height:1.35}
.voraus-help-choice-emergency:active{border-color:var(--red);background:rgba(255,90,90,.08)}

.voraus-help-emergency-disclaimer{margin:0 0 14px;font-size:11.5px;color:var(--muted);line-height:1.4}
.voraus-help-emergency-list{display:flex;flex-direction:column;gap:8px}
.voraus-help-emergency-btn{display:flex;align-items:baseline;gap:10px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:#0d151b;text-decoration:none}
.voraus-help-emergency-btn:active{border-color:var(--red);background:rgba(255,90,90,.08)}
.voraus-help-emergency-number{font-size:16px;font-weight:900;color:var(--text)}
.voraus-help-emergency-label{font-size:12px;color:var(--muted)}

.voraus-help-disclosure-note{margin:0 0 16px;font-size:11px;color:var(--muted);line-height:1.4}

.voraus-help-card{padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid var(--line);margin-bottom:8px}
.voraus-help-card.is-mine{border-left:3px solid var(--lime)}
.voraus-help-card-row1{display:flex;align-items:center;justify-content:space-between;gap:8px}
.voraus-help-card-age{font-size:10px;color:var(--muted)}
.voraus-help-card-tier{display:block;margin-top:4px;font-size:10px;font-weight:700;color:var(--blue)}
.voraus-help-card-status{margin:8px 0 0;font-size:11.5px;color:var(--text)}
.voraus-help-card-status.is-ok{color:var(--lime)}
.voraus-help-card-empty{margin:8px 0 0;font-size:11px;color:var(--muted)}
.voraus-help-card-actions{display:flex;gap:6px;margin-top:8px}

.voraus-help-offer-list{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.voraus-help-offer-row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;color:var(--muted)}

.voraus-help-action-btn{flex:1;padding:9px 10px;border-radius:10px;border:1px solid rgba(215,255,53,.4);background:rgba(215,255,53,.08);color:var(--lime);font-size:11px;font-weight:800;text-align:center;margin-top:8px}
.voraus-help-action-btn:active{background:rgba(215,255,53,.16)}
.voraus-help-action-btn.voraus-help-action-secondary{border-color:var(--line);background:rgba(255,255,255,.03);color:var(--muted)}
.voraus-help-action-btn.voraus-help-action-secondary:active{background:rgba(255,255,255,.07)}

.voraus-help-flag-btn{display:block;margin-top:8px;padding:0;border:0;background:transparent;color:var(--muted);font-size:10px;text-decoration:underline}
.voraus-help-flag-picker{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
.voraus-help-flag-picker.is-hidden{display:none}
.voraus-help-flag-reason-btn{padding:8px 6px;border-radius:9px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--text);font-size:10px;font-weight:700;text-align:center}
.voraus-help-flag-reason-btn:active{border-color:var(--orange);background:rgba(255,173,71,.1)}

.voraus-help-my-request{margin-bottom:14px}
.voraus-help-browse-section{margin-top:14px}
.voraus-help-browse-list{margin-top:2px}

.voraus-settings-checkbox{display:flex;align-items:center;gap:8px;padding:8px 0;font-size:12.5px;color:var(--text)}
.voraus-settings-checkbox.is-disabled{color:var(--muted);opacity:.6}
.voraus-settings-checkbox input{width:16px;height:16px;flex-shrink:0}

/* --- Gate 11: Shared-Mobility Suggestion (kompakte Karte im Transit-Panel während
   eines Fussweg-Legs, kein neues Sheet-System) --------------------------------------- */
.voraus-mobility-suggestion{margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.06)}
.voraus-mobility-suggestion-headline{font-size:13px;font-weight:800;color:var(--lime)}
.voraus-mobility-suggestion-detail{margin-top:3px;font-size:11px;color:var(--muted)}
.voraus-mobility-suggestion-actions{display:flex;gap:8px;margin-top:10px}
.voraus-mobility-suggestion-cta{flex:1;padding:10px;border-radius:12px;border:1px solid rgba(215,255,53,.4);background:rgba(215,255,53,.1);color:var(--lime);font-size:12px;font-weight:800}
.voraus-mobility-suggestion-cta:active{background:rgba(215,255,53,.18)}
.voraus-mobility-suggestion-dismiss{padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:transparent;color:var(--muted);font-size:11px;font-weight:700}
.voraus-mobility-suggestion-more-toggle{width:100%;margin-top:8px;padding:8px;border:1px dashed var(--line);background:transparent;color:var(--blue);font-size:11px;font-weight:700;border-radius:10px}
.voraus-mobility-suggestion-more-list{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.voraus-mobility-suggestion-more-row{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--text);font-size:11px;font-weight:700}
.voraus-mobility-suggestion-more-row b{color:var(--lime)}

/* --- Gate 12: Ridehail/Taxi Suggestion (same compact-card pattern as Gate 11's shared-
   mobility suggestion above, distinct accent colour so the two are never mistaken for
   the same offer; mutually exclusive in practice -- see ridehailSuggestions.js's
   isRidehailContextEligible()) ------------------------------------------------------- */
.voraus-ridehail-suggestion{margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.06)}
.voraus-ridehail-suggestion-headline{font-size:13px;font-weight:800;color:var(--blue)}
.voraus-ridehail-suggestion-detail{margin-top:3px;font-size:11px;color:var(--muted)}
.voraus-ridehail-suggestion-actions{display:flex;gap:8px;margin-top:10px}
.voraus-ridehail-suggestion-cta{flex:1;padding:10px;border-radius:12px;border:1px solid rgba(56,189,248,.4);background:rgba(56,189,248,.1);color:var(--blue);font-size:12px;font-weight:800}
.voraus-ridehail-suggestion-cta:active{background:rgba(56,189,248,.18)}
.voraus-ridehail-suggestion-dismiss{padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:transparent;color:var(--muted);font-size:11px;font-weight:700}
.voraus-ridehail-suggestion-more-list{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.voraus-ridehail-suggestion-more-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--text);font-size:11px;font-weight:700}
.voraus-ridehail-suggestion-more-row button{padding:6px 10px;border-radius:8px;border:1px solid rgba(56,189,248,.4);background:rgba(56,189,248,.1);color:var(--blue);font-size:10.5px;font-weight:800}

/* --- PO-8: Impressum / Datenschutzerklärung -- same "back arrow + hero" drill-in pattern
   .voraus-search-* already established; .voraus-legal-body is a plain readable-typography
   block for the long-form German legal text (headings/paragraphs/lists), scoped so it
   never affects any other screen's tag styling. ------------------------------------------ */
.voraus-legal-screen{padding:6px 18px 100px}
.voraus-legal-back{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--text);display:grid;place-items:center;margin-bottom:8px}
.voraus-legal-back svg{width:16px;height:16px}
.voraus-legal-hero h1{font-size:24px;margin:6px 0 18px}
.voraus-legal-body{font-size:13px;line-height:1.6;color:var(--text)}
.voraus-legal-body h2{font-size:14px;font-weight:900;margin:22px 0 8px;color:var(--lime)}
.voraus-legal-body h2:first-of-type{margin-top:4px}
.voraus-legal-body p{margin:0 0 12px;color:var(--text)}
.voraus-legal-body ul{margin:0 0 12px;padding-left:18px}
.voraus-legal-body li{margin-bottom:6px}
.voraus-legal-body a{color:var(--blue)}
.voraus-legal-body code{font-size:11px;background:rgba(255,255,255,.06);padding:1px 5px;border-radius:5px}
.voraus-legal-meta{font-size:11px;color:var(--muted);margin-bottom:16px}
.voraus-legal-todo{margin:10px 0 16px;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,173,71,.4);background:rgba(255,173,71,.08);color:var(--orange);font-size:12px;line-height:1.5}
.voraus-legal-disclaimer{margin-top:22px;padding-top:16px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}
.voraus-legal-service{padding:10px 0;border-top:1px solid var(--line)}
.voraus-legal-service:first-of-type{border-top:none}
.voraus-legal-service-name{margin-bottom:4px}
.voraus-legal-service p{margin:0 0 4px;font-size:12px}
.voraus-legal-service p:last-child{margin-bottom:0}
.voraus-legal-retention{margin:0 0 12px;padding-left:18px}
.voraus-legal-retention li{margin-bottom:8px}
.voraus-legal-crosslinks{margin-top:20px;text-align:center;font-size:11px;color:var(--muted)}
.voraus-legal-crosslinks a{color:var(--muted);text-decoration:underline}
.voraus-legal-crosslinks span{color:var(--text)}

/* Small footer link shown on the onboarding mode-picker screen (PO-8 brief §8: "sinnvoll
   auch vom Onboarding/Start aus erreichbar") -- deliberately tiny/muted, not a redesign. */
.voraus-onboarding-legal-footer{margin-top:18px;text-align:center;font-size:11px;color:var(--muted)}
.voraus-onboarding-legal-footer a{color:var(--muted);text-decoration:underline}

/* Avatar Foundation block -- profile card (profileView) + editor screen (avatarEditor.js).
   Reuses .card/.onboarding-tile/.onboarding-swatch/.voraus-legal-* wherever the existing
   shape already fits (see avatarEditor.js's own header) -- only genuinely new layout
   (portrait frame, preview tabs/stage, map-mock, vehicle-combo positioning) gets new rules. */
.voraus-avatar-profile-card{display:flex;align-items:center;gap:14px}
.voraus-avatar-portrait{width:56px;height:56px;border-radius:50%;overflow:hidden;flex:none;background:#0d151b;border:1px solid rgba(215,255,53,.4);box-shadow:0 0 0 3px rgba(215,255,53,.08)}
.voraus-avatar-portrait svg{display:block}
.voraus-avatar-profile-copy{flex:1;min-width:0}
.voraus-avatar-profile-title{display:block;font-size:14px;font-weight:800;color:var(--text)}
.voraus-avatar-profile-hint{display:block;margin-top:2px;font-size:11.5px;color:var(--muted)}
.voraus-avatar-edit-link{flex:none;padding:9px 14px;border-radius:999px;border:1px solid rgba(215,255,53,.4);background:rgba(215,255,53,.08);color:var(--lime);font-size:11.5px;font-weight:800;white-space:nowrap}

.voraus-avatar-preview-card{padding-bottom:6px}
.voraus-avatar-preview-tabs{display:flex;gap:6px;margin-bottom:12px;overflow-x:auto}
.voraus-avatar-preview-tab{flex:none;padding:8px 13px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--muted);font-size:11.5px;font-weight:700}
.voraus-avatar-preview-tab.selected{border-color:rgba(215,255,53,.4);background:rgba(215,255,53,.1);color:var(--lime)}
/* Visual Quality Pass: one consistent staged look shared by all 4 preview modes -- soft
   top "spotlight" + a low warm glow near the ground, calm/no loud neon, avatar stays the
   only real focal point. Every mode's own content (marker/map-pin/vehicle-combo) sits
   inside this same shell, never a differently-styled box per tab. */
.voraus-avatar-preview-stage{height:190px;border-radius:14px;background:
    radial-gradient(ellipse 70% 55% at 50% 14%,rgba(255,255,255,.05),transparent 62%),
    radial-gradient(ellipse 90% 60% at 50% 92%,rgba(215,255,53,.08),transparent 68%),
    linear-gradient(180deg,#0b1108 0%,#070b05 100%);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}

/* Standing: the full-body figure now fills the large majority of the stage (Visual
   Quality Pass target: ~65-80% of the available height) instead of floating tiny in the
   middle. flex+height% (not a fixed px box) so it scales with the stage across
   viewports; a small bottom gap reads as "standing on ground" rather than centred in a
   void. The inner wrapper is the SOLE target of Smart Category Focus's scale/transform-
   origin (avatarEditor.js) -- kept separate from the outer stage so the focus zoom can
   never fight the stage's own centring. */
.voraus-avatar-marker-stage{width:100%;height:100%;display:flex;align-items:flex-end;justify-content:center;padding-bottom:5%}
.voraus-avatar-marker-stage-inner{height:78%;aspect-ratio:512/640;transition:transform .35s cubic-bezier(.22,.8,.36,1)}
.voraus-avatar-marker-stage-inner svg{width:100%;height:100%}

/* Map: the grid is now a quiet texture, not the main event -- larger cells, lower
   opacity -- and the marker itself is dramatically bigger (was 46x54, easily lost in a
   large empty stage; a user genuinely could not judge their avatar at that size). */
.voraus-avatar-map-mock{position:relative;width:100%;height:100%;background:
  linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/48px 48px,
  linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/48px 48px,
  #0a1016;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px}
/* The pin's teardrop shape and the avatar figure are now separate, sibling layers -- the
   shape rotates 45deg to form the pin outline, the figure never carries any rotation at
   all (structurally impossible for it to visibly rotate, not a counter-rotation applied
   to it -- the previous version counter-rotated `svg` specifically, which only ever
   matched the neutral placeholder icon; the real photo composite renders as a plain
   `<img>`/`<div>`, which that selector silently missed, so the real avatar visibly spun
   with the pin). Explicit z-index (not just DOM order) for the same reason documented on
   .voraus-avatar-combo-vehicle/-rider above -- the shape's own `transform` could
   otherwise flip paint order in this environment. */
.voraus-avatar-map-pin{width:132px;height:152px;position:relative;filter:drop-shadow(0 8px 14px rgba(0,0,0,.5))}
.voraus-avatar-map-pin-shape{position:absolute;inset:0;border-radius:50% 50% 50% 4px;background:rgba(215,255,53,.14);border:3px solid var(--lime);transform:rotate(45deg);z-index:1}
.voraus-avatar-map-pin-figure{position:absolute;left:50%;top:50%;width:92px;height:106px;margin:-53px 0 0 -46px;z-index:2}
.voraus-avatar-map-pin-tail{display:none}
.voraus-avatar-stage-caption{font-size:10.5px;font-weight:800;color:var(--lime);background:rgba(8,14,18,.85);padding:4px 10px;border-radius:999px;border:1px solid rgba(215,255,53,.35)}
.voraus-avatar-stage-caption-pending{color:var(--muted);border-color:var(--line);position:absolute;left:0;right:0;bottom:10px;margin:0 auto;width:max-content;white-space:nowrap}

/* Vehicle combos (bike/scooter): frame enlarged so the rider isn't dwarfed by the
   surrounding empty stage; the vehicle icon is deliberately "taken back" visually
   (lower opacity) so the character keeps the main role instead of competing with it --
   see avatarEditor.js's own note on why this round doesn't redraw the vehicle art
   itself. Opacity ONLY, deliberately no `transform` here -- verified live that adding a
   `transform` (even a harmless-looking `scale()`) on this element flips this browser's
   paint order and makes it render ABOVE the later `.voraus-avatar-combo-rider` sibling
   despite correct DOM order/no z-index on either side (a `transform` promotes the
   element into its own compositing layer here in a way plain `opacity` does not) --
   silently hiding the real character behind the vehicle again, the exact bug this pass
   exists to fix. Do not reintroduce a transform on this rule without re-verifying in a
   real browser that the rider still paints on top. */
.voraus-avatar-combo-stage{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.voraus-avatar-combo-frame{position:relative;width:220px;height:220px}
.voraus-avatar-combo-vehicle{position:absolute;inset:0;opacity:.55;z-index:1}
.voraus-avatar-combo-vehicle svg{width:100%;height:100%;display:block}
.voraus-avatar-combo-stage-bike .voraus-avatar-combo-vehicle .voraus-bike-torso,
.voraus-avatar-combo-stage-bike .voraus-avatar-combo-vehicle .voraus-bike-thigh-far,
.voraus-avatar-combo-stage-bike .voraus-avatar-combo-vehicle .voraus-bike-thigh-near{opacity:0}
/* Explicit z-index (not just DOM order) -- verified live that relying on implicit
   z-index:auto stacking order alone was unreliable in this environment: an opacity change
   on the vehicle could silently flip which of these two same-sized, fully-overlapping
   siblings painted on top, hiding the real character behind the vehicle icon. Explicit
   z-index removes the ambiguity regardless of compositing/paint timing. */
.voraus-avatar-combo-rider{position:absolute;inset:0;pointer-events:none;z-index:2}
.voraus-avatar-combo-rider svg{width:100%;height:100%;display:block}

/* E-Scooter: no real rider art exists yet (see avatarEditor.js's own note) -- the vehicle
   icon (markers.js's scooterSVG(), a small map-pin glyph never meant to fill a large
   frame) shrinks to an honest supporting size instead of masquerading as a finished
   character, and the caption says so explicitly. */
/* Centred via left:0;right:0;margin:auto (not `transform:translateX`) -- same reasoning
   as the "no transform on .voraus-avatar-combo-vehicle" note above, verified live. */
.voraus-avatar-combo-stage-scooter .voraus-avatar-combo-vehicle{inset:auto 0 4% 0;width:30%;height:auto;margin:0 auto;opacity:.45}
.voraus-avatar-combo-stage-scooter .voraus-avatar-combo-vehicle svg{height:auto}
.voraus-avatar-combo-stage-scooter .voraus-avatar-combo-rider{inset:6% 0 26% 0}

/* Asset-pipeline composite (avatarAssetPipeline.js renderAvatarComposite()) -- a stack of
   full-size layers (plain <img> or CSS mask-image tinted <div>) over one shared canvas, or
   the neutral placeholder badge when no layer resolved. Pure layout/sizing, no "look" of its
   own -- see assets/avatars/README.md for the asset spec this renders once real files land.
   pointer-events:none on every level (container down to each layer/probe), not just the
   layers -- this renders inside map-marker/journey contexts in the future (README §7), and
   must never be able to intercept a map drag/pan gesture even if a future caller nests it
   directly inside a MapLibre marker element. */
.voraus-avatar-composite{position:relative;width:100%;height:100%;pointer-events:none}
.voraus-avatar-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.voraus-avatar-layer-probe{position:absolute;width:1px;height:1px;pointer-events:none}
/* Master Asset + Pose Transform (Gate 3A-1a follow-up): deliberately NOT inset:0/100% like
   .voraus-avatar-layer above -- each instance is individually positioned/sized/transformed via
   inline style (avatarAssetPipeline.js's instanceToPercent()/masterInstanceMarkup()), since a
   master is drawn once per pose at its own place/scale/rotation, not stretched to fill the
   whole canvas. */
.voraus-avatar-layer-master{position:absolute;object-fit:contain;pointer-events:none}
.voraus-avatar-composite-fallback{display:flex;align-items:center;justify-content:center}
.voraus-avatar-composite-fallback svg{width:70%;height:70%}
/* Portrait crops edge-to-edge like any profile photo (the wrapping .voraus-avatar-portrait
   circle in profile.js's card has no room for transparent letterbox gaps); every other
   context (standing figure, map marker, vehicle combo) must never crop a head or feet off,
   so those keep the default object-fit:contain above. Doesn't apply to the tint mask layers
   (mask-size:contain is already set explicitly per-layer in avatarAssetPipeline.js). */
.voraus-avatar-composite-kind-portrait .voraus-avatar-layer:not(.voraus-avatar-layer-tint){object-fit:cover}

.voraus-avatar-option-card{padding-bottom:10px}
.voraus-avatar-row{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 4px}
.voraus-avatar-row .onboarding-swatch{flex:none}
.voraus-avatar-tile{flex:none;min-width:64px;padding:10px 8px}
.voraus-avatar-tile svg{width:24px;height:24px}
.voraus-avatar-tile span{font-size:10px}

/* Round 2: mobile-first category editor -- bigger preview, category tab bar (own scoped
   scroller, deliberately NOT the same row as the pose tabs above -- see avatarEditor.js's
   own header on why those two stay separate concepts), one active category's fields, a
   part-preview tile variant, plain text chips for fields with neither a real asset nor a
   hand-drawn icon yet, and the bottom Randomize/Fertig action bar. */
.voraus-avatar-preview-card-lg{padding-bottom:8px}
.voraus-avatar-preview-stage-lg{height:280px}

/* Scrollbar visually hidden, scrolling itself fully intact (touch/trackpad/wheel/keyboard
   all still work -- this only suppresses the native scrollbar's paint, not overflow/scroll
   behaviour). Scoped to this ONE row only, not a global scrollbar reset. */
.voraus-avatar-category-bar{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 14px;scrollbar-width:none;-ms-overflow-style:none}
.voraus-avatar-category-bar::-webkit-scrollbar{display:none}
.voraus-avatar-category-tab{flex:none;padding:10px 16px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--muted);font-size:12.5px;font-weight:800;white-space:nowrap}
.voraus-avatar-category-tab.selected{border-color:rgba(215,255,53,.4);background:rgba(215,255,53,.1);color:var(--lime)}

.voraus-avatar-category-panel{display:flex;flex-direction:column;gap:2px}

/* A real Part Preview tile (previewAvatarOption() returned real markup, see
   avatarRenderer.js) -- same rounded-frame language as .voraus-avatar-portrait above, sized
   for a picker tile rather than the profile card. */
.voraus-avatar-tile-preview{padding:8px}
.voraus-avatar-tile-preview-frame{display:block;width:44px;height:44px;border-radius:50%;overflow:hidden;background:#0d151b}

/* Text-only chip -- the explicitly sanctioned fallback (Round 2 brief) for a trait with no
   registered art AND no hand-drawn icon (every newly added shape/style field this round),
   instead of simulating a character/part asset that doesn't exist yet. */
.voraus-avatar-chip{flex:none;padding:10px 15px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--text);font-size:12px;font-weight:700;white-space:nowrap}
.voraus-avatar-chip.selected{border-color:rgba(215,255,53,.4);background:rgba(215,255,53,.1);color:var(--lime)}

.voraus-avatar-actions{display:flex;gap:10px;margin-top:14px}
.voraus-avatar-randomize-btn{flex:1;padding:14px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--text);font-weight:800;font-size:13.5px;text-align:center}
.voraus-avatar-randomize-btn:active{background:rgba(255,255,255,.07)}
/* "Fertig" is an <a>, sitting inside .voraus-legal-body -- that wrapper's own
   `.voraus-legal-body a{color:var(--blue)}` rule (inline legal-text links) has HIGHER
   specificity (class+element) than a bare `.voraus-avatar-done-btn` class selector would,
   so this needs the extra `.voraus-avatar-actions` ancestor class to actually win the
   cascade, not just a source-order fix. */
.voraus-avatar-actions .voraus-avatar-done-btn{flex:1;display:block;padding:14px;border-radius:14px;border:1px solid var(--lime);background:rgba(215,255,53,.1);color:var(--lime);font-weight:800;font-size:13.5px;text-align:center;text-decoration:none}

/* Visible keyboard-focus state (Round 2 §11) -- every new interactive control here (category
   tab, chip, tile, action button) shares one consistent ring, explicit rather than relying
   on each browser's own default button outline. */
.voraus-avatar-category-tab:focus-visible,
.voraus-avatar-chip:focus-visible,
.voraus-avatar-tile:focus-visible,
.voraus-avatar-randomize-btn:focus-visible,
.voraus-avatar-done-btn:focus-visible,
.onboarding-swatch:focus-visible{outline:2px solid var(--lime);outline-offset:2px}

/* Live Mobility Mode Phase 1 -- assets/js/views/live.js */
.voraus-live-mobility-card{display:flex;flex-direction:column;gap:14px}
.voraus-live-mobility-start-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:16px;border-radius:14px;border:1px solid var(--lime);background:rgba(215,255,53,.1);color:var(--lime);font-weight:800;font-size:15px}
.voraus-live-mobility-start-dot{width:11px;height:11px;border-radius:50%;border:2px solid var(--lime);flex-shrink:0}
.voraus-live-mobility-privacy-note{margin:0;font-size:11.5px;color:var(--muted);line-height:1.5}
.voraus-live-mobility-error{margin:0 0 4px;font-size:12px;color:var(--red);font-weight:700}
.voraus-live-mobility-active-badge{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;border:1px solid rgba(215,255,53,.4);background:rgba(215,255,53,.14);color:var(--lime);font-size:11px;font-weight:900;letter-spacing:.06em;width:fit-content}
.voraus-live-mobility-active-dot{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px var(--lime);animation:voraus-live-mobility-pulse 1.6s ease-in-out infinite}
@keyframes voraus-live-mobility-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.voraus-live-mobility-active-title{margin:0;font-size:13px;color:var(--muted)}
.voraus-live-mobility-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.voraus-live-mobility-stat-row{display:flex;flex-direction:column;gap:4px;padding:12px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.voraus-live-mobility-stat-label{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:800}
.voraus-live-mobility-stat-value{font-size:18px;font-weight:900;color:var(--text)}
.voraus-live-mobility-stop-btn{width:100%;padding:14px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text);font-weight:800;font-size:13.5px}

/* Live Mobility Mode Phase 1 -- the idle-browsing map's "you are here" marker (route.js) --
   deliberately distinct from the static origin-picker pin shape, see liveMobilityMarkerHTML()'s
   own comment. */
.voraus-live-mobility-marker{position:relative;width:18px;height:18px}
.voraus-live-mobility-marker-dot{position:absolute;inset:4px;border-radius:50%;background:var(--lime);border:2px solid #05130a;box-shadow:0 0 10px rgba(215,255,53,.7)}
.voraus-live-mobility-marker-pulse{position:absolute;inset:0;border-radius:50%;background:rgba(215,255,53,.35);animation:voraus-live-mobility-marker-pulse 1.8s ease-out infinite}
@keyframes voraus-live-mobility-marker-pulse{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.8);opacity:0}}


/* Production Step 6 — Beta feedback */
.voraus-feedback-screen{padding-bottom:calc(110px + env(safe-area-inset-bottom,0px))}
.voraus-feedback-form{display:grid;gap:14px;margin:0 16px 24px;padding:18px}
.voraus-feedback-field{display:grid;gap:7px;font-size:12px;color:var(--muted,#95a0a7)}
.voraus-feedback-field input,.voraus-feedback-field select,.voraus-feedback-field textarea{width:100%;box-sizing:border-box;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:#081015;color:#f7f9fb;padding:12px;font:inherit}
.voraus-feedback-field textarea{resize:vertical;min-height:130px}
.voraus-feedback-result{min-height:20px;font-size:12px;color:#d7ff35}
.voraus-feedback-form button.primary{min-height:46px;border:0;border-radius:12px;background:#d7ff35;color:#05090c;font-weight:800;padding:0 16px}
.voraus-feedback-form button.primary:disabled{opacity:.55}

/* Production Step 8 — real Web Push settings */
.voraus-push-settings{display:flex;flex-direction:column;gap:12px}
.voraus-push-head{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;align-items:center}
.voraus-push-head>.voraus-about-row-icon{width:20px;height:20px;color:var(--lime)}
.voraus-push-head>div{display:flex;flex-direction:column;gap:2px}
.voraus-push-head strong{font-size:13px}.voraus-push-head span{font-size:10px;color:var(--muted)}
.voraus-push-main-btn{appearance:none;border:1px solid rgba(215,255,53,.35);background:rgba(215,255,53,.08);color:var(--lime);border-radius:10px;padding:8px 10px;font-size:10px;font-weight:800}
.voraus-push-main-btn:disabled{opacity:.45}
.voraus-push-topics{display:grid;gap:8px;padding-top:2px}
.voraus-push-topics label{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text)}
.voraus-push-topics input{accent-color:var(--lime)}
.voraus-push-topics input:disabled+span{opacity:.5}

/* Production Step 8.2 — Support & Meine Tickets */
.voraus-support-screen{display:grid;gap:14px}
.voraus-support-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px}
.voraus-support-back{color:var(--muted);text-decoration:none;font-size:12px;font-weight:700}
.voraus-support-new-btn,.voraus-support-submit,.voraus-support-secondary,.voraus-support-close{appearance:none;font:inherit}
.voraus-support-new-btn,.voraus-support-submit{border:0;border-radius:12px;background:var(--lime);color:#050708;padding:10px 13px;font-size:11px;font-weight:900}
.voraus-support-secondary{border:1px solid rgba(255,255,255,.12);border-radius:11px;background:rgba(255,255,255,.035);color:var(--text);padding:8px 10px;font-size:10px;font-weight:800}
.voraus-support-close{width:34px;height:34px;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);color:var(--text);font-size:20px}
.voraus-support-section-head,.voraus-support-list-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:14px}
.voraus-support-section-head>div,.voraus-support-list-head>div{display:flex;flex-direction:column;gap:3px}
.voraus-support-create form{display:grid;gap:12px}
.voraus-settings-field input,.voraus-settings-field textarea{width:100%;box-sizing:border-box;border:1px solid rgba(255,255,255,.09);background:#0d151b;color:var(--text);border-radius:12px;padding:11px 12px;font:inherit}
.voraus-support-consent{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:flex-start;padding:11px 12px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.025)}
.voraus-support-consent input{margin-top:3px;accent-color:var(--lime)}
.voraus-support-consent span{display:flex;flex-direction:column;gap:4px}
.voraus-support-consent small{color:var(--muted);line-height:1.45}
.voraus-support-form-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.voraus-support-list{display:grid;gap:9px}
.voraus-support-ticket{width:100%;text-align:left;border:1px solid rgba(255,255,255,.085);background:rgba(255,255,255,.025);border-radius:14px;padding:12px;color:var(--text);display:grid;gap:5px}
.voraus-support-ticket-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.voraus-support-ticket>span:not(.voraus-support-ticket-top),.voraus-support-ticket small{color:var(--muted);font-size:10px}
.voraus-support-status{display:inline-flex;align-items:center;border-radius:999px;padding:5px 7px;font-size:9px;font-weight:900;letter-spacing:.04em;background:rgba(255,255,255,.06);white-space:nowrap}
.voraus-support-status.open{color:#ffad47}.voraus-support-status.acknowledged,.voraus-support-status.investigating{color:#6da6ff}
.voraus-support-status.resolved{color:#54e59c}.voraus-support-status.closed,.voraus-support-status.duplicate{color:#95a0a7}
.voraus-support-load{color:var(--muted);font-size:11px;padding:8px 0}
.voraus-support-detail{position:fixed;inset:0;z-index:90;background:rgba(3,6,8,.86);backdrop-filter:blur(14px);overflow:auto;padding:70px 16px 24px}
.voraus-support-detail>.card{max-width:680px;margin:0 auto}
.voraus-support-detail-hero{display:grid;gap:7px;padding-bottom:13px;border-bottom:1px solid rgba(255,255,255,.08)}
.voraus-support-detail-hero h2{margin:0;font-size:20px}.voraus-support-detail-hero p{margin:0;color:var(--muted);font-size:11px}
.voraus-support-thread{display:grid;gap:10px;margin:14px 0}
.voraus-support-event{border:1px solid rgba(255,255,255,.08);border-radius:13px;padding:11px;background:rgba(255,255,255,.025)}
.voraus-support-event.admin{border-color:rgba(215,255,53,.18);background:rgba(215,255,53,.045)}
.voraus-support-event.status{border-style:dashed;color:var(--muted)}
.voraus-support-event>div{display:flex;justify-content:space-between;gap:10px}.voraus-support-event p{margin:7px 0 0;white-space:pre-wrap;line-height:1.45}
.voraus-support-event small{color:var(--muted);font-size:9px}
.voraus-support-reply{display:grid;gap:10px;padding-top:13px;border-top:1px solid rgba(255,255,255,.08)}
.voraus-support-closed-note{padding:11px 12px;border-radius:12px;background:rgba(255,255,255,.035);color:var(--muted);font-size:10px;line-height:1.45}
.hidden{display:none!important}