Listen mit eigenem Vorrat und Einkauf, Städte anderer auf der Reise-Karte, Design "Fabrik"

Vorrat & Einkauf:
- Mehrere Listen (z. B. "Zuhause", "Urlaub"), jede mit eigenem Vorrat und
  eigener Einkaufsliste; Auswahl oben auf der Seite, gemerkt pro Browser
- Beim Anlegen festlegen, wer die Liste sieht: alle Konten oder nur
  ausgewählte (Ersteller sieht sie immer); ändern/löschen nur Ersteller
  und Administratoren
- Gekauft, aufgebraucht, Nachkaufen und Rezeptabgleich wirken innerhalb
  der gewählten Liste
- Migration: bisheriger Vorrat und Einkauf werden zur Liste "Zuhause"
  (für alle sichtbar)

Reisen:
- Schalter "Städte anderer zeigen": Städte der übrigen Konten in je einer
  eigenen Farbe, einzelne Personen ein-/ausblendbar, nur lesend
- Info-Karte zeigt, wer noch in einer Stadt bzw. einem Land war

Design "Fabrik" (Industrie-Inventar à la Satisfactory):
- Stahlplatten mit Schrauben, Titelleisten mit Fenstersymbol, gelb
  leuchtende Hauptbuttons, orange Mengen-Zähler, Warnstreifen,
  Riffelblech und drehende Zahnräder im Hintergrund
- Schriften Roboto / Roboto Condensed (OFL), lokal eingebunden

Doku: README verlinkt das zugehörige Repository P42-S.M.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

frontend/src/styles.css

@@ -42,6 +42,13 @@
   --map-ocean: #050102;
   --map-land: #1a0506;
   --map-land-hover: #3a0b0c;
+  /* Reise-Karte: Punkte anderer Konten, je Person eine Farbe (deutlich anders als die eigenen Punkte) */
+  --other-1: #9b7fe0;
+  --other-2: #4fd1a5;
+  --other-3: #ffd84a;
+  --other-4: #5fb4ff;
+  --other-5: #c6ff5c;
+  --other-6: #ff9f43;
 
   /* Form */
   --radius-s: 4px;
@@ -776,6 +783,11 @@ h3 { font-size: var(--h3-size); line-height: 1.3; }
 
 .household-panel { display: flex; flex-direction: column; gap: 16px; }
 .household-panel.einkauf { border-color: var(--accent); }
+.shopping-lists { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
+.shopping-lists-label { color: var(--muted); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; margin-right: 2px; }
+.shopping-lists .chip-list { align-items: center; }
+.shopping-visibility { margin: 0; font-size: 0.8rem; }
+.list-delete { margin-right: auto; }
 .household-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; }
 .household-head h2 { margin: 0; }
 .household-head h2::before { content: '// '; color: var(--accent); }
@@ -1088,6 +1100,22 @@ h3 { font-size: var(--h3-size); line-height: 1.3; }
 .info-visit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-top: 10px; border-top: 1px dashed var(--border); }
 .info-cities { display: flex; flex-wrap: wrap; gap: 6px; }
 .info-card .chip { font-size: 0.78rem; }
+.info-others { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
+.info-others .hint { margin: 0; font-size: 0.78rem; }
+
+/* Städte anderer Konten */
+.map-city.other .map-city-dot { fill: var(--dot); stroke: var(--bg); stroke-width: 1.5; filter: drop-shadow(0 0 3px var(--dot)); }
+.map-city.other:hover .map-city-dot { fill: var(--dot); stroke: var(--bright); }
+.map-city.other .map-city-ring { stroke: var(--dot); }
+.travel-others { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: -4px 0 14px; }
+.travel-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--muted); margin-left: 6px; }
+.legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 4px var(--dot); flex: none; }
+.legend-dot.own { background: var(--bright); box-shadow: 0 0 0 2px var(--accent); }
+.travel-person { display: inline-flex; align-items: center; gap: 6px; }
+.travel-person:not(.active) { opacity: 0.55; }
+.travel-person:not(.active) .legend-dot { background: transparent; box-shadow: inset 0 0 0 2px var(--dot); }
+.travel-person small { color: var(--muted); }
+.badge.travel-owner { color: var(--dot); }
 
 /* Besuchte Orte: Kontinente nebeneinander, Länder ausklappbar */
 .visited-list { display: grid; gap: 28px 32px; margin-top: 28px; align-items: start; }
@@ -1697,3 +1725,6 @@ h3 { font-size: var(--h3-size); line-height: 1.3; }
   ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
 }
 html.calm .tile:hover, html.calm .project-card:hover, html.calm .kanban-project-card:hover, html.calm .task-card:hover { transform: none; }
+
+/* Auswahlknöpfe (z. B. Sichtbarkeit einer Einkaufsliste) nicht wie Eingabefelder gestalten */
+.form label.checkbox input[type='radio'] { width: 18px; height: 18px; min-height: 0; padding: 0; margin: 0; border: 0; background: none; box-shadow: none; accent-color: var(--accent); flex: none; }