/* ============================================================
   POI-Finder – Stylesheet
   Version: 2026-07-31-v18
   ------------------------------------------------------------
   ACHTUNG: Das Layout-Grundgeruest, die Design-Token und der
   Theme-Schalter liegen INLINE in index.html. Diese Datei
   enthaelt nur die Ausgestaltung. Faellt sie beim Deployment
   aus, bleibt die App bedienbar und meldet das sichtbar.
   Der Waechter in index.html vergleicht --css-version mit der dort
   erwarteten Nummer. Bei jeder Aenderung an dieser Datei BEIDE Zahlen
   hochzaehlen, sonst meldet die App faelschlich "veraltet".
   ============================================================ */

:root { --css-loaded: 1; --css-version: 34; }

/* ===== Globaler Netzbalken =====
   Sichtbar, solange irgendeine Anfrage laeuft oder wartet. */
#netbar i {
  display: block; height: 100%; width: 42%;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent-l), transparent);
  animation: netslide 1.15s ease-in-out infinite;
}
@keyframes netslide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(340%); }
}

/* Kleiner Spinner fuer Zahlenfelder, die gerade berechnet werden */
.mini-spin {
  display: inline-block; width: 16px; height: 16px; vertical-align: -2px;
  border: 2.5px solid var(--line); border-top-color: var(--accent);
  border-radius: 50%; animation: spin .8s linear infinite;
}


/* ===== Navigationsicons =====
   Gezeichnete Glyphen mit Verlauf, umgesetzt als CSS-Maske. Das Icon
   nimmt dadurch die Farbe des Zustands an - im aktiven Chip weiss,
   sonst im Akzentverlauf. Mit Emoji ginge das nicht. Farbe ueber
   --icon-1 / --icon-2 anpassbar. */
:root { --icon-1: var(--accent-l); --icon-2: var(--accent); }
.ic {
  display: inline-block; width: 21px; height: 21px; flex: 0 0 auto;
  background: linear-gradient(145deg, var(--icon-1), var(--icon-2));
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
[aria-pressed="true"] > .ic,
[aria-pressed="true"] .gt-em > .ic { background: #fff; }
.gate-tile .gt-em > .ic { width: 30px; height: 30px; }
.fchip .ic { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; }
.icon-btn > .ic { width: 20px; height: 20px; }
.ic-cash { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z' opacity='.30'/><rect x='6' y='6' width='12' height='5' rx='1.2'/><rect x='7.5' y='13.5' width='9' height='1.7' rx='.85'/><rect x='7.5' y='16.6' width='5.5' height='1.7' rx='.85'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z' opacity='.30'/><rect x='6' y='6' width='12' height='5' rx='1.2'/><rect x='7.5' y='13.5' width='9' height='1.7' rx='.85'/><rect x='7.5' y='16.6' width='5.5' height='1.7' rx='.85'/></svg>"); }
.ic-pharmacy { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9.6 2.6h4.8a1 1 0 0 1 1 1v5h5a1 1 0 0 1 1 1v4.8a1 1 0 0 1-1 1h-5v5a1 1 0 0 1-1 1H9.6a1 1 0 0 1-1-1v-5h-5a1 1 0 0 1-1-1V9.6a1 1 0 0 1 1-1h5v-5a1 1 0 0 1 1-1z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9.6 2.6h4.8a1 1 0 0 1 1 1v5h5a1 1 0 0 1 1 1v4.8a1 1 0 0 1-1 1h-5v5a1 1 0 0 1-1 1H9.6a1 1 0 0 1-1-1v-5h-5a1 1 0 0 1-1-1V9.6a1 1 0 0 1 1-1h5v-5a1 1 0 0 1 1-1z'/></svg>"); }
.ic-food { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M2.2 3.4A1 1 0 0 1 3.2 2.5h1.5a1 1 0 0 1 1 .8l.4 2h14a1 1 0 0 1 1 1.2l-1.5 6.6a1.6 1.6 0 0 1-1.6 1.2H8.3a1.6 1.6 0 0 1-1.6-1.3L4.3 4.4H3.2a1 1 0 0 1-1-1z'/><circle cx='9.2' cy='19.4' r='1.9'/><circle cx='17.4' cy='19.4' r='1.9'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M2.2 3.4A1 1 0 0 1 3.2 2.5h1.5a1 1 0 0 1 1 .8l.4 2h14a1 1 0 0 1 1 1.2l-1.5 6.6a1.6 1.6 0 0 1-1.6 1.2H8.3a1.6 1.6 0 0 1-1.6-1.3L4.3 4.4H3.2a1 1 0 0 1-1-1z'/><circle cx='9.2' cy='19.4' r='1.9'/><circle cx='17.4' cy='19.4' r='1.9'/></svg>"); }
.ic-fuel { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 3.6A1.6 1.6 0 0 1 5.6 2h6.6a1.6 1.6 0 0 1 1.6 1.6V21H4z' opacity='.30'/><rect x='5.9' y='4.4' width='6' height='5' rx='1'/><rect x='3' y='20.2' width='11.8' height='2' rx='1'/><path d='M15.6 7.4l2.6 2.6c.4.4.6.9.6 1.4v5.4a1.6 1.6 0 0 0 3.2 0V9.2a2.6 2.6 0 0 0-.8-1.9l-2.5-2.5-1.5 1.5 1 1-1.3 1.3z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 3.6A1.6 1.6 0 0 1 5.6 2h6.6a1.6 1.6 0 0 1 1.6 1.6V21H4z' opacity='.30'/><rect x='5.9' y='4.4' width='6' height='5' rx='1'/><rect x='3' y='20.2' width='11.8' height='2' rx='1'/><path d='M15.6 7.4l2.6 2.6c.4.4.6.9.6 1.4v5.4a1.6 1.6 0 0 0 3.2 0V9.2a2.6 2.6 0 0 0-.8-1.9l-2.5-2.5-1.5 1.5 1 1-1.3 1.3z'/></svg>"); }
.ic-electric { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 3.6A1.6 1.6 0 0 1 5.6 2h7a1.6 1.6 0 0 1 1.6 1.6V21H4z' opacity='.30'/><path d='M10.4 5.2L6.6 11.6h2.5l-1 4.6 4.2-6.6h-2.6z'/><rect x='3' y='20.2' width='12.2' height='2' rx='1'/><path d='M17 8h1.6v2.2H17zm3 0h1.6v2.2H20z'/><path d='M16.4 11.4h5.8v1.9a2.9 2.9 0 0 1-2 2.8v2.3a1.9 1.9 0 0 1-3.8 0v-2.3a2.9 2.9 0 0 1-2-2.8z' opacity='.75'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 3.6A1.6 1.6 0 0 1 5.6 2h7a1.6 1.6 0 0 1 1.6 1.6V21H4z' opacity='.30'/><path d='M10.4 5.2L6.6 11.6h2.5l-1 4.6 4.2-6.6h-2.6z'/><rect x='3' y='20.2' width='12.2' height='2' rx='1'/><path d='M17 8h1.6v2.2H17zm3 0h1.6v2.2H20z'/><path d='M16.4 11.4h5.8v1.9a2.9 2.9 0 0 1-2 2.8v2.3a1.9 1.9 0 0 1-3.8 0v-2.3a2.9 2.9 0 0 1-2-2.8z' opacity='.75'/></svg>"); }
.ic-hydrogen { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.2s6.6 7 6.6 11.3A6.6 6.6 0 0 1 12 20.1a6.6 6.6 0 0 1-6.6-6.6C5.4 9.2 12 2.2 12 2.2z' opacity='.32'/><path d='M8.6 10.2h1.7v2.3h2.3v-2.3h1.7v6.3h-1.7v-2.4h-2.3v2.4H8.6z'/><path d='M15.6 15.1c0-1.3 1.9-1.4 1.9-2.2 0-.3-.2-.5-.6-.5s-.6.2-.7.6l-1-.3c.2-.8.8-1.2 1.7-1.2 1 0 1.7.5 1.7 1.3 0 1.4-1.9 1.5-1.9 2.2h1.9v1h-3z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.2s6.6 7 6.6 11.3A6.6 6.6 0 0 1 12 20.1a6.6 6.6 0 0 1-6.6-6.6C5.4 9.2 12 2.2 12 2.2z' opacity='.32'/><path d='M8.6 10.2h1.7v2.3h2.3v-2.3h1.7v6.3h-1.7v-2.4h-2.3v2.4H8.6z'/><path d='M15.6 15.1c0-1.3 1.9-1.4 1.9-2.2 0-.3-.2-.5-.6-.5s-.6.2-.7.6l-1-.3c.2-.8.8-1.2 1.7-1.2 1 0 1.7.5 1.7 1.3 0 1.4-1.9 1.5-1.9 2.2h1.9v1h-3z'/></svg>"); }
.ic-post { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 6.6A2.6 2.6 0 0 1 5.6 4h12.8A2.6 2.6 0 0 1 21 6.6v10.8a2.6 2.6 0 0 1-2.6 2.6H5.6A2.6 2.6 0 0 1 3 17.4z' opacity='.30'/><path d='M3.6 6.2A2.6 2.6 0 0 1 5.6 4h12.8c.9 0 1.6.4 2.1 1l-7.4 5.7a1.8 1.8 0 0 1-2.2 0z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 6.6A2.6 2.6 0 0 1 5.6 4h12.8A2.6 2.6 0 0 1 21 6.6v10.8a2.6 2.6 0 0 1-2.6 2.6H5.6A2.6 2.6 0 0 1 3 17.4z' opacity='.30'/><path d='M3.6 6.2A2.6 2.6 0 0 1 5.6 4h12.8c.9 0 1.6.4 2.1 1l-7.4 5.7a1.8 1.8 0 0 1-2.2 0z'/></svg>"); }
.ic-cafe { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3.4 8h13v6.6a4.6 4.6 0 0 1-4.6 4.6H8a4.6 4.6 0 0 1-4.6-4.6z'/><path d='M16.8 9.6h1.4a2.8 2.8 0 0 1 0 5.6h-1.4v-1.9h1.4a.9.9 0 0 0 0-1.8h-1.4z' opacity='.75'/><rect x='2.6' y='20.4' width='15' height='1.9' rx='.95' opacity='.55'/><path d='M7 2.2c.9 1 .9 2 0 3s-.9 2 0 3M11.6 2.2c.9 1 .9 2 0 3s-.9 2 0 3' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' opacity='.55'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3.4 8h13v6.6a4.6 4.6 0 0 1-4.6 4.6H8a4.6 4.6 0 0 1-4.6-4.6z'/><path d='M16.8 9.6h1.4a2.8 2.8 0 0 1 0 5.6h-1.4v-1.9h1.4a.9.9 0 0 0 0-1.8h-1.4z' opacity='.75'/><rect x='2.6' y='20.4' width='15' height='1.9' rx='.95' opacity='.55'/><path d='M7 2.2c.9 1 .9 2 0 3s-.9 2 0 3M11.6 2.2c.9 1 .9 2 0 3s-.9 2 0 3' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' opacity='.55'/></svg>"); }
.ic-wc { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='7' cy='4.4' r='2.2'/><path d='M4.3 7.6h5.4l1.5 6.4H9.6V21H4.4v-7H2.8z' opacity='.85'/><circle cx='17' cy='4.4' r='2.2'/><path d='M17 7.4c2 0 3.1 1 3.5 2.6l1.1 4.4h-1.9l-.5-2v8.6h-1.6v-5.4h-1.2V21h-1.6v-8.6l-.5 2h-1.9l1.1-4.4C13.9 8.4 15 7.4 17 7.4z' opacity='.85'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='7' cy='4.4' r='2.2'/><path d='M4.3 7.6h5.4l1.5 6.4H9.6V21H4.4v-7H2.8z' opacity='.85'/><circle cx='17' cy='4.4' r='2.2'/><path d='M17 7.4c2 0 3.1 1 3.5 2.6l1.1 4.4h-1.9l-.5-2v8.6h-1.6v-5.4h-1.2V21h-1.6v-8.6l-.5 2h-1.9l1.1-4.4C13.9 8.4 15 7.4 17 7.4z' opacity='.85'/></svg>"); }
.ic-plug { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.2 2.8h2.2v5H8.2zm5.4 0h2.2v5h-2.2z'/><path d='M6.4 8.6h11.2v3.1a5.6 5.6 0 0 1-4 5.4v2.4a1.6 1.6 0 0 1-3.2 0v-2.4a5.6 5.6 0 0 1-4-5.4z' opacity='.85'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.2 2.8h2.2v5H8.2zm5.4 0h2.2v5h-2.2z'/><path d='M6.4 8.6h11.2v3.1a5.6 5.6 0 0 1-4 5.4v2.4a1.6 1.6 0 0 1-3.2 0v-2.4a5.6 5.6 0 0 1-4-5.4z' opacity='.85'/></svg>"); }
.ic-bolt { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13.8 1.8L4.6 13.4h5.2l-1.6 8.8 9.4-11.8h-5.4z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13.8 1.8L4.6 13.4h5.2l-1.6 8.8 9.4-11.8h-5.4z'/></svg>"); }
.ic-hpc { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M11.2 1.8L3.4 13.4h4.2l-1.3 8.8 7.8-11.8h-4.4z'/><path d='M19.4 1.8l-5.6 8.4h3l-.9 6.4 5.6-8.6h-3.2z' opacity='.7'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M11.2 1.8L3.4 13.4h4.2l-1.3 8.8 7.8-11.8h-4.4z'/><path d='M19.4 1.8l-5.6 8.4h3l-.9 6.4 5.6-8.6h-3.2z' opacity='.7'/></svg>"); }
.ic-socket { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3.4 4.2A1.8 1.8 0 0 1 5.2 2.4h13.6a1.8 1.8 0 0 1 1.8 1.8v15.6a1.8 1.8 0 0 1-1.8 1.8H5.2a1.8 1.8 0 0 1-1.8-1.8z' opacity='.3'/><circle cx='12' cy='12' r='6.2' opacity='.5'/><rect x='8.6' y='9.6' width='2.1' height='4.8' rx='1.05'/><rect x='13.3' y='9.6' width='2.1' height='4.8' rx='1.05'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3.4 4.2A1.8 1.8 0 0 1 5.2 2.4h13.6a1.8 1.8 0 0 1 1.8 1.8v15.6a1.8 1.8 0 0 1-1.8 1.8H5.2a1.8 1.8 0 0 1-1.8-1.8z' opacity='.3'/><circle cx='12' cy='12' r='6.2' opacity='.5'/><rect x='8.6' y='9.6' width='2.1' height='4.8' rx='1.05'/><rect x='13.3' y='9.6' width='2.1' height='4.8' rx='1.05'/></svg>"); }
.ic-diesel { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.2s6.6 7 6.6 11.3A6.6 6.6 0 0 1 12 20.1a6.6 6.6 0 0 1-6.6-6.6C5.4 9.2 12 2.2 12 2.2z' opacity='.32'/><rect x='7.4' y='12.4' width='9.2' height='2.4' rx='1.2'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.2s6.6 7 6.6 11.3A6.6 6.6 0 0 1 12 20.1a6.6 6.6 0 0 1-6.6-6.6C5.4 9.2 12 2.2 12 2.2z' opacity='.32'/><rect x='7.4' y='12.4' width='9.2' height='2.4' rx='1.2'/></svg>"); }
.ic-oct95 { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.2s6.6 7 6.6 11.3A6.6 6.6 0 0 1 12 20.1a6.6 6.6 0 0 1-6.6-6.6C5.4 9.2 12 2.2 12 2.2z' opacity='.32'/><circle cx='12' cy='13.6' r='1.9'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.2s6.6 7 6.6 11.3A6.6 6.6 0 0 1 12 20.1a6.6 6.6 0 0 1-6.6-6.6C5.4 9.2 12 2.2 12 2.2z' opacity='.32'/><circle cx='12' cy='13.6' r='1.9'/></svg>"); }
.ic-oct98 { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.2s6.6 7 6.6 11.3A6.6 6.6 0 0 1 12 20.1a6.6 6.6 0 0 1-6.6-6.6C5.4 9.2 12 2.2 12 2.2z' opacity='.32'/><circle cx='9.5' cy='13.6' r='1.8'/><circle cx='14.5' cy='13.6' r='1.8'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.2s6.6 7 6.6 11.3A6.6 6.6 0 0 1 12 20.1a6.6 6.6 0 0 1-6.6-6.6C5.4 9.2 12 2.2 12 2.2z' opacity='.32'/><circle cx='9.5' cy='13.6' r='1.8'/><circle cx='14.5' cy='13.6' r='1.8'/></svg>"); }
.ic-adblue { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.2s6.6 7 6.6 11.3A6.6 6.6 0 0 1 12 20.1a6.6 6.6 0 0 1-6.6-6.6C5.4 9.2 12 2.2 12 2.2z' opacity='.32'/><path d='M10.8 10.2h2.4v2.4h2.4v2.4h-2.4v2.4h-2.4V15H8.4v-2.4h2.4z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.2s6.6 7 6.6 11.3A6.6 6.6 0 0 1 12 20.1a6.6 6.6 0 0 1-6.6-6.6C5.4 9.2 12 2.2 12 2.2z' opacity='.32'/><path d='M10.8 10.2h2.4v2.4h2.4v2.4h-2.4v2.4h-2.4V15H8.4v-2.4h2.4z'/></svg>"); }
.ic-lpg { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='9.4' y='1.9' width='5.2' height='2.6' rx='1'/><path d='M6.6 7.4a3 3 0 0 1 3-3h4.8a3 3 0 0 1 3 3v11.4a3 3 0 0 1-3 3H9.6a3 3 0 0 1-3-3z' opacity='.32'/><path d='M12 8.4c1.9 2 2.9 3.4 2.9 4.8a2.9 2.9 0 0 1-5.8 0c0-1.4 1-2.8 2.9-4.8z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='9.4' y='1.9' width='5.2' height='2.6' rx='1'/><path d='M6.6 7.4a3 3 0 0 1 3-3h4.8a3 3 0 0 1 3 3v11.4a3 3 0 0 1-3 3H9.6a3 3 0 0 1-3-3z' opacity='.32'/><path d='M12 8.4c1.9 2 2.9 3.4 2.9 4.8a2.9 2.9 0 0 1-5.8 0c0-1.4 1-2.8 2.9-4.8z'/></svg>"); }
.ic-home { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M11.3 2.6a1.1 1.1 0 0 1 1.4 0l8.3 7a1 1 0 0 1-.7 1.8H20v8.5a1.6 1.6 0 0 1-1.6 1.6h-3.1v-6.1h-4.6v6.1H7.6A1.6 1.6 0 0 1 6 19.9v-8.5H4.7a1 1 0 0 1-.7-1.8z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M11.3 2.6a1.1 1.1 0 0 1 1.4 0l8.3 7a1 1 0 0 1-.7 1.8H20v8.5a1.6 1.6 0 0 1-1.6 1.6h-3.1v-6.1h-4.6v6.1H7.6A1.6 1.6 0 0 1 6 19.9v-8.5H4.7a1 1 0 0 1-.7-1.8z'/></svg>"); }
.ic-refresh { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 4.6a7.4 7.4 0 0 1 6.8 4.5l-1.9.8A5.4 5.4 0 0 0 12 6.6a5.4 5.4 0 0 0-5.2 4H9L5.6 15 2.2 10.6h2.5A7.4 7.4 0 0 1 12 4.6z'/><path d='M12 19.4a7.4 7.4 0 0 1-6.8-4.5l1.9-.8A5.4 5.4 0 0 0 12 17.4a5.4 5.4 0 0 0 5.2-4H15L18.4 9l3.4 4.4h-2.5A7.4 7.4 0 0 1 12 19.4z' opacity='.7'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 4.6a7.4 7.4 0 0 1 6.8 4.5l-1.9.8A5.4 5.4 0 0 0 12 6.6a5.4 5.4 0 0 0-5.2 4H9L5.6 15 2.2 10.6h2.5A7.4 7.4 0 0 1 12 4.6z'/><path d='M12 19.4a7.4 7.4 0 0 1-6.8-4.5l1.9-.8A5.4 5.4 0 0 0 12 17.4a5.4 5.4 0 0 0 5.2-4H15L18.4 9l3.4 4.4h-2.5A7.4 7.4 0 0 1 12 19.4z' opacity='.7'/></svg>"); }
.ic-info { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='9.4' opacity='.3'/><circle cx='12' cy='7.4' r='1.5'/><path d='M10.6 10.4h2.8v6.9h-2.8z' /><rect x='9.4' y='16.2' width='5.2' height='1.9' rx='.95'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='9.4' opacity='.3'/><circle cx='12' cy='7.4' r='1.5'/><path d='M10.6 10.4h2.8v6.9h-2.8z' /><rect x='9.4' y='16.2' width='5.2' height='1.9' rx='.95'/></svg>"); }
.ic-restaurant { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 2.2v6.4a2.4 2.4 0 0 1-1.5 2.2v10a1.3 1.3 0 1 1-2.6 0v-10A2.4 2.4 0 0 1 1.4 8.6V2.2h1.6v5.6h1v-5.6h1.4v5.6h1V2.2z'/><path d='M14.6 2.2c2.6 0 4.6 2.3 4.6 5.4 0 2.5-1.3 4.5-3.2 5.1v8.1a1.3 1.3 0 1 1-2.6 0v-8.1c-1.9-.6-3.2-2.6-3.2-5.1 0-3.1 2-5.4 4.4-5.4z' opacity='.85'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 2.2v6.4a2.4 2.4 0 0 1-1.5 2.2v10a1.3 1.3 0 1 1-2.6 0v-10A2.4 2.4 0 0 1 1.4 8.6V2.2h1.6v5.6h1v-5.6h1.4v5.6h1V2.2z'/><path d='M14.6 2.2c2.6 0 4.6 2.3 4.6 5.4 0 2.5-1.3 4.5-3.2 5.1v8.1a1.3 1.3 0 1 1-2.6 0v-8.1c-1.9-.6-3.2-2.6-3.2-5.1 0-3.1 2-5.4 4.4-5.4z' opacity='.85'/></svg>"); }
.ic-sights { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 9.5h16V21H4z' opacity='.32'/><path d='M4 3.4h2.6v2.2h2.2V3.4h2.4v2.2h1.6V3.4h2.4v2.2h2.2V3.4H20v6.1H4z'/><rect x='10.2' y='13.4' width='3.6' height='7.6' rx='1'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 9.5h16V21H4z' opacity='.32'/><path d='M4 3.4h2.6v2.2h2.2V3.4h2.4v2.2h1.6V3.4h2.4v2.2h2.2V3.4H20v6.1H4z'/><rect x='10.2' y='13.4' width='3.6' height='7.6' rx='1'/></svg>"); }
.ic-doctor { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 4.4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v1.4h-1.8V4.6h-2.4v1.2H9z'/><rect x='3' y='5.8' width='18' height='14' rx='2.4' opacity='.32'/><path d='M10.7 10h2.6v2.7H16v2.6h-2.7V18h-2.6v-2.7H8v-2.6h2.7z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 4.4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v1.4h-1.8V4.6h-2.4v1.2H9z'/><rect x='3' y='5.8' width='18' height='14' rx='2.4' opacity='.32'/><path d='M10.7 10h2.6v2.7H16v2.6h-2.7V18h-2.6v-2.7H8v-2.6h2.7z'/></svg>"); }
.ic-transit { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='4.6' y='2.6' width='14.8' height='13' rx='2.6' opacity='.32'/><rect x='6.8' y='5' width='10.4' height='5.2' rx='1'/><circle cx='8.6' cy='12.9' r='1.35'/><circle cx='15.4' cy='12.9' r='1.35'/><rect x='6.6' y='15.8' width='2.2' height='5.6' rx='1.1'/><rect x='15.2' y='15.8' width='2.2' height='5.6' rx='1.1'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='4.6' y='2.6' width='14.8' height='13' rx='2.6' opacity='.32'/><rect x='6.8' y='5' width='10.4' height='5.2' rx='1'/><circle cx='8.6' cy='12.9' r='1.35'/><circle cx='15.4' cy='12.9' r='1.35'/><rect x='6.6' y='15.8' width='2.2' height='5.6' rx='1.1'/><rect x='15.2' y='15.8' width='2.2' height='5.6' rx='1.1'/></svg>"); }
.ic-parking { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='2.8' y='2.8' width='18.4' height='18.4' rx='4.4' opacity='.32'/><path d='M8.8 6.6h4.3c2.6 0 4.2 1.6 4.2 4.1s-1.7 4.2-4.4 4.2h-1.7v2.5H8.8zm2.4 2.2v3.9h1.6c1.2 0 1.9-.7 1.9-1.9s-.7-2-1.9-2z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='2.8' y='2.8' width='18.4' height='18.4' rx='4.4' opacity='.32'/><path d='M8.8 6.6h4.3c2.6 0 4.2 1.6 4.2 4.1s-1.7 4.2-4.4 4.2h-1.7v2.5H8.8zm2.4 2.2v3.9h1.6c1.2 0 1.9-.7 1.9-1.9s-.7-2-1.9-2z'/></svg>"); }
.ic-fashion { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.4a2.5 2.5 0 0 0-2.5 2.5h2.1a.4.4 0 1 1 .4.4c-.7 0-1.3.5-1.3 1.2v.8L3.2 12a1.6 1.6 0 0 0 .9 2.9h15.8a1.6 1.6 0 0 0 .9-2.9l-7.5-4.7v-.6c1.2-.2 2.1-1.2 2.1-2.4A2.5 2.5 0 0 0 12 2.4z' opacity='.85'/><path d='M8.4 16.6h7.2l1.5 4.9H6.9z' opacity='.32'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.4a2.5 2.5 0 0 0-2.5 2.5h2.1a.4.4 0 1 1 .4.4c-.7 0-1.3.5-1.3 1.2v.8L3.2 12a1.6 1.6 0 0 0 .9 2.9h15.8a1.6 1.6 0 0 0 .9-2.9l-7.5-4.7v-.6c1.2-.2 2.1-1.2 2.1-2.4A2.5 2.5 0 0 0 12 2.4z' opacity='.85'/><path d='M8.4 16.6h7.2l1.5 4.9H6.9z' opacity='.32'/></svg>"); }
.ic-diy { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13.4 2.2a5.4 5.4 0 0 0-1.2 8.4l-8.3 8.3a1.8 1.8 0 0 0 0 2.5 1.8 1.8 0 0 0 2.5 0l8.3-8.3a5.4 5.4 0 0 0 6.6-7.9l-3 3-2.5-.7-.7-2.5 3-3a5.4 5.4 0 0 0-4.7.2z' opacity='.32'/><path d='M3.2 5.4l2.2-2.2 5.2 5.2-2.2 2.2z'/><rect x='14.6' y='13.4' width='2.6' height='8.4' rx='1.3'/><path d='M11.9 12.6h8.1v2.4h-8.1z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13.4 2.2a5.4 5.4 0 0 0-1.2 8.4l-8.3 8.3a1.8 1.8 0 0 0 0 2.5 1.8 1.8 0 0 0 2.5 0l8.3-8.3a5.4 5.4 0 0 0 6.6-7.9l-3 3-2.5-.7-.7-2.5 3-3a5.4 5.4 0 0 0-4.7.2z' opacity='.32'/><path d='M3.2 5.4l2.2-2.2 5.2 5.2-2.2 2.2z'/><rect x='14.6' y='13.4' width='2.6' height='8.4' rx='1.3'/><path d='M11.9 12.6h8.1v2.4h-8.1z'/></svg>"); }

/* ===== Kopfleiste ===== */
#topbar {
  padding: calc(env(safe-area-inset-top) + 10px) 12px 8px;
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(to bottom, rgba(0,0,0,.6), rgba(0,0,0,0));
  pointer-events: none;
}
[data-theme="light"] #topbar {
  background: linear-gradient(to bottom, rgba(242,242,247,.9), rgba(242,242,247,0));
}
#topbar > * { pointer-events: auto; }

.spacer { flex: 1; }

/* Alles, was ueber der Karte schwebt, benutzt dieselbe durchscheinende
   Flaeche. Vorher war jedes Element eine eigene deckende Kachel mit
   eigenem Schatten - das ergab ein Flickenmuster ueber der Karte. */
.floating {
  background: rgba(28, 28, 30, .70);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .30);
}
[data-theme="light"] .floating {
  background: rgba(255, 255, 255, .74);
  border-color: rgba(0, 0, 0, .07);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .12);
}

.icon-btn {
  width: 40px; height: 40px; border-radius: 999px;
  background: transparent; color: var(--text); font-size: 17px;
  display: flex; align-items: center; justify-content: center;
  border: 0; transition: transform .2s ease, background .2s ease;
}
.icon-btn:active { transform: scale(.88); }

/* Hell/Dunkel als Schalter statt Emoji-Knopf. Masse und Federkurve
   nach dem Vorbild von iOS: 51x31 Spur, 27er Knopf, 2px Rand.
   aria-checked=true heisst "hell an". */
.switch {
  border: 0; background: transparent; padding: 0 6px;
  display: flex; align-items: center; justify-content: center;
  height: 40px; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.switch-track {
  position: relative; display: block;
  width: 51px; height: 31px; border-radius: 999px;
  background: var(--grey); opacity: .55;
  transition: background .25s ease, opacity .25s ease;
}
.switch[aria-checked="true"] .switch-track { background: var(--accent, #34C759); opacity: 1; }
.switch-knob {
  position: absolute; top: 2px; left: 2px;
  width: 27px; height: 27px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.28);
  transition: transform .28s cubic-bezier(.32,.72,0,1), width .2s ease;
}
.switch[aria-checked="true"] .switch-knob { transform: translateX(20px); }
.switch:active .switch-knob { width: 31px; }
.switch[aria-checked="true"]:active .switch-knob { transform: translateX(16px); }
@media (prefers-reduced-motion: reduce) {
  .switch-track, .switch-knob { transition: none; }
}

/* Drei Knoepfe, eine Flaeche, statt drei schwebender Kreise */
.btn-group {
  display: flex; align-items: center; border-radius: 999px; overflow: hidden;
  flex: 0 0 auto;              /* Knopfgruppe nie stauchen */
  background: rgba(28, 28, 30, .70);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .30);
}
[data-theme="light"] .btn-group {
  background: rgba(255, 255, 255, .74);
  border-color: rgba(0, 0, 0, .07);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .12);
}
.btn-group .icon-btn + .icon-btn,
.btn-group .icon-btn + .switch,
.btn-group .switch + .icon-btn { box-shadow: inset 1px 0 0 var(--line); }
.btn-group .icon-btn:active { background: var(--line); transform: none; }

#status-badge {
  display: flex; align-items: center; gap: 7px;
  border-radius: 999px; padding: 9px 14px 9px 12px;
  font-size: 12.5px; font-weight: 600; color: var(--text);
  max-width: 44vw;
  min-width: 0; flex: 0 1 auto; overflow: hidden;   /* weicht dem Schalter aus */
  background: rgba(28, 28, 30, .70);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .30);
}
[data-theme="light"] #status-badge {
  background: rgba(255, 255, 255, .74);
  border-color: rgba(0, 0, 0, .07);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .12);
}
#status-badge .txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--grey); flex: 0 0 auto; }
.pulse.live { background: var(--green); animation: pulse 1.8s ease-out infinite; }
.pulse.busy { background: var(--accent); animation: pulse 1s ease-out infinite; }
.pulse.err  { background: var(--red); }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  70%  { box-shadow: 0 0 0 7px rgba(0,0,0,0); opacity: .85; }
  100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .pulse, .spinner, .bar i, .mini-spin { animation: none !important; }
  /* ohne Bewegung bleibt der Balken als durchgehende Flaeche sichtbar */
  #netbar i { animation: none !important; width: 100%; opacity: .7; }
  /* Dasselbe fuer den Ladebalken in der Liste: ein bei 38 % eingefrorener
     Balken sieht aus wie eine haengende Anzeige. */
  .bar i { width: 100%; opacity: .7; }
  /* Der Ring kann sich nicht drehen, muss aber trotzdem "es laeuft noch"
     sagen. Ein langsames Auf- und Abblenden ist keine Bewegung im Raum
     und daher auch bei reduzierter Bewegung vertretbar. */
  .spinner, .mini-spin {
    animation: fadepulse 1.6s ease-in-out infinite !important;
    border-color: var(--accent);
  }
  * { transition-duration: .01ms !important; }
}
@keyframes fadepulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* ===== Kategorie-Leiste ===== */
#catbar {
  display: flex; gap: 7px; overflow-x: auto;
  padding: 2px 12px 6px; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; pointer-events: none;
}
#catbar::-webkit-scrollbar { display: none; }
#catbar > * { pointer-events: auto; }

.chip {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 15px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600;
  color: var(--text);
  background: rgba(28, 28, 30, .70);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .30);
  transition: background .22s ease, color .22s ease, transform .15s ease, box-shadow .22s ease;
}
[data-theme="light"] .chip {
  background: rgba(255, 255, 255, .74);
  border-color: rgba(0, 0, 0, .07);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .12);
}
.chip .em { font-size: 15px; }
.chip[aria-pressed="true"] {
  background: var(--accent); color: #fff; border-color: var(--accent);
  box-shadow: 0 6px 20px rgba(47,172,151,.42);
}
.chip:active { transform: scale(.94); }

/* Schmale Geraete: nur der aktive Kategorie-Chip traegt Text, sonst
   passen die sieben Kategorien nicht nebeneinander. */
#catbar .chip { padding: 8px 11px; font-size: 13px; gap: 0; }
#catbar .chip .lbl { display: none; }
#catbar .chip[aria-pressed="true"] { gap: 6px; }
#catbar .chip[aria-pressed="true"] .lbl { display: inline; }
@media (min-width: 600px) {
  #catbar .chip { padding: 9px 15px; font-size: 13.5px; gap: 6px; }
  #catbar .chip .lbl { display: inline; }
}
@media (max-width: 599px) {
  .brand { display: none; }          /* steht doppelt zum Titel im Sheet */
  #status-badge { max-width: 52vw; }
}

/* ===== Schwebender Kartenlayer-Knopf ===== */
#layer-btn {
  position: absolute; left: 14px; z-index: 920;
  bottom: calc(32dvh + 14px);
  transition: bottom .32s cubic-bezier(.32,.72,0,1);
}
#layer-menu {
  position: absolute; left: 14px; z-index: 930;
  bottom: calc(32dvh + 62px);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 6px; display: flex; flex-direction: column; gap: 4px;
  transition: bottom .32s cubic-bezier(.32,.72,0,1);
}
#layer-menu.hide { display: none; }
#layer-menu button {
  background: none; color: var(--text); text-align: left;
  padding: 9px 13px; border-radius: var(--radius-sm);
  font-size: 13.5px; font-weight: 600; white-space: nowrap;
}
#layer-menu button[aria-pressed="true"] { background: var(--accent); color: #fff; }

/* ===== Bottom-Sheet ===== */
#sheet {
  background: var(--surface);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -10px 40px rgba(0,0,0,.5);
  border-top: 1px solid var(--line);
}
#grabber { padding: 9px 0 5px; display: flex; justify-content: center; flex: 0 0 auto; cursor: grab; }
#grabber::before { content: ""; width: 38px; height: 5px; border-radius: 3px; background: var(--grey); opacity: .55; }

#sheet-head { padding: 2px 18px 4px; flex: 0 0 auto; }
.sheet-title { display: flex; align-items: baseline; gap: 8px; }
.sheet-title h2 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.sheet-title .sub { font-size: 12.5px; color: var(--text-2); font-weight: 500; }
.sheet-title .ver { margin-left: auto; font-size: 10.5px; color: var(--grey); font-weight: 500; letter-spacing: .02em; }

/* Verkehrsmittel als Segment-Control */
#modebar {
  display: flex; gap: 3px; margin: 10px 18px 0; padding: 3px;
  background: var(--surface-2); border-radius: 12px; flex: 0 0 auto;
}
#modebar button {
  flex: 1; padding: 8px 4px; border-radius: 9px; background: none;
  color: var(--text-2); font-size: 13.5px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  transition: background .2s ease, color .2s ease;
}
#modebar button[aria-pressed="true"] { background: var(--accent); color: #fff; }

/* Filterzeile */
#filters {
  display: flex; gap: 7px; overflow-x: auto;
  padding: 11px 18px 4px; flex: 0 0 auto;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
#filters::-webkit-scrollbar { display: none; }
.fchip {
  flex: 0 0 auto; padding: 7px 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600;
  background: var(--chip-bg); color: var(--text-2);
  border: 1px solid transparent; transition: background .2s ease, color .2s ease;
}
.fchip[aria-pressed="true"] { background: var(--accent); color: #fff; }
.fchip.open-now[aria-pressed="true"] { background: var(--green); }
/* Nicht besetzter Filter: sichtbar, aber erkennbar ohne Treffer */
.fchip.zero { opacity: .38; }
/* "+n" = so viele passen nur, weil die Angabe in OSM fehlt */

/* Trenner zwischen Filterarten: Typ | Zustand | Marke */
.fsep {
  flex: 0 0 auto; width: 1px; align-self: center;
  height: 18px; background: var(--line); margin: 0 3px;
}
/* Marken sind nachrangig - kleiner und ruhiger als die Typfilter */
.fchip.brandchip { font-size: 12px; font-weight: 600; opacity: .82; }
.fchip.brandchip[aria-pressed="true"] { opacity: 1; }
.fchip.state { font-weight: 650; }
/* Unterkategorien sind keine Filter, sondern eine eigene Abfrage -
   deshalb kraeftiger als die Filterchips daneben. */
.fchip.subcat {
  font-size: 13px; font-weight: 700; padding: 8px 13px;
  display: inline-flex; align-items: center;
}
.fchip.subcat[aria-pressed="true"] { box-shadow: 0 4px 14px rgba(47,172,151,.35); }
.hpc-tag { color: var(--accent-l); font-weight: 650; }

/* ===== Liste ===== */
#list { padding: 10px 14px calc(env(safe-area-inset-bottom) + 30px); }

.card {
  background: var(--surface-2); border-radius: var(--radius);
  padding: 13px 15px; margin-bottom: 10px;
  display: flex; align-items: center; gap: 13px;
  border: 1px solid transparent;
  transition: border-color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.card:active { transform: scale(.985); }
.card.sel { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47,172,151,.18); }
.card .rank {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  background: var(--surface); display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.card.sel .rank { background: var(--accent); }

/* Logo-Kachel: heller Grund, weil die meisten Marken-Logos fuer helle
   Untergruende gezeichnet sind und im Dunkelmodus sonst verschwinden. */
.card .rank.haslogo { background: #fff; padding: 4px; }
.card.sel .rank.haslogo { background: #fff; box-shadow: 0 0 0 2px var(--accent); }
.card .rank img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Stern fuer den naechsten Treffer als Eckmarke, damit er das Logo nicht ersetzt */
.card .rank { position: relative; }
.card .rank.first::after {
  content: "⭐"; position: absolute; top: -5px; right: -5px;
  font-size: 12px; line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
}

.fchip.withlogo { display: inline-flex; align-items: center; gap: 5px; padding-left: 7px; }
.chip-logo {
  width: 18px; height: 18px; object-fit: contain;
  background: #fff; border-radius: 4px; padding: 1px;
}

.d-logo {
  width: 22px; height: 22px; object-fit: contain; vertical-align: -4px;
  background: #fff; border-radius: 5px; padding: 2px;
}
.card .mid { flex: 1 1 auto; min-width: 0; }
.card .nm { font-size: 15px; font-weight: 650; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .meta { font-size: 12.5px; color: var(--text-2); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .right { flex: 0 0 auto; text-align: right; display: flex; align-items: center; gap: 10px; }
.card .time { font-size: 16px; font-weight: 700; color: var(--accent-l); line-height: 1.15; }
.card .dist { font-size: 11.5px; color: var(--text-2); }
.fav-btn { background: none; font-size: 19px; padding: 4px; line-height: 1; color: var(--grey); }
.fav-btn.on { color: #FFD60A; }

.tag-open   { color: var(--green); font-weight: 650; }
.tag-closed { color: var(--red); font-weight: 650; }
.tag-unknown{ color: var(--grey); }
/* Treffer, die nur mangels Angabe im Filter geblieben sind */
.unsure{ color: var(--grey); font-style: italic; }

/* ===== Detail ===== */
/* Liegt im Listenfluss direkt unter dem gewaehlten Eintrag, deshalb
   keine seitlichen Raender: die kommen vom Innenabstand von #list. */
#detail {
  padding: 15px 16px 16px; margin: 0 0 10px;
  background: var(--surface-2); border-radius: var(--radius);
  border: 1px solid var(--accent);
}
#detail h3 { margin: 0 0 4px; font-size: 16.5px; letter-spacing: -.015em; }
#detail .d-meta { font-size: 13px; color: var(--text-2); line-height: 1.55; }
#detail .d-stats { display: flex; gap: 20px; margin: 13px 0 13px; }
#detail .d-stats .v { display: block; font-size: 20px; font-weight: 700; color: var(--accent-l); }
#detail .d-stats .k { display: block; font-size: 10.5px; color: var(--text-2); text-transform: uppercase; letter-spacing: .06em; margin-top: 1px; }

.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.btn {
  flex: 1 1 auto; padding: 12px 14px; border-radius: var(--radius-sm);
  font-size: 13.5px; font-weight: 650; text-align: center; text-decoration: none;
  background: var(--accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: opacity .2s ease, transform .15s ease;
}
.btn.sec { background: var(--surface); color: var(--text); border: 1px solid var(--line); }
.btn.park { background: var(--surface); color: var(--accent-l); border: 1px solid var(--accent); }
.btn:active { transform: scale(.96); opacity: .9; }

/* Parkbereich */
#park-zone { margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--line); }
#park-zone.hide { display: none; }
.park-item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; margin-bottom: 7px;
  background: var(--surface); border-radius: var(--radius-sm);
  border: 1px solid transparent;
}
.park-item.sel { border-color: var(--accent); }
.park-item .pi-em { font-size: 18px; flex: 0 0 auto; }
.park-item .pi-mid { flex: 1 1 auto; min-width: 0; }
.park-item .pi-nm { font-size: 13.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.park-item .pi-meta { font-size: 11.5px; color: var(--text-2); margin-top: 2px; }
.park-item .pi-d { font-size: 12.5px; color: var(--accent-l); font-weight: 650; flex: 0 0 auto; }
/* Karten-Links unter dem gewaehlten Parkplatz */
.park-nav { margin: 6px 0 10px; }
.park-nav .btn { padding: 10px 12px; font-size: 14px; }

/* Wikipedia-Vorschaubild in der Trefferliste */
.rank.thumb { padding: 0; overflow: hidden; }
.card-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 10px; display: block; }

/* Wikipedia-Kasten in der Detailkarte */
.wiki-box { margin: 12px 0 4px; padding: 10px 12px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line); }
/* 16:10 statt fester Hoehe: waechst mit der Kastenbreite mit - auf dem
   iPad grosszuegig, auf dem Telefon kompakt. cover schneidet den
   Ausschnitt; Panoramen werden so nie zum Streifen gequetscht. */
.wiki-img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 9px; display: block; }
.wiki-tx { margin: 9px 0 4px; font-size: 14px; line-height: 1.5; color: var(--text); }
.wiki-src { font-size: 12.5px; color: var(--accent-l); font-weight: 600; text-decoration: none; }

/* Notfallzeile ueber der Arztliste */
.park-note.emergency { border-left: 3px solid #c0392b; }
.park-note.emergency a { color: inherit; font-weight: 700; }

.park-note { font-size: 11.5px; color: var(--grey); line-height: 1.5; margin-top: 8px; }

/* ===== Zustaende ===== */
.empty { padding: 32px 20px; text-align: center; color: var(--text-2); }
.empty .em { font-size: 38px; display: block; margin-bottom: 12px; }
.empty .t { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.empty .s { font-size: 13px; line-height: 1.55; }

/* Dreht sich, solange ueberhaupt eine Serveranfrage laeuft oder wartet.
   Haengt an derselben Bedingung wie der Netzbalken (running || queue). */
.mini-spin {
  display: inline-block; align-self: center; flex: 0 0 auto;
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--accent);
  animation: spin .8s linear infinite;
}

.spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2.5px solid var(--line); border-top-color: var(--accent);
  animation: spin .8s linear infinite; margin: 0 auto 14px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.bar { height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; margin: 0 0 16px; }
.bar i { display: block; height: 100%; width: 38%; background: var(--accent); animation: slide 1.2s ease-in-out infinite; }
@keyframes slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(310%); } }

/* ===== Startbildschirm ===== */
#gate { padding: 26px 20px; gap: 6px; }
#gate .logo { font-size: 58px; margin-bottom: 6px; }

#gate-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px; width: 100%; max-width: 430px; margin-top: 24px;
}
.gate-tile {
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  padding: 18px 6px; border-radius: var(--radius);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line); box-shadow: var(--shadow);
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.gate-tile:active { transform: scale(.95); }
.gate-tile .gt-em { font-size: 27px; line-height: 1; }
.gate-tile .gt-tx { font-size: 12.5px; font-weight: 650; letter-spacing: -.01em; }
/* Ist eine Marke bevorzugt, steht sie oben und die Kategorie klein darunter */
.gate-tile .gt-sub { font-size: 10.5px; color: var(--text-2); margin-top: -4px; }
.gate-tile.last { border-color: var(--accent); }
.gate-tile .gt-badge {
  position: absolute; top: -7px; right: -5px;
  background: var(--accent); color: #fff;
  font-size: 9.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px;
}
.gate-tile.busy { background: var(--accent); color: #fff; border-color: var(--accent); }
.gate-tile[disabled] { opacity: .45; }
#gate-foot { margin-top: 20px; }
/* Partnerkarte: eigenstaendige Flaeche, aber optisch ruhiger als die
   Kategorie-Kacheln - sie soll nicht mit ihnen konkurrieren. Deshalb
   randlos-weich statt Kachel-Erhebung und ohne Akzentfarbe. */
#gate .partner-card {
  display: flex; align-items: center; gap: 11px;
  width: 100%; max-width: 330px; margin: 16px auto 0;
  padding: 11px 13px; border-radius: 14px;
  background: var(--surface-2); border: 1px solid var(--line);
  text-decoration: none; color: var(--text);
  transition: transform .18s ease, background .18s ease;
}
#gate .partner-card:active { transform: scale(.975); background: var(--line); }
/* Kein weisser Hintergrund: das nexusFin-Zeichen ist selbst eine
   gefuellte Flaeche - ein weisser Rahmen darum saehe nach Fehler aus. */
.partner-logo { width: 34px; height: 34px; object-fit: contain; flex: 0 0 auto;
  border-radius: 8px; }
.partner-txt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.partner-title { font-size: 14px; font-weight: 650; letter-spacing: -.01em; }
.partner-sub { font-size: 11.5px; color: var(--text-2); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.partner-go { flex: 0 0 auto; font-size: 19px; color: var(--text-2); opacity: .6; }

/* Partnerhinweis: sichtbar, aber leiser als die Standort-Aktion darueber */
/* Knopf, der wie ein Link aussieht - fuer "E-Mail anzeigen" */
.linkish { background: none; border: 0; padding: 0; font: inherit;
  color: var(--accent-l); cursor: pointer; text-decoration: underline; }
.partner-link { display: block; margin-top: 2px; opacity: .72; font-size: 12.5px;
  text-decoration: none; color: var(--text-2); }
/* Pflichthinweis: leise, aber lesbar. Bewusst nicht unter 11px und
   nicht unter 60% Deckkraft - ein Pflichthinweis, den man nicht lesen
   kann, ist keiner. */
/* ID-Praefix noetig: "#gate p" hat hoehere Spezifitaet als eine blosse
   Klasse und wuerde die Groesse sonst ueberschreiben. Bekannte Falle in
   diesem Projekt - siehe PROJEKT.md, Abschnitt Sackgassen. */
#gate .partner-note { margin: 4px auto 0; max-width: 330px; font-size: 12px;
  line-height: 1.45; opacity: .62; color: var(--text-2); }
#gate h1 { margin: 0; font-size: 27px; font-weight: 750; letter-spacing: -.03em; }
#gate p { margin: 0; max-width: 330px; font-size: 14.5px; color: var(--text-2); line-height: 1.55; }
#gate .btn { margin-top: 22px; flex: 0 0 auto; padding: 15px 30px; font-size: 16px; border-radius: var(--radius); }
#gate .link { background: none; color: var(--accent-l); font-size: 13.5px; padding: 10px; font-weight: 600; }

/* ===== Info-Fenster ===== */
#infobox { padding: calc(env(safe-area-inset-top) + 16px) 18px calc(env(safe-area-inset-bottom) + 30px); gap: 4px; }
#infobox .row { display: flex; gap: 9px; align-items: center; margin-bottom: 6px; }
#info-body h3 { font-size: 14px; margin: 18px 0 6px; color: var(--accent-l); letter-spacing: -.01em; }
#info-body p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.6; color: var(--text-2); }
#info-body code {
  font-size: 12px; background: var(--surface-2); padding: 1px 5px;
  border-radius: 4px; font-family: ui-monospace, Menlo, monospace;
}
#info-body .park-item { margin-bottom: 6px; }

.switch-row {
  display: flex; align-items: flex-start; gap: 14px; justify-content: space-between;
  background: var(--surface-2); border-radius: var(--radius);
  padding: 14px 16px; margin: 0 0 10px; font-size: 13.5px; line-height: 1.5;
}
.switch-row .sw-note { font-size: 12.5px; color: var(--text-2); }
.switch-row input[type="checkbox"] {
  -webkit-appearance: none; appearance: none;
  flex: 0 0 auto; width: 51px; height: 31px; border-radius: 999px;
  background: var(--grey); position: relative; cursor: pointer;
  transition: background .25s ease; margin: 2px 0 0;
}
.switch-row input[type="checkbox"]::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 27px; height: 27px; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,.3); transition: transform .25s ease;
}
.switch-row input[type="checkbox"]:checked { background: var(--accent); }
.switch-row input[type="checkbox"]:checked::after { transform: translateX(20px); }

/* ===== Ortssuche ===== */
#placebox { padding: calc(env(safe-area-inset-top) + 16px) 18px 18px; gap: 12px; }
#placebox .row { display: flex; gap: 9px; align-items: center; }
#place-input {
  flex: 1; padding: 14px 15px; border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--line); font-size: 16px; font-family: inherit;
  -webkit-appearance: none;
}
#place-input:focus { outline: 2px solid var(--accent); outline-offset: 0; }
#place-results { overflow-y: auto; flex: 1; }

/* ===== Karte ===== */
.leaflet-container { background: var(--surface-2); font-family: inherit; }
.leaflet-control-attribution {
  background: rgba(0,0,0,.55) !important; color: #ddd !important;
  font-size: 9px !important; padding: 2px 6px !important;
}
[data-theme="light"] .leaflet-control-attribution { background: rgba(255,255,255,.78) !important; color: #333 !important; }
.leaflet-control-attribution a { color: var(--accent-l) !important; }
/* Leaflets Controls liegen bei z-index 1000 und lagen damit UEBER dem
   Blatt (950) - die Attribution schimmerte mitten durch die Liste.
   Sie gehoert zur Karte, also unter das Blatt. */
.leaflet-bottom, .leaflet-control-attribution { z-index: 800 !important; }

.pin {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--accent);
  font-size: 16px; box-shadow: 0 3px 10px rgba(0,0,0,.5);
}
.pin.me  { background: var(--accent); border-color: #fff; }
.pin.act { background: var(--accent); border-color: #fff; transform: scale(1.18); }
.pin.park { border-color: #0A84FF; font-size: 15px; }
.pin.haslogo { background: #fff; padding: 4px; }
.pin.haslogo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.leaflet-popup-content-wrapper { background: var(--surface); color: var(--text); border-radius: var(--radius-sm); }
.leaflet-popup-tip { background: var(--surface); }
.leaflet-popup-content { margin: 11px 13px; font-size: 13px; line-height: 1.45; }

/* ===== Fehler ===== */
.errbox { margin: 12px 14px; padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--red); background: rgba(255,59,48,.10); }
.errbox .t { font-weight: 700; font-size: 14.5px; color: var(--red); margin-bottom: 5px; }
.errbox .m { font-size: 13px; line-height: 1.55; opacity: .92; }
.errbox .btn-row { margin-top: 12px; }
.errbox .btn { background: var(--red); }

:focus-visible { outline: 2px solid var(--accent-l); outline-offset: 2px; }