/* ---------------------------------------------------------------------------
   WannaMeet — Trefft euch genau in der Mitte
   Design tokens ported verbatim from the Claude Design prototype.
--------------------------------------------------------------------------- */

:root {
  --ink: #16181d;
  --ink-2: #2b2e35;
  --green: #1f6f5c;
  --green-d: #1a5e4e;
  --muted: #9aa0a7;
  --muted-2: #8a9098;
  --label: #6b7280;
  --line: #eef0f1;
  --line-2: #e4e7e9;
  --chip: #f1f2f4;
  --map-bg: #e8ecef;

  /* Safe-area insets. On the web and on Apple devices these come straight from
     the OS through env(). The native shell can additionally measure the real
     system-bar heights and feed them in as --ins-* (CSS px) — needed because a
     full-screen (edge-to-edge) WebView draws behind the status bar and the
     navigation/gesture bar, yet only reports display cutouts through env().
     max() keeps whichever is larger, so bottom controls clear the
     navigation/gesture bar when it's shown and drop back down when it's
     hidden, and top controls always clear the status bar. */
  --safe-top: max(env(safe-area-inset-top), var(--ins-top, 0px));
  --safe-bottom: max(env(safe-area-inset-bottom), var(--ins-bottom, 0px));
  --safe-left: max(env(safe-area-inset-left), var(--ins-left, 0px));
  --safe-right: max(env(safe-area-inset-right), var(--ins-right, 0px));
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: 'Instrument Sans', system-ui, sans-serif;
  color: var(--ink);
}
a { color: var(--green); text-decoration: none; }
a:hover { color: #164f42; }
[hidden] { display: none !important; }

.mg-root {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

/* Inline-SVG-Icons (Lucide) – erben Textgröße und -farbe, ersetzen die Emojis. */
.mg-ico {
  width: 1em; height: 1em; flex: none;
  display: inline-block; vertical-align: -0.15em;
}
.mg-map { position: absolute; inset: 0; z-index: 1; }

/* ---------- Leaflet overrides ---------- */
.mg-divicon { background: transparent !important; border: none !important; }
.leaflet-container { font-family: 'Instrument Sans', system-ui, sans-serif; background: var(--map-bg); }
.leaflet-control-zoom { border: none !important; box-shadow: 0 4px 14px rgba(0,0,0,.12) !important; border-radius: 12px !important; overflow: hidden; }
.leaflet-control-zoom a { border: none !important; color: var(--ink) !important; background: #fff !important; width: 34px; height: 34px; line-height: 34px; }
.leaflet-control-zoom a:hover { background: #f4f5f6 !important; }
.leaflet-control-attribution { font: 400 10px 'Instrument Sans', sans-serif; background: rgba(255,255,255,.7) !important; }
/* Leaflet pins its control corners to the map edges (bottom/right: 0). On the
   native edge-to-edge shell that puts the zoom control and attribution behind
   the system bars, so fold the safe-area insets in here too. No-op on the web
   (env()=0, --ins-* unset → 0px). */
.leaflet-top { top: var(--safe-top); }
.leaflet-bottom { bottom: var(--safe-bottom); }
.leaflet-left { left: var(--safe-left); }
.leaflet-right { right: var(--safe-right); }

/* ---------- distance / route labels ---------- */
.mg-dist-label {
  transform: translate(-50%, -50%);
  display: inline-block;
  background: #fff;
  color: var(--c, #16181d);
  border: 1.5px solid var(--c, #e4e7e9);
  font: 700 10.5px 'Instrument Sans', sans-serif;
  padding: 2px 7px;
  border-radius: 20px;
  white-space: nowrap;
  box-shadow: 0 2px 7px rgba(0,0,0,.16);
}
/* arrival-station callout – sits just above the station dot */
.mg-station-label { transform: translate(-50%, calc(-100% - 9px)); max-width: 180px; overflow: hidden; text-overflow: ellipsis; }

/* ---------- „Mindmap"-Callout: Labels weichen dem Mittelpunkt aus ----------
   Ein Label liegt sonst genau auf seinem Punkt (z. B. der Ankunfts-Haltestelle
   dicht an der Mitte). Der Callout schiebt das Label eine feste Pixel-Distanz
   nach außen und verbindet es per dünner Linie mit dem Punkt – so bleibt der
   Mittelpunkt frei. Der Container ist an den Punkt geheftet (0×0), Linie und
   Pill sind rein pixelbasiert und darum in jeder Zoomstufe gleich groß. */
.mg-callout { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.mg-callout-dot {
  position: absolute; left: -3.5px; top: -3.5px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--c, #1f6f5c);
  box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(0,0,0,.3);
}
.mg-callout-line {
  position: absolute; left: 0; top: 0; height: 0;
  border-top: 1.5px dashed var(--c, #1f6f5c); opacity: .6; transform-origin: 0 0;
}
.mg-callout-pill { position: absolute; }
.mg-callout-pill .mg-dist-label { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }

/* ---------- scrollbars ---------- */
.mg-scroll::-webkit-scrollbar { width: 8px; }
.mg-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,.14); border-radius: 8px; }

/* ---------- animations ---------- */
@keyframes mgpulse { 0% { transform: scale(.55); opacity: .75; } 100% { transform: scale(1.9); opacity: 0; } }
/* „Atmen" des Treffpunkt-Pins – skaliert sanft vom Nadel-Fuß aus, sodass die
   Spitze exakt auf dem Ort stehen bleibt (transform-origin am Marker gesetzt). */
@keyframes mgbreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) {
  .mg-venue-icon svg { animation: none !important; }
  .mg-venue-icon [style*="mgpulse"] { animation: none !important; }
}
@keyframes mgspin  { to { transform: rotate(360deg); } }
@keyframes mgfade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes mgpop   { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes mgslide { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes mgdrop  { 0% { opacity: 0; transform: translateY(-8px); } 100% { opacity: 1; transform: none; } }

.mg-spin { animation: mgspin .8s linear infinite; }
.mg-spin-lg { animation: mgspin .9s linear infinite; margin-bottom: 16px; }

/* ---------- shared card ---------- */
.mg-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 34px rgba(20,22,26,.14), 0 1px 0 rgba(0,0,0,.03);
  overflow: hidden;
}

/* ---------- logo ---------- */
.mg-logo {
  position: fixed; left: 20px; top: calc(18px + var(--safe-top)); z-index: 600;
  display: flex; flex-direction: column; gap: 1px; pointer-events: none;
}
.mg-logo-row { display: flex; align-items: center; gap: 9px; }
/* Eingeloggt + im WannaMeet: das Logo wird zum Heimweg (JS setzt .is-link). */
.mg-logo-row.is-link { pointer-events: auto; cursor: pointer; }
.mg-logo-row.is-link:hover { opacity: .82; }
.mg-logo-mark {
  width: 30px; height: 30px; border-radius: 9px; background: var(--ink);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.mg-logo-img {
  width: 34px; height: 34px; border-radius: 9px; object-fit: cover;
  box-shadow: 0 4px 14px rgba(0,0,0,.18); display: block;
}
.mg-logo-word {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 22px;
  letter-spacing: -.02em; line-height: 1; color: var(--ink);
}
.mg-logo-word span { color: var(--green); }
.mg-logo-tag { padding-left: 39px; font-size: 11.5px; color: var(--muted-2); font-weight: 500; letter-spacing: .01em; }

/* ---------- top bar (language + auth) ---------- */
.mg-top-bar {
  position: fixed; left: 18px; bottom: calc(24px + var(--safe-bottom)); z-index: 600;
  display: flex; align-items: center; gap: 8px;
}
.mg-lang {
  display: flex; background: #fff; border-radius: 11px; padding: 3px;
  box-shadow: 0 6px 20px rgba(20,22,26,.14);
}
.mg-lang-btn {
  border: none; background: transparent; border-radius: 8px; cursor: pointer;
  font-family: 'Instrument Sans', sans-serif; font-weight: 700; font-size: 12px;
  color: var(--muted-2); padding: 6px 11px; transition: all .15s;
}
.mg-lang-btn.is-active { background: var(--ink); color: #fff; }

.mg-auth-btn {
  display: flex; align-items: center; gap: 6px; border: none;
  background: #fff; color: var(--ink); font-family: 'Instrument Sans', sans-serif;
  font-weight: 600; font-size: 12.5px; padding: 7px 12px; border-radius: 11px;
  cursor: pointer; transition: all .15s; box-shadow: 0 6px 20px rgba(20,22,26,.14);
  position: relative;
}
.h-auth-btn:hover { background: #f6f7f8; }

/* Benachrichtigungs-Badge unten links am Konto-Button (Einladungen) */
.mg-auth-badge {
  position: absolute; left: -5px; bottom: -5px; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 9px; background: #e0533b; color: #fff;
  border: 2px solid #fff; box-sizing: border-box;
  font-family: 'Instrument Sans', sans-serif; font-weight: 700; font-size: 10.5px;
  line-height: 14px; text-align: center; box-shadow: 0 2px 6px rgba(20,22,26,.2);
}

.mg-profile-badge {
  margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: #e0533b; color: #fff; box-sizing: border-box;
  font-weight: 700; font-size: 10.5px; line-height: 18px; text-align: center;
}

/* Einladungen-Liste (Benachrichtigungen) */
.mg-invites-list { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; margin-top: 6px; }
.mg-invites-empty { padding: 22px 4px; text-align: center; color: var(--muted-2); font-size: 13px; }
.mg-invite-item {
  display: flex; align-items: center; gap: 12px; padding: 11px 12px;
  border: 1px solid var(--line-2); border-radius: 12px; background: #fff;
}
.mg-invite-item.is-unread { border-color: #cfe4dc; background: #f5faf8; }
.mg-invite-body { flex: 1; min-width: 0; }
.mg-invite-title { font-weight: 700; font-size: 13.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mg-invite-from { font-size: 12px; color: var(--muted-2); margin-top: 2px; }
.mg-invite-open {
  flex: none; border: none; background: var(--ink); color: #fff; cursor: pointer;
  font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 12.5px;
  padding: 8px 14px; border-radius: 10px; transition: background .15s;
}
.mg-invite-open:hover { background: #2a2d33; }
.mg-invite-msg { margin-top: 9px; font-size: 12.5px; border-radius: 9px; padding: 9px 11px; }
.mg-invite-msg.is-ok { background: #eef6f2; color: var(--green-d); }
.mg-invite-msg.is-err { background: #f7e9e5; color: #b0492c; }

.mg-profile-menu {
  position: absolute; bottom: calc(100% + 6px); right: 0; background: #fff; border-radius: 11px;
  box-shadow: 0 6px 20px rgba(20,22,26,.14); overflow: hidden; min-width: 160px;
  animation: mgdrop .2s ease;
}
.mg-profile-item {
  display: flex; align-items: center; gap: 8px; width: 100%; border: none;
  background: transparent; padding: 10px 12px; cursor: pointer;
  font-family: 'Instrument Sans', sans-serif; font-size: 12.5px; color: var(--ink);
  text-align: left; transition: background .15s;
}
.mg-profile-item:hover { background: #f1f2f4; }
.mg-profile-item svg { flex: none; }

/* ---------- historie: meine WannaMeets ---------- */
.mg-history-toolbar { display: flex; justify-content: flex-end; margin-top: 12px; }
.mg-history-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border: 1px solid var(--line-2); background: #fff;
  border-radius: 20px; cursor: pointer; font-family: 'Instrument Sans', sans-serif;
  font-weight: 600; font-size: 12px; color: var(--label); transition: all .15s;
}
.mg-history-toggle .mg-ico { width: 14px; height: 14px; }
.mg-history-toggle:hover { border-color: #d0d4d7; background: #f6f7f8; }
.mg-history-toggle.is-on { background: var(--green); color: #fff; border-color: var(--green); }
.mg-history-body { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.mg-history-item {
  display: flex; align-items: stretch; width: 100%; overflow: hidden;
  border: 1px solid var(--line-2); background: #fff; border-radius: 13px;
  font-family: 'Instrument Sans', sans-serif; transition: border-color .15s;
}
.mg-history-item.is-current { border-color: var(--green); }
.mg-history-open {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px;
  padding: 12px 13px; cursor: pointer; text-align: left;
  background: transparent; border: none; font-family: inherit; color: inherit;
  transition: background .15s;
}
.mg-history-open:hover { background: #f6f7f8; }
.mg-history-act {
  flex: none; width: 46px; display: flex; align-items: center; justify-content: center;
  border: none; border-left: 1px solid var(--line-2); background: transparent;
  color: var(--muted-2); cursor: pointer; font-size: 16px; transition: background .15s, color .15s;
}
.mg-history-act:hover { background: #f6f7f8; color: var(--ink); }
.mg-history-act:disabled { opacity: .5; cursor: default; }
.mg-history-act.is-danger:hover { background: #fdecea; color: #b3261e; }
.mg-history-info { flex: 1; min-width: 0; }
.mg-history-name {
  font-weight: 600; font-size: 13.5px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mg-history-meta { margin-top: 2px; font-size: 11.5px; color: var(--muted-2); }
.mg-history-status {
  flex: none; font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 20px;
  background: #e9f0ed; color: var(--green);
}
.mg-history-status.is-closed { background: var(--chip); color: var(--muted-2); }
.mg-history-status.is-done { background: var(--chip); color: var(--muted-2); }
.mg-history-role {
  display: inline-block; margin-left: 7px; vertical-align: 1px;
  font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 20px;
  background: #ecebf5; color: #5a5f9e;
}
.mg-history-status.is-paused { background: #f5efe3; color: #946B2D; }
.mg-history-status.is-archived { background: #ecebf5; color: #5a5f9e; }
.mg-history-empty, .mg-history-loading { padding: 18px 4px; font-size: 12.5px; color: var(--muted-2); }

/* ---------- personen panel ---------- */
.mg-people-panel {
  position: fixed; right: 18px; top: calc(18px + var(--safe-top)); z-index: 600;
  width: 340px; max-width: calc(100vw - 36px);
}
/* User-Icon, hinter dem sich die Teilnehmerliste auf mobilen Screens
   versteckt – auf dem Desktop bleibt das Panel dauerhaft sichtbar. */
.mg-people-fab { display: none; }
.mg-people-head { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; padding: 14px 14px 12px 16px; }
.mg-people-title { display: flex; align-items: baseline; gap: 8px; flex: 0 1 auto; min-width: 0; }
.mg-people-title-main { font-weight: 600; font-size: 14.5px; }
.mg-people-count { font-size: 12px; color: var(--muted); font-weight: 600; }

/* Actions stay right-aligned; when the row can't hold title + actions they wrap
   onto a second line instead of overflowing the card edge (clipped button). */
.mg-people-actions { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; margin-left: auto; }

/* compact icon-only button (e.g. Admin) */
.mg-btn-icon {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 34px; height: 34px; border: 1.5px solid var(--line-2); background: #fff;
  color: var(--label); border-radius: 10px; cursor: pointer; transition: all .15s;
}
.h-btn-icon:hover { border-color: var(--green); color: var(--green); }
.mg-btn-share {
  display: flex; align-items: center; gap: 6px; border: 1.5px solid var(--line-2);
  background: #fff; color: var(--label); font-family: 'Instrument Sans', sans-serif;
  font-weight: 600; font-size: 12.5px; padding: 7px 11px; border-radius: 10px;
  cursor: pointer; transition: all .15s;
}
.h-btn-share:hover { border-color: var(--green); color: var(--green); }
.mg-btn-share.is-shared { background: #e8f2ee; border-color: transparent; color: var(--green-d); }

.mg-toast {
  position: fixed; left: 50%; bottom: calc(84px + var(--safe-bottom)); transform: translate(-50%, 12px);
  z-index: 1200; background: var(--ink); color: #fff; font-family: 'Instrument Sans', sans-serif;
  font-weight: 600; font-size: 12.5px; padding: 10px 16px; border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.28); opacity: 0; pointer-events: none;
  transition: opacity .22s, transform .22s; max-width: min(90vw, 420px); text-align: center;
}
.mg-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

.mg-btn-dark {
  display: flex; align-items: center; gap: 6px; border: none;
  background: var(--ink); color: #fff; font-family: 'Instrument Sans', sans-serif;
  font-weight: 600; font-size: 12.5px; padding: 8px 12px; border-radius: 10px;
  cursor: pointer; transition: transform .15s, background .15s;
}
.h-btn-dark:hover { background: var(--ink-2); transform: translateY(-1px); }

.mg-people-empty { padding: 6px 16px 18px; }
.mg-people-empty-box {
  border: 1.5px dashed #e2e5e8; border-radius: 12px; padding: 18px 14px;
  text-align: center; color: var(--muted); font-size: 12.5px; line-height: 1.5;
}
.mg-people-empty-box span { color: var(--ink); font-weight: 600; }

.mg-people-list { max-height: 44vh; overflow-y: auto; padding: 2px 12px 12px; }
.mg-person-row {
  display: flex; align-items: center; gap: 11px; padding: 9px 8px;
  border-radius: 11px; animation: mgdrop .28s ease both;
}
.mg-person-row:hover { background: #f6f7f8; }
.mg-person-avatar {
  flex: none; width: 30px; height: 30px; border-radius: 50%; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.mg-person-info { flex: 1; min-width: 0; }
.mg-person-name { font-weight: 600; font-size: 13px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mg-person-addr { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Privatsphäre-Modus: Schloss-Hinweis statt Adresse */
.mg-person-addr-private { display: flex; align-items: center; gap: 4px; font-style: italic; }
.mg-person-addr-private svg { flex: none; }
/* per-person ÖPNV arrival chip (transit mode): where this person gets off */
.mg-person-transit {
  display: flex; align-items: center; gap: 5px; margin-top: 3px;
  font-size: 11px; color: var(--green-d); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mg-person-transit-icon { flex: none; font-size: 11px; }
.mg-person-transit-txt { overflow: hidden; text-overflow: ellipsis; }
.mg-person-transit-txt b { font-weight: 700; }
.mg-person-transit-load { color: var(--muted-2); }
.mg-person-remove {
  flex: none; width: 26px; height: 26px; border: none; background: transparent;
  color: #b9bdc3; border-radius: 8px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.mg-person-remove:hover { background: #f0e3e0; color: #c2603d; }

/* Verkehrsmittel pro Person: Emoji-Toggle in der Zeile */
.mg-person-travel {
  flex: none; width: 28px; height: 28px; border: 1px solid var(--line-2); background: #fff;
  border-radius: 9px; cursor: pointer; font-size: 13px; line-height: 1; padding: 0;
  display: flex; align-items: center; justify-content: center; opacity: .55; transition: all .15s;
}
.mg-person-travel.is-set { opacity: 1; border-color: #cfe4dc; background: #f3faf7; }
.mg-person-travel:not(:disabled):hover { opacity: 1; border-color: var(--green); }
.mg-person-travel:disabled { cursor: default; }

/* Popup zur Verkehrsmittel-Auswahl (statt Durchtippen) */
.mg-travel-menu {
  position: fixed; z-index: 1200; min-width: 190px; padding: 5px;
  background: #fff; border: 1px solid var(--line-2); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(20,22,26,.18); animation: mgdrop .16s ease;
}
.mg-travel-menu-item {
  display: flex; align-items: center; gap: 9px; width: 100%; border: none;
  background: transparent; padding: 9px 10px; border-radius: 8px; cursor: pointer;
  font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 12.5px;
  color: var(--ink); text-align: left; transition: background .13s;
}
.mg-travel-menu-item:hover { background: #f1f2f4; }
.mg-travel-menu-item.is-active { background: #eef6f2; color: var(--green-d); }
.mg-travel-menu-ico {
  flex: none; width: 24px; height: 24px; font-size: 16px; display: flex;
  align-items: center; justify-content: center; color: var(--label);
}
.mg-travel-menu-item.is-active .mg-travel-menu-ico { color: var(--green-d); }
.mg-travel-menu-label { flex: 1; }

/* Verkehrsmittel-Auswahl im Personen-Dialog */
.mg-travel-seg { display: flex; gap: 8px; }
.mg-travel-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 42px; padding: 9px 8px; border: 1.5px solid var(--line-2); background: #fff;
  border-radius: 11px; cursor: pointer; font-family: 'Instrument Sans', sans-serif;
  font-weight: 600; font-size: 12.5px; color: var(--label); transition: all .15s;
}
.mg-travel-btn:hover { border-color: #d0d4d7; }
.mg-travel-btn.is-active { border-color: var(--green); background: #eef6f2; color: var(--green-d); }

/* ---------- action bar ---------- */
.mg-actionbar {
  position: fixed; left: 50%; bottom: calc(24px + var(--safe-bottom)); transform: translateX(-50%); z-index: 600;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  /* Never wider than the screen: on mid-width viewports (a tablet in the wide
     layout) the inner rows wrap instead of running "Let's meet." off the edge. */
  max-width: calc(100vw - 20px);
}
/* Options-Menü der Aktionsleiste: nur auf mobilen Screens (siehe Media Query) */
.mg-barmenu-btn { display: none; }
.mg-actionbar-inner {
  display: flex; align-items: center; gap: 10px; background: #fff;
  border-radius: 16px; box-shadow: 0 12px 34px rgba(20,22,26,.16); padding: 8px;
  /* Wrap "Let's meet." onto its own line rather than overflow when the row is
     wider than the (capped) bar. .mg-weight above already wraps. */
  flex-wrap: wrap; justify-content: center; max-width: 100%;
}
.mg-seg { display: flex; background: #f1f2f4; border-radius: 11px; padding: 3px; }
.mg-seg-btn {
  display: flex; align-items: center; gap: 6px; flex: none; padding: 7px 13px;
  border: none; background: transparent; border-radius: 9px;
  font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 12.5px;
  color: var(--muted-2); cursor: pointer; transition: all .18s;
}
.mg-seg-btn.is-active { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,.14); }

.mg-weight {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap; justify-content: center; background: #fff;
  border-radius: 20px; box-shadow: 0 6px 20px rgba(20,22,26,.12); padding: 5px 6px 5px 14px;
  max-width: 100%;
}
.mg-weight-label { font-size: 11.5px; font-weight: 600; color: var(--label); }
.mg-seg-sm { padding: 2px; }
.mg-seg-sm .mg-seg-btn { padding: 5px 12px; font-size: 12px; }

.mg-calc {
  display: flex; align-items: center; gap: 8px; flex: none; padding: 10px 18px;
  border: none; border-radius: 11px; font-family: 'Instrument Sans', sans-serif;
  font-weight: 600; font-size: 13.5px; cursor: pointer; transition: all .18s;
  background: var(--green); color: #fff; box-shadow: 0 8px 20px rgba(31,111,92,.30);
}
.h-calc:not(:disabled):hover { transform: translateY(-1px); }
.mg-calc:disabled { background: #eceef0; color: #b4b9be; cursor: not-allowed; box-shadow: none; }

.mg-hint {
  font-size: 11.5px; color: var(--muted-2); background: rgba(255,255,255,.85);
  padding: 4px 12px; border-radius: 20px; box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

/* ---------- results panel ---------- */
.mg-results {
  position: fixed; left: 18px; top: calc(96px + var(--safe-top)); bottom: calc(96px + var(--safe-bottom)); z-index: 590;
  width: 340px; max-width: calc(100vw - 36px);
  display: flex; flex-direction: column; background: #fff; border-radius: 18px;
  box-shadow: 0 14px 40px rgba(20,22,26,.18);
  animation: mgslide .3s cubic-bezier(.2,.8,.2,1) both; overflow: hidden;
}
.mg-results-head { padding: 16px 18px 12px; border-bottom: 1px solid var(--line); }
.mg-results-head-row { display: flex; align-items: center; justify-content: space-between; }
.mg-results-actions { display: flex; align-items: center; gap: 6px; }
/* Griff + Filter-Umschalter existieren nur auf mobilen Screens (siehe Media Query) */
.mg-results-grip { display: none; }
.mg-filtertoggle { display: none; }
.mg-results-title { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600; font-size: 16px; }
.mg-results-sub { font-size: 12px; color: var(--muted); margin-top: 3px; }
.mg-neu {
  border: none; background: #f1f2f4; color: var(--label); font-family: 'Instrument Sans', sans-serif;
  font-weight: 600; font-size: 11.5px; padding: 6px 10px; border-radius: 9px; cursor: pointer;
}
.h-neu:hover { background: #e8eaec; }

/* category switcher + filters inside results head */
.mg-catswitch { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.mg-catchip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px;
  border: 1px solid var(--line-2); background: #fff; border-radius: 20px; cursor: pointer;
  font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 12px; color: var(--label);
  transition: border-color .15s, background .15s;
}
.mg-catchip:hover { border-color: #d0d4d7; }
.mg-catchip.is-active { border-color: transparent; }
.mg-catchip-dot { width: 9px; height: 9px; border-radius: 50%; }

.mg-filterbar { display: flex; gap: 6px; margin-top: 10px; padding-bottom: 2px; overflow-x: auto; }
.mg-scroll-x::-webkit-scrollbar { height: 5px; }
.mg-scroll-x::-webkit-scrollbar-thumb { background: rgba(0,0,0,.12); border-radius: 8px; }
.mg-filterchip {
  flex: none; padding: 5px 11px; border: 1px solid var(--line-2); background: #fff;
  border-radius: 20px; cursor: pointer; font-family: 'Instrument Sans', sans-serif;
  font-weight: 600; font-size: 11.5px; color: var(--label); white-space: nowrap; transition: all .15s;
}
.mg-filterchip:hover { border-color: #d0d4d7; }
.mg-filterchip.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }

.mg-shops { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px 12px 12px; }
.mg-shop {
  display: flex; flex-wrap: wrap; width: 100%; text-align: left; align-items: center; gap: 12px;
  padding: 11px 12px; margin-bottom: 6px; border: 1px solid var(--line); background: #fff;
  border-radius: 13px; cursor: pointer; font-family: 'Instrument Sans', sans-serif;
  animation: mgdrop .3s ease both; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.mg-shop:hover { border-color: #d6dadd; box-shadow: 0 6px 16px rgba(0,0,0,.07); transform: translateY(-1px); }
.mg-shop-ico { flex: none; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.mg-shop-dot { width: 11px; height: 11px; border-radius: 50%; }
.mg-shop-info { flex: 1; min-width: 0; }
.mg-shop-name { font-weight: 600; font-size: 13.5px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mg-shop-sub { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mg-shop-dist { flex: none; font-size: 11px; color: var(--muted-2); font-weight: 600; background: #f5f6f7; padding: 4px 8px; border-radius: 20px; }
.mg-search-error { margin: 8px 4px 2px; font-size: 11px; color: #b08a3e; background: #fbf6ec; padding: 9px 12px; border-radius: 10px; line-height: 1.4; }

/* ---------- Ankündigungs-Banner (Laufschrift oben, aus der Admin-Konsole) ---------- */
.mg-announce {
  position: fixed; top: calc(16px + var(--safe-top)); left: 50%;
  transform: translateX(-50%); z-index: 640;
  display: flex; align-items: center; gap: 9px;
  /* Zentriert zwischen Logo (links) und Erstellen-Button (rechts). */
  width: min(520px, calc(100vw - 480px)); min-width: 240px;
  padding: 7px 7px 7px 13px; border-radius: 12px;
  background: var(--ink); color: #fff; cursor: pointer;
  box-shadow: 0 8px 24px rgba(20,22,26,.28);
  font-family: 'Instrument Sans', sans-serif; font-size: 12.5px; font-weight: 600;
}
.mg-announce.is-warn { background: #a84f22; }
.mg-announce-dot {
  flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: #6fe3b2; animation: mg-ann-pulse 1.8s ease infinite;
}
.mg-announce.is-warn .mg-announce-dot { background: #ffd27a; }
.mg-announce-viewport { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; }
.mg-announce-track { display: inline-block; white-space: nowrap; will-change: transform; }
/* Läuft der Text nicht rein, liegt er doppelt im Track (app.js) –
   translateX(-50%) loopt dadurch nahtlos. Kurze Texte stehen still. */
.mg-announce-track span { display: inline-block; }
.mg-announce.is-scrolling .mg-announce-track span { padding-right: 56px; }
.mg-announce.is-scrolling .mg-announce-track {
  animation: mg-ann-marquee var(--mg-ann-dur, 14s) linear infinite;
}
.mg-announce:hover .mg-announce-track { animation-play-state: paused; }
@keyframes mg-ann-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes mg-ann-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
@media (prefers-reduced-motion: reduce) {
  .mg-announce.is-scrolling .mg-announce-track { animation: none; }
  .mg-announce-dot { animation: none; }
}
.mg-announce-close {
  flex: none; border: none; width: 24px; height: 24px; border-radius: 8px;
  background: rgba(255,255,255,.16); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.mg-announce-close:hover { background: rgba(255,255,255,.3); }

/* Popup mit dem formatierten Volltext */
.mg-modal-announce { padding: 26px; width: min(480px, 92vw); max-height: 86vh; overflow-y: auto; }
.mg-announce-body { font-size: 13.5px; line-height: 1.6; color: var(--ink); overflow-wrap: break-word; }
.mg-announce-body p { margin: 0 0 10px; }
.mg-announce-body > :last-child { margin-bottom: 0; }
.mg-announce-body h3 {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600;
  font-size: 15.5px; letter-spacing: -.01em; margin: 14px 0 6px;
}
.mg-announce-body h3:first-child { margin-top: 0; }
.mg-announce-body ul { margin: 0 0 10px; padding-left: 20px; }
.mg-announce-body li { margin: 2px 0; }
.mg-announce-body a { color: var(--green); font-weight: 600; }

/* ---------- overlays / modals ---------- */
.mg-overlay {
  position: fixed; inset: 0; z-index: 1000; background: rgba(20,22,26,.36);
  backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center;
  animation: mgfade .2s ease;
}
/* The generic confirmation dialog can be triggered from within another modal
   (e.g. leaving a WannaMeet from the history list), so it must always stack
   above the overlay that opened it. */
#confirmModal { z-index: 1100; }
.mg-modal {
  background: #fff; border-radius: 20px; box-shadow: 0 26px 70px rgba(0,0,0,.3);
  animation: mgpop .3s cubic-bezier(.2,.8,.2,1) both;
}
.mg-modal-add       { padding: 26px 26px 24px; width: min(430px, 92vw); }
.mg-modal-auth      { padding: 26px; width: min(420px, 92vw); }
.mg-modal-settings  { padding: 26px; width: min(450px, 92vw); max-height: 86vh; overflow-y: auto; }
.mg-modal-forgot    { padding: 26px; width: min(420px, 92vw); }
.mg-modal-history   { padding: 26px; width: min(460px, 92vw); max-height: 86vh; overflow-y: auto; }
.mg-modal-reset     { padding: 26px; width: min(420px, 92vw); }
.mg-modal-admin     { padding: 26px; width: min(450px, 92vw); }
.mg-modal-access    { padding: 26px; width: min(400px, 92vw); }
.mg-modal-cat       { padding: 26px; width: min(480px, 93vw); }
.mg-modal-radius    { padding: 26px; width: min(440px, 92vw); }
.mg-modal-searching { padding: 38px 40px; width: min(360px, 90vw); text-align: center; }
.mg-modal-booking   { padding: 26px; width: min(440px, 92vw); }
.mg-modal-confirmed { padding: 28px 26px 24px; width: min(430px, 92vw); }
.mg-modal-delete    { padding: 26px; width: min(420px, 92vw); }
.mg-modal-confirm2  { padding: 26px; width: min(420px, 92vw); }
.mg-modal-block     { padding: 26px; width: min(420px, 92vw); }
.mg-modal-report    { padding: 26px; width: min(420px, 92vw); }
.mg-modal-invite    { padding: 26px; width: min(440px, 92vw); }
.mg-modal-invites   { padding: 26px; width: min(440px, 92vw); max-height: 86vh; overflow-y: auto; }

.mg-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.mg-modal-head-tight { margin-bottom: 5px; }
.mg-modal-title {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600; font-size: 20px; letter-spacing: -.01em;
  min-width: 0; overflow-wrap: break-word;
}
.mg-modal-close {
  flex: none; border: none; background: #f1f2f4; width: 30px; height: 30px; border-radius: 9px;
  cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--label);
}
.h-close:hover { background: #e8eaec; }
.mg-modal-sub { font-size: 12.5px; color: var(--muted); margin-bottom: 18px; }
.mg-modal-sub:empty { display: none; }  /* mgConfirm ohne Text: kein doppelter Abstand */
/* optionaler Zweit-Button in mgConfirm (z. B. Zahlungserinnerung) */
.mg-confirm-alt {
  width: 100%; margin-top: 10px; padding: 12px; border: 1.5px solid var(--line-2);
  background: #fff; border-radius: 13px; cursor: pointer; font-family: 'Instrument Sans', sans-serif;
  font-weight: 600; font-size: 13px; color: var(--label); transition: all .15s;
}
.mg-confirm-alt:hover:not(:disabled) { border-color: var(--green); color: var(--green); }
.mg-confirm-alt:disabled { cursor: default; opacity: .55; }
.mg-modal-sub-lg { margin-bottom: 24px; }
.mg-modal-sub b { color: var(--ink); font-weight: 600; }
.mg-modal-foot { margin-top: 11px; font-size: 11px; color: #a3a8ae; text-align: center; }

/* form fields */
.mg-label { display: block; font-size: 12px; font-weight: 600; color: var(--label); margin-bottom: 6px; }
.mg-input {
  width: 100%; border: 1.5px solid var(--line-2); border-radius: 11px; padding: 11px 13px;
  font-family: 'Instrument Sans', sans-serif; font-size: 14px; outline: none; transition: border-color .15s;
}
.h-input:focus { border-color: var(--green); }
.mg-geo-error { margin-top: 10px; font-size: 12px; color: #c2603d; background: #f7ebe7; padding: 9px 12px; border-radius: 10px; }
.mg-submit {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  margin-top: 18px; padding: 13px; border: none; background: var(--ink); color: #fff;
  border-radius: 13px; cursor: pointer; font-family: 'Instrument Sans', sans-serif;
  font-weight: 600; font-size: 14px; box-shadow: 0 8px 20px rgba(20,22,26,.20); transition: background .15s;
}
.mg-submit:not(.is-busy):hover { background: var(--ink-2); }
.mg-submit.is-busy { background: #5b8a7d; cursor: default; }

/* Adress-Autovervollständigung (Type-ahead via Photon/OSM) */
.mg-ac { position: relative; }
.mg-ac-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 5px); z-index: 30;
  background: #fff; border: 1.5px solid var(--line-2); border-radius: 12px;
  box-shadow: 0 14px 34px rgba(20,22,26,.16);
  max-height: 268px; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.mg-ac-item {
  display: flex; align-items: flex-start; gap: 9px; padding: 9px 12px;
  cursor: pointer; border-bottom: 1px solid var(--line); transition: background .12s;
}
.mg-ac-item:last-child { border-bottom: none; }
.mg-ac-item.is-active, .mg-ac-item:hover { background: #f4f7f6; }
.mg-ac-pin { flex: none; width: 15px; height: 15px; margin-top: 1px; color: var(--green); }
.mg-ac-text { min-width: 0; }
.mg-ac-line1 { font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mg-ac-line2 { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }

/* GPS-Knopf im Adressfeld: aktuelle Position → Adresse übernehmen */
.mg-ac.has-geo > .mg-input { padding-right: 44px; }
.mg-geo-btn {
  position: absolute; top: 1.5px; right: 1.5px; bottom: 1.5px; width: 40px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: none; cursor: pointer; padding: 0;
  color: var(--muted); border-radius: 0 10px 10px 0; transition: color .15s, background .15s;
}
.mg-geo-btn:hover { color: var(--green); background: #f4f7f6; }
.mg-geo-btn svg { width: 18px; height: 18px; }
.mg-geo-btn.is-busy { color: var(--green); cursor: default; }
.mg-geo-btn.is-busy svg { animation: mg-geo-pulse 1s ease-in-out infinite; }
@keyframes mg-geo-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.82); }
}

/* category grid */
.mg-cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mg-cat {
  display: flex; align-items: center; gap: 12px; padding: 15px 14px;
  border: 1.5px solid var(--line); background: #fff; border-radius: 14px; cursor: pointer;
  font-family: 'Instrument Sans', sans-serif; text-align: left; transition: all .15s;
}
.mg-cat-ico { flex: none; width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; }
.mg-cat-name { display: block; font-weight: 600; font-size: 14px; }
.mg-cat-desc { display: block; font-size: 11.5px; color: var(--muted); }
.h-cat-food:hover   { border-color: #c2603d; background: #fcf7f5; transform: translateY(-1px); }
.h-cat-sport:hover  { border-color: #3e6b8b; background: #f4f7f9; transform: translateY(-1px); }
.h-cat-coffee:hover { border-color: #7a5c3e; background: #f8f5f1; transform: translateY(-1px); }
.h-cat-shop:hover   { border-color: #7e5a78; background: #f7f4f7; transform: translateY(-1px); }
.mg-cat-none {
  display: flex; width: 100%; align-items: center; justify-content: center; gap: 8px;
  margin-top: 10px; padding: 13px; border: 1.5px solid var(--line); background: #fafbfb;
  border-radius: 14px; cursor: pointer; font-family: 'Instrument Sans', sans-serif;
  font-weight: 600; font-size: 13.5px; color: var(--label); transition: all .15s;
}
.h-cat-none:hover { border-color: #d6dadd; background: #f2f3f4; }

/* radius */
.mg-radius-value { text-align: center; margin-bottom: 18px; }
.mg-radius-num { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 44px; line-height: 1; letter-spacing: -.02em; }
.mg-radius-unit { font-size: 16px; color: var(--muted); font-weight: 600; margin-left: 4px; }
.mg-range { width: 100%; accent-color: var(--green); height: 6px; cursor: pointer; }
.mg-range-labels { display: flex; justify-content: space-between; font-size: 11px; color: #b0b5ba; margin-top: 6px; }
.mg-radius-actions { display: flex; gap: 10px; margin-top: 22px; }
.mg-back {
  flex: none; padding: 13px 18px; border: 1.5px solid var(--line-2); background: #fff;
  border-radius: 13px; cursor: pointer; font-family: 'Instrument Sans', sans-serif;
  font-weight: 600; font-size: 13.5px; color: var(--label);
}
.h-back:hover { background: #f6f7f8; }
.mg-confirm {
  flex: 1; padding: 13px; border: none; background: var(--green); color: #fff;
  border-radius: 13px; cursor: pointer; font-family: 'Instrument Sans', sans-serif;
  font-weight: 600; font-size: 13.5px; box-shadow: 0 8px 20px rgba(31,111,92,.28); transition: background .15s;
}
.h-confirm:hover { background: var(--green-d); }

/* searching */
.mg-searching-title { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600; font-size: 17px; margin-bottom: 5px; }
.mg-searching-sub { font-size: 12.5px; color: var(--muted); }

/* booking */
.mg-sel-card {
  display: flex; align-items: center; gap: 12px; padding: 13px; border: 1px solid var(--line);
  border-radius: 14px; margin-bottom: 18px; background: #fafbfb;
}
.mg-sel-ico { flex: none; width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; }
.mg-sel-dot { width: 12px; height: 12px; border-radius: 50%; }
.mg-sel-name { font-weight: 600; font-size: 14.5px; }
.mg-sel-sub { font-size: 11.5px; color: var(--muted); }
.mg-datetime { display: flex; gap: 12px; }
.mg-field { flex: 1; }
.mg-field .mg-input { padding: 10px 12px; }
.mg-confirm-dark {
  width: 100%; margin-top: 20px; padding: 14px; border: none; background: var(--ink); color: #fff;
  border-radius: 13px; cursor: pointer; font-family: 'Instrument Sans', sans-serif;
  font-weight: 600; font-size: 14px; box-shadow: 0 8px 20px rgba(20,22,26,.22); transition: background .15s;
}
.h-confirm-dark:hover { background: var(--ink-2); }

/* confirmed */
.mg-conf-check {
  width: 52px; height: 52px; border-radius: 16px; background: #e8f2ee;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;
}
.mg-conf-title { text-align: center; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 22px; letter-spacing: -.01em; margin-bottom: 4px; }
.mg-conf-sub { text-align: center; font-size: 12.5px; color: var(--muted); margin-bottom: 20px; }
.mg-conf-card { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; margin-bottom: 18px; }
.mg-conf-card-head { padding: 16px 18px; background: #fafbfb; border-bottom: 1px solid var(--line); }
.mg-conf-shop { font-weight: 700; font-size: 16px; font-family: 'Bricolage Grotesque', sans-serif; }
.mg-conf-shop-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.mg-conf-card-body { padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; }
.mg-conf-line { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.mg-conf-line span { font-weight: 600; }
.mg-conf-people { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.mg-conf-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.mg-conf-chip {
  display: inline-flex; align-items: center; gap: 5px; background: #f4f5f6;
  padding: 3px 9px 3px 6px; border-radius: 20px; font-size: 11.5px; font-weight: 600;
}
.mg-conf-chip-avatar {
  width: 14px; height: 14px; border-radius: 50%; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 8px;
}
.mg-conf-actions { display: flex; gap: 10px; }
.mg-cal-green {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px;
  background: var(--green); color: #fff; border-radius: 13px; font-family: 'Instrument Sans', sans-serif;
  font-weight: 600; font-size: 13px; box-shadow: 0 8px 20px rgba(31,111,92,.26); transition: background .15s;
}
.h-cal-green:hover { background: var(--green-d); color: #fff; }
.mg-cal-grey {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px;
  background: #f1f2f4; color: var(--ink); border-radius: 13px; font-family: 'Instrument Sans', sans-serif;
  font-weight: 600; font-size: 13px; transition: background .15s;
}
.h-cal-grey:hover { background: #e8eaec; color: var(--ink); }
.mg-reset {
  width: 100%; margin-top: 12px; padding: 11px; border: none; background: transparent;
  color: var(--muted); font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 12.5px; cursor: pointer;
}
.h-reset:hover { color: var(--ink); }

/* ---------- Terminfindung (scheduling) ---------- */
.mg-poll-alt {
  width: 100%; margin-top: 10px; padding: 12px; border: 1.5px solid var(--line-2);
  background: #fff; border-radius: 13px; cursor: pointer; font-family: 'Instrument Sans', sans-serif;
  font-weight: 600; font-size: 13px; color: var(--label); transition: all .15s;
}
.h-poll-alt:hover { border-color: var(--green); color: var(--green); }

.mg-poll-fab {
  position: fixed; left: 18px; bottom: calc(74px + var(--safe-bottom)); z-index: 595;
  display: flex; align-items: center; gap: 7px; border: none; cursor: pointer;
  background: var(--ink); color: #fff; font-family: 'Instrument Sans', sans-serif;
  font-weight: 600; font-size: 12.5px; padding: 9px 14px; border-radius: 22px;
  box-shadow: 0 8px 22px rgba(20,22,26,.22); transition: transform .15s;
}
.mg-poll-fab:hover { transform: translateY(-1px); }
.mg-poll-fab.is-closed { background: var(--green); box-shadow: 0 8px 22px rgba(31,111,92,.28); }

.mg-modal-poll { padding: 24px; width: min(460px, 93vw); max-height: 88vh; overflow-y: auto; }

.mg-slot-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.mg-slot-row .mg-input { padding: 9px 11px; }
.mg-slot-date { flex: 1.4; }
.mg-slot-time { flex: 1; }
.mg-slot-del {
  flex: none; width: 32px; height: 32px; border: none; background: #f1f2f4; color: var(--muted-2);
  border-radius: 9px; cursor: pointer; font-size: 18px; line-height: 1;
}
.mg-slot-del:hover { background: #f0e3e0; color: #c2603d; }
.mg-add-slot {
  width: 100%; margin: 4px 0 6px; padding: 10px; border: 1.5px dashed var(--line-2); background: #fafbfb;
  border-radius: 11px; cursor: pointer; font-family: 'Instrument Sans', sans-serif; font-weight: 600;
  font-size: 12.5px; color: var(--label);
}
.mg-add-slot:hover { border-color: #d0d4d7; }

.mg-vote-list { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.mg-vote-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 13px; flex-wrap: wrap;
}
.mg-vote-row.is-best { border-color: #bfe0d4; background: #f3faf7; }
.mg-vote-row.is-chosen { border-color: var(--green); background: #eef6f2; }
.mg-vote-when { flex: 1; min-width: 96px; }
.mg-vote-date { font-weight: 700; font-size: 13.5px; }
.mg-vote-time { font-size: 11.5px; color: var(--muted); }
.mg-vote-opts { display: flex; gap: 4px; }
.mg-vopt {
  border: 1px solid var(--line-2); background: #fff; border-radius: 9px; cursor: pointer;
  font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 11.5px; padding: 6px 9px;
  color: var(--label); transition: all .12s;
}
.mg-vopt-yes.is-on { background: #1f6f5c; border-color: #1f6f5c; color: #fff; }
.mg-vopt-maybe.is-on { background: #B08A3E; border-color: #B08A3E; color: #fff; }
.mg-vopt-no.is-on { background: #C2603D; border-color: #C2603D; color: #fff; }
.mg-tally { font-size: 11px; color: var(--muted-2); white-space: nowrap; }
.mg-tally b { color: var(--green); }
.mg-slot-final {
  border: none; background: #f1f2f4; color: var(--ink); border-radius: 9px; cursor: pointer;
  font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 11.5px; padding: 6px 10px;
}
.mg-slot-final:hover { background: var(--green); color: #fff; }
.mg-voters { margin-top: 12px; font-size: 12px; color: var(--muted-2); }

/* ---------- auth modal ---------- */
.mg-auth-tabs {
  display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid var(--line);
}
.mg-auth-tab {
  flex: 1; padding: 11px 0; border: none; background: transparent; color: var(--muted-2);
  font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 13px;
  cursor: pointer; transition: color .15s; border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.mg-auth-tab.is-active { color: var(--ink); border-bottom-color: var(--green); }

.mg-auth-form { animation: mgfade .2s ease; }
.mg-auth-form .mg-label { margin-top: 14px; }
.mg-auth-form .mg-label:first-of-type { margin-top: 0; }

.mg-auth-error {
  margin-top: 12px; font-size: 12px; color: #c2603d; background: #f7ebe7;
  padding: 10px 12px; border-radius: 10px; line-height: 1.4;
}

.mg-auth-link { text-align: center; margin-top: 14px; }
.mg-link {
  border: none; background: transparent; color: var(--green); cursor: pointer;
  font-family: 'Instrument Sans', sans-serif; font-size: 12px; text-decoration: underline;
  transition: color .15s;
}
.mg-link:hover { color: var(--green-d); }

/* ---------- third-party sign-in (Google / Microsoft / Apple) ---------- */
.mg-social { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; }
.mg-social-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  padding: 11px 14px; border: 1.5px solid var(--line-2); background: #fff; color: var(--ink);
  border-radius: 12px; cursor: pointer; font-family: 'Instrument Sans', sans-serif;
  font-weight: 600; font-size: 14px; transition: border-color .15s, background .15s, box-shadow .15s;
}
.mg-social-btn:hover { border-color: var(--line); background: #f7f9f8; box-shadow: 0 4px 12px rgba(20,22,26,.06); }
.mg-social-btn:active { background: #eef2f1; }
.mg-social-mark { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex: none; }
.mg-social-apple .mg-social-mark { color: #000; }
.mg-social-label { line-height: 1; }

.mg-social-divider {
  display: flex; align-items: center; gap: 12px; margin: 16px 0;
  color: var(--muted-2); font-size: 12px; font-weight: 600;
}
.mg-social-divider::before, .mg-social-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

/* connected accounts (settings) */
.mg-connected { display: flex; flex-direction: column; gap: 8px; }
.mg-connected-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1.5px solid var(--line); border-radius: 11px; font-size: 13.5px; font-weight: 600; color: var(--ink);
}
.mg-connected-empty { font-size: 12.5px; color: var(--muted); }

/* ---------- settings modal ---------- */
.mg-settings-section { margin-bottom: 22px; }
.mg-settings-section-title {
  font-weight: 600; font-size: 13px; color: var(--ink); margin-bottom: 12px; text-transform: uppercase;
  letter-spacing: .02em; color: var(--label);
}
.mg-settings-actions {
  display: flex; gap: 10px; margin-top: 24px;
}
.mg-submit { flex: 1; }
.mg-delete {
  flex: none; padding: 13px 18px; border: 1.5px solid #e8ccc0; background: #fff;
  border-radius: 13px; cursor: pointer; font-family: 'Instrument Sans', sans-serif;
  font-weight: 600; font-size: 13.5px; color: #c2603d; transition: all .15s;
}
.mg-delete:hover { border-color: #d4b0a0; background: #faf7f5; }

/* ---------- lock / result overlay (pause frost, end result) ---------- */
.mg-lock {
  position: fixed; inset: 0; z-index: 900;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  animation: mgfade .25s ease;
}
/* frosted glass: paused input or "no result reached" */
.mg-lock.is-frost {
  background: rgba(232, 236, 239, .55);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
}
/* result: dim, readable backdrop */
.mg-lock.is-result {
  background: rgba(20, 22, 26, .5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.mg-lock-card {
  background: #fff; border-radius: 20px; box-shadow: 0 26px 70px rgba(0,0,0,.3);
  padding: 30px 30px 26px; width: min(440px, 92vw); text-align: center;
  animation: mgpop .3s cubic-bezier(.2,.8,.2,1) both;
}
.mg-lock-ico {
  width: 54px; height: 54px; border-radius: 16px; margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
}
.mg-lock-ico.is-pause { background: #eef1f4; color: #6b7280; }
.mg-lock-ico.is-none  { background: #f7ebe7; color: #c2603d; }
.mg-lock-ico.is-ok    { background: #e8f2ee; color: var(--green); }
.mg-lock-title { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 21px; letter-spacing: -.01em; margin-bottom: 8px; }
.mg-lock-sub { font-size: 13px; color: var(--muted); line-height: 1.5; }
.mg-lock-result { margin-top: 18px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; text-align: left; }
.mg-lock-result-head { padding: 15px 18px; background: #fafbfb; border-bottom: 1px solid var(--line); }
.mg-lock-result-name { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 17px; }
.mg-lock-result-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.mg-lock-result-body { padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; }
.mg-lock-line { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; }
.mg-lock-line svg { flex: none; color: var(--muted-2); }
.mg-lock-reopen {
  margin-top: 18px; padding: 11px 18px; border: 1.5px solid var(--line-2); background: #fff;
  border-radius: 12px; cursor: pointer; font-family: 'Instrument Sans', sans-serif;
  font-weight: 600; font-size: 13px; color: var(--label); transition: all .15s;
}
.mg-lock-reopen:hover { border-color: var(--green); color: var(--green); }
.mg-lock-actions { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.mg-lock-actions .mg-lock-reopen { margin-top: 0; }
.mg-lock-home {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 18px; border: none; border-radius: 12px; cursor: pointer;
  font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 13.5px;
  color: #fff; background: var(--green); box-shadow: 0 8px 20px rgba(31,111,92,.28);
  transition: background .15s;
}
.mg-lock-home:hover { background: var(--green-d); }

/* disabled compact/dark buttons */
.mg-btn-dark.is-disabled, .mg-btn-dark:disabled { opacity: .5; cursor: not-allowed; }
.mg-person-you { font-size: 10px; font-weight: 700; color: var(--green); background: #e8f2ee; padding: 1px 6px; border-radius: 10px; margin-left: 4px; vertical-align: middle; }

/* ---------- admin modal ---------- */
.mg-admin-controls { display: flex; gap: 10px; flex-wrap: wrap; }
.mg-admin-toggle {
  flex: 1 1 92px; min-width: 92px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px; border: 1.5px solid var(--line-2); background: #fff;
  border-radius: 13px; cursor: pointer; font-family: 'Instrument Sans', sans-serif;
  font-weight: 600; font-size: 13px; color: var(--label); transition: all .15s;
}
.mg-admin-toggle:hover { border-color: #d0d4d7; background: #f6f7f8; }
.mg-admin-toggle.is-on { background: var(--green); color: #fff; border-color: var(--green); }

/* ---------- result cards: rating / open-state / address / votes ---------- */
.mg-results-hint {
  margin-top: 10px; font-size: 11.5px; line-height: 1.45; color: var(--green-d);
  background: #eef6f2; border-radius: 10px; padding: 8px 11px;
}
.mg-shop-meta {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  font-size: 11px; color: var(--muted-2); margin-top: 3px; min-width: 0;
}
.mg-dotsep { color: #cfd3d7; }
.mg-shop-rating { color: #b08a3e; font-weight: 700; white-space: nowrap; }
.mg-shop-rcount { color: var(--muted); font-weight: 500; }
.mg-shop-open { color: var(--green); font-weight: 600; white-space: nowrap; }
.mg-shop-closed { color: #c2603d; font-weight: 600; white-space: nowrap; }
.mg-shop-addr { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.mg-shop-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.mg-shop-heart { color: #c2603d; font-size: 14px; line-height: 1; }
.mg-shop.is-voted { border-color: #e5b9a8; background: #fdf8f6; }
.mg-vote-chips { display: flex; gap: 3px; margin-top: 5px; flex-wrap: wrap; }
.mg-vote-ava {
  width: 18px; height: 18px; border-radius: 50%; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 700; border: 1.5px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.22);
}

/* ---------- docked stage panel (Terminwahl / finales Treffen) ----------
   The map stays fully visible – no blurred backdrop. Desktop: docked right.
   Mobile: bottom sheet. */
.mg-stage {
  position: fixed; right: 18px; bottom: calc(24px + var(--safe-bottom)); z-index: 640;
  width: min(410px, calc(100vw - 36px));
  max-height: min(80vh, 700px);
  display: flex; flex-direction: column; gap: 12px;
  background: #fff; border-radius: 18px; padding: 20px 20px 16px;
  box-shadow: 0 14px 44px rgba(20,22,26,.20);
  animation: mgpop .3s cubic-bezier(.2,.8,.2,1) both;
  overflow-y: auto;
}
.mg-stage.is-final { width: min(660px, calc(100vw - 36px)); }

/* Vergrößertes Terminvoting: ein Klick holt die Tabelle groß in die Mitte.
   animation:none, damit translateX nicht vom mgpop-Endzustand überschrieben wird. */
.mg-stage.is-expanded {
  animation: none;
  left: 50%; right: auto; transform: translateX(-50%);
  top: calc(24px + var(--safe-top)); bottom: calc(24px + var(--safe-bottom));
  width: min(760px, calc(100vw - 36px));
  max-height: none;
  padding: 26px 26px 20px;
}
.mg-stage.is-expanded .mg-stage-title { font-size: 24px; }
.mg-stage.is-expanded .mg-poll-day { min-width: 68px; }
.mg-stage.is-expanded .mg-poll-dnum { font-size: 21px; }
.mg-stage.is-expanded .mg-poll-cell { height: 58px; }
.mg-stage.is-expanded .mg-vmark { width: 30px; height: 30px; }
.mg-stage.is-expanded .mg-poll-person { min-width: 150px; }

/* Terminfindung: das gedockte Panel darf rechts die volle Höhe nutzen, statt
   gedrungen unten rechts zu kleben. Die Slot-Liste (flex:1) füllt und scrollt.
   Nur Desktop; das mobile Bottom-Sheet und der Vergrößern-Modus bleiben. */
@media (min-width: 701px) {
  .mg-stage.is-dates:not(.is-expanded) {
    top: calc(16px + var(--safe-top));
    max-height: none;
    width: min(452px, calc(100vw - 36px));
  }
  /* Slot-Liste in natürlicher Höhe (scrollt bei vielen Terminen); die Antwort-
     + Aktionszeile wird ans untere Ende geschoben, damit die Höhe sauber
     genutzt wird statt eine gestreckte Liste mit Leerraum zu zeigen. */
  .mg-stage.is-dates:not(.is-expanded) .mg-date-list { flex: 0 1 auto; }
  .mg-stage.is-dates:not(.is-expanded) .mg-answer-as { margin-top: auto; }
}

/* people panel, action bar + poll fab step aside while a stage is docked */
body.mg-stage-open .mg-people-panel,
body.mg-stage-open .mg-actionbar,
body.mg-stage-open .mg-poll-fab { display: none; }

/* ---------------------------------------------------------------------------
   Reine Terminfindung (kind 'termin'): keine Karte, kein Ort, kein Mittelpunkt –
   nur die Terminabstimmung im Vollbild. Die Body-Klasse mg-kind-termin blendet
   die Kartenkacheln und alle Karten-Bedienelemente aus; die Leaflet-Attribution
   (Impressum/Datenschutz) bleibt erreichbar. Das Stage-Panel wird zur zentralen
   Vollbildfläche für alle Phasen (Einrichtung → Voting → Endcard → Kosten).
--------------------------------------------------------------------------- */
/* Kacheln, Marker & Zoom weg – ein ruhiger Verlauf ersetzt die Karte. Der
   Karten-Container behält seine Größe (die Attribution bleibt unten sichtbar). */
body.mg-kind-termin .leaflet-tile-pane,
body.mg-kind-termin .leaflet-overlay-pane,
body.mg-kind-termin .leaflet-marker-pane,
body.mg-kind-termin .leaflet-control-zoom { display: none; }
body.mg-kind-termin #map {
  background: radial-gradient(1100px 620px at 50% -8%, #eef0f7 0%, #e8eaf2 48%, #e2e4ee 100%);
}
/* Karten-Bedienelemente + Personen-Panel entfallen – hier zählt nur der Termin. */
body.mg-kind-termin .mg-actionbar,
body.mg-kind-termin .mg-people-panel,
body.mg-kind-termin .mg-people-fab,
body.mg-kind-termin .mg-poll-fab { display: none !important; }

/* Das Stage-Panel rückt groß in die Mitte (wie der Vergrößern-Modus). Über die
   #stagePanel-ID gewinnen diese Regeln gegen die kind-neutralen .mg-stage.is-*
   Varianten; animation:none, damit das mgpop-Endbild translateX(-50%) nicht
   überschreibt. */
body.mg-kind-termin #stagePanel {
  animation: none;
  left: 50%; right: auto; transform: translateX(-50%);
  top: calc(20px + var(--safe-top)); bottom: calc(20px + var(--safe-bottom));
  width: min(720px, calc(100vw - 32px));
  max-height: none;
  padding: 26px 26px 20px;
}
/* Der Vergrößern-Umschalter ist im ohnehin großen Vollbild überflüssig. */
body.mg-kind-termin #stageExpandBtn { display: none; }
/* Einrichtungs-/Warte-Karte: mittig, ruhig zentriert. */
body.mg-kind-termin #stagePanel.is-setup { justify-content: center; text-align: center; }
body.mg-kind-termin #stagePanel.is-setup .mg-stage-head { flex-direction: column; align-items: center; gap: 14px; }
body.mg-kind-termin #stagePanel.is-setup .mg-stage-title { font-size: 24px; }
body.mg-kind-termin #stagePanel.is-setup > .mg-stage-head > .mg-stage-share,
body.mg-kind-termin #stagePanel.is-setup > .mg-stage-head > .mg-stage-headbtns { position: absolute; top: 20px; right: 20px; }

.mg-stage-head { display: flex; align-items: flex-start; gap: 12px; }
.mg-stage-head > div:first-of-type { flex: 1; min-width: 0; }
/* Köpfe mit Badge (Häkchen/Banknote/Smiley): dort ist das Badge das erste
   <div> und würde von der flex:1-Regel oben auf 0 gequetscht, sobald der
   Text daneben lang ist – Badge fixieren, stattdessen flext der Textblock. */
.mg-stage-head > div.mg-stage-check { flex: none; }
.mg-stage-head > .mg-stage-check + div { flex: 1; min-width: 0; }
.mg-stage-head.is-center { align-items: center; }
.mg-stage-kicker {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--green); margin-bottom: 3px;
}
.mg-stage-title { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 20px; letter-spacing: -.01em; }
.mg-stage-sub { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-top: -4px; }
.mg-stage-sub b { color: var(--ink); }
.mg-stage-host { font-size: 13px; color: var(--muted-2); margin-top: 2px; }
.mg-stage-host b { color: var(--ink); }
.mg-stage-check {
  flex: none; width: 42px; height: 42px; border-radius: 13px; background: #e8f2ee;
  display: flex; align-items: center; justify-content: center;
}
.mg-stage-share {
  flex: none; width: 34px; height: 34px; border: 1.5px solid var(--line-2); background: #fff;
  color: var(--label); border-radius: 10px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all .15s;
}
.mg-stage-share:hover { border-color: var(--green); color: var(--green); }
/* Pausierte Session: das Zahnrad trägt den Hinweis, sonst sähe der Admin im
   Vollbild-Panel gar nicht, dass die Gäste gerade gesperrt sind. */
.mg-stage-share.is-paused { border-color: #e0b070; color: #b3762a; background: #fdf6ea; }
.mg-stage-share.is-paused:hover { border-color: #b3762a; color: #8c5a17; }
/* Mehrere Kopf-Knöpfe (Zahnrad + Teilen) rücken als eine Gruppe zusammen. */
.mg-stage-headbtns { flex: none; display: flex; align-items: center; gap: 8px; }

.mg-stage-venue {
  display: flex; align-items: center; gap: 11px; padding: 11px 12px;
  border: 1px solid var(--line); border-radius: 13px; background: #fafbfb;
}
.mg-stage-venue-ico { flex: none; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.mg-stage-venue-info { min-width: 0; }
.mg-stage-venue-name { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mg-stage-venue-sub { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- date voting: a clear people × dates availability matrix ---------- */
/* the panel itself scrolls – its blocks keep their natural height so the venue
   summary and cards never get squeezed by the flex column */
.mg-stage.is-dates > * { flex: none; }
/* venue + participant summary card above the grid */
.mg-poll-venue { border: 1px solid var(--line); border-radius: 14px; background: #fafbfb; overflow: hidden; }
.mg-poll-venue-top { display: flex; align-items: center; gap: 11px; padding: 12px 14px; }
.mg-poll-parts {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted-2);
}
.mg-poll-parts .mg-ico { width: 15px; height: 15px; color: var(--green); flex: none; }
.mg-poll-parts b { color: var(--ink); font-weight: 700; white-space: nowrap; }
.mg-poll-parts span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mg-poll-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted-2); }
.mg-poll-meta .mg-ico { width: 13px; height: 13px; vertical-align: -2px; }

/* horizontal scroll for lots of dates; first column stays put */
.mg-poll-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; -webkit-overflow-scrolling: touch; }
.mg-poll-grid { border-collapse: separate; border-spacing: 0; width: 100%; }
.mg-poll-grid th, .mg-poll-grid td { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.mg-poll-grid tr > *:last-child { border-right: none; }
.mg-poll-grid tbody tr:last-child > * { border-bottom: none; }

/* sticky first column (month label + person names) */
.mg-poll-corner, .mg-poll-person { position: sticky; left: 0; z-index: 2; background: #fff; }
.mg-poll-corner {
  min-width: 108px; text-align: left; padding: 10px 12px; vertical-align: bottom;
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 12.5px;
  color: var(--muted-2); line-height: 1.2; background: #f7f8f9;
}

/* date column headers – weekday / day number / month, stacked */
.mg-poll-day {
  min-width: 56px; padding: 9px 4px 8px; text-align: center; background: #f7f8f9;
  display: table-cell; position: relative;
}
.mg-poll-day.is-pick { cursor: pointer; }
.mg-poll-dow { display: block; font-size: 10.5px; font-weight: 600; color: var(--muted-2); text-transform: uppercase; letter-spacing: .02em; }
.mg-poll-dnum { display: block; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 18px; color: var(--ink); line-height: 1.15; }
.mg-poll-mon { display: block; font-size: 10.5px; color: var(--muted-2); }
.mg-poll-time { display: block; font-size: 9.5px; color: var(--muted); margin-top: 1px; }
.mg-poll-warn { position: absolute; top: 4px; right: 4px; color: #c2603d; }
.mg-poll-warn .mg-ico { width: 12px; height: 12px; }

/* person rows */
.mg-poll-person { min-width: 120px; padding: 9px 12px; text-align: left; vertical-align: middle; }
.mg-poll-prow.is-me .mg-poll-person, .mg-poll-prow.is-me .mg-poll-cell { background: #f6fbf9; }
.mg-poll-pwrap { display: flex; align-items: center; gap: 9px; }
.mg-poll-av {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 30px; height: 30px; border-radius: 50%; color: #fff;
  font: 700 12.5px 'Instrument Sans', sans-serif;
}
.mg-poll-pname { min-width: 0; font-weight: 700; font-size: 13px; line-height: 1.25; color: var(--ink); }
.mg-poll-pname small { display: block; font-weight: 500; font-size: 11px; color: var(--muted-2); }

/* vote cells */
.mg-poll-cell { height: 50px; text-align: center; vertical-align: middle; }
.mg-poll-cell.is-me { cursor: pointer; }
.mg-poll-cell.is-me:hover .mg-vmark.is-none { border-color: var(--green); }
.mg-poll-cell.is-me:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }

/* best/selected column highlight */
.mg-poll-day.is-best { background: #e9f4ef; }
.mg-poll-day.is-best .mg-poll-dnum { color: var(--green-d); }
.mg-poll-day.is-best .mg-poll-dow, .mg-poll-day.is-best .mg-poll-mon { color: var(--green); }
.mg-poll-cell.is-best { background: #eff8f3; }
.mg-poll-prow.is-me .mg-poll-cell.is-best { background: #e6f4ec; }

/* availability marker */
.mg-vmark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; font-weight: 700;
}
.mg-vmark .mg-ico { width: 15px; height: 15px; }
.mg-vmark.is-yes { background: #e3f1ea; color: var(--green); }
.mg-vmark.is-maybe { background: #f6ecd6; color: #B08A3E; }
.mg-vmark.is-no { background: #f6e2da; color: #C2603D; }
.mg-vmark.is-none { width: 22px; height: 22px; border: 1.5px dashed var(--line-2); background: transparent; }
.mg-vtilde { font-size: 15px; line-height: 1; margin-top: -3px; }

/* legend under the grid */
.mg-poll-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; font-size: 12px; color: var(--muted-2); }
.mg-poll-legend span { display: inline-flex; align-items: center; gap: 6px; }
.mg-poll-legend .mg-vmark { width: 20px; height: 20px; }
.mg-poll-legend .mg-vmark .mg-ico { width: 12px; height: 12px; }
.mg-poll-legend .mg-vmark.is-none { display: none; }

.mg-poll-hint { font-size: 11.5px; color: var(--muted-2); text-align: center; margin-top: -4px; }

/* recommended (best) / owner-picked date card */
.mg-poll-best {
  display: flex; align-items: center; gap: 13px; padding: 14px 15px;
  border: 1px solid #cbe6da; border-radius: 16px; background: #eef7f2;
}
.mg-poll-best-ico {
  flex: none; width: 42px; height: 42px; border-radius: 12px; background: #dcefe5;
  display: flex; align-items: center; justify-content: center; color: var(--green-d);
}
.mg-poll-best-ico .mg-ico { width: 22px; height: 22px; }
.mg-poll-best-info { flex: 1; min-width: 0; }
.mg-poll-best-k { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--green-d); }
.mg-poll-best-date { font-weight: 700; font-size: 14px; color: var(--ink); margin-top: 2px; }
.mg-poll-best-sub { font-size: 12px; color: var(--muted-2); margin-top: 1px; }
.mg-poll-best-cta {
  flex: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 9px 14px; border-radius: 11px; border: 1.5px solid var(--green); background: #fff;
  color: var(--green-d); font: 700 12.5px 'Instrument Sans', sans-serif; transition: all .15s;
}
.mg-poll-best-cta .mg-ico { width: 15px; height: 15px; }
.mg-poll-best-cta:hover { background: var(--green); color: #fff; }

/* suggest-an-alternative card */
.mg-poll-suggest {
  display: flex; align-items: center; gap: 13px; padding: 13px 15px;
  border: 1px solid var(--line); border-radius: 16px; background: #fafbfb; flex-wrap: wrap;
}
.mg-poll-suggest-ico {
  flex: none; width: 40px; height: 40px; border-radius: 12px; background: #eef0f1;
  display: flex; align-items: center; justify-content: center; color: var(--label);
}
.mg-poll-suggest-ico .mg-ico { width: 20px; height: 20px; }
.mg-poll-suggest-info { flex: 1; min-width: 140px; }
.mg-poll-suggest-title { font-weight: 700; font-size: 13.5px; color: var(--ink); }
.mg-poll-suggest-sub { font-size: 12px; color: var(--muted-2); margin-top: 2px; line-height: 1.4; }
.mg-poll-suggest-btn {
  flex: none; cursor: pointer; padding: 10px 15px; border-radius: 11px;
  border: 1.5px solid var(--line-2); background: #fff; color: var(--ink);
  font: 600 12.5px 'Instrument Sans', sans-serif; transition: all .15s;
}
.mg-poll-suggest-btn:hover { border-color: var(--green); color: var(--green); }

.mg-poll-name { display: flex; flex-direction: column; gap: 8px; }

/* secondary owner tools + primary close button */
.mg-poll-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.mg-poll-submit {
  width: 100%; min-height: 50px; border: none; border-radius: 14px; cursor: pointer;
  background: var(--green); color: #fff; font: 700 15px 'Instrument Sans', sans-serif;
  transition: background .15s;
}
.mg-poll-submit:hover:not(:disabled) { background: var(--green-d); }
.mg-poll-submit:disabled { background: #e7e9eb; color: var(--muted); cursor: default; }
.mg-poll-foot { font-size: 11.5px; color: var(--muted-2); text-align: center; margin-top: -4px; }

.mg-answer-as { font-size: 12px; color: var(--muted-2); }
.mg-answer-as b { color: var(--ink); }
.mg-answer-as.is-missing { color: #b08a3e; font-weight: 600; }

.mg-stage-adminrow { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 4px; border-top: 1px solid var(--line); }
.mg-stage-adminbtn {
  flex: 1; min-height: 40px; padding: 8px 10px; border: 1.5px solid var(--line-2); background: #fff;
  border-radius: 11px; cursor: pointer; font-family: 'Instrument Sans', sans-serif;
  font-weight: 600; font-size: 12px; color: var(--label); transition: all .15s; white-space: nowrap;
}
.mg-stage-adminbtn:hover { border-color: var(--green); color: var(--green); }
.mg-stage-adminbtn.is-danger:hover { border-color: #c2603d; color: #c2603d; }

/* final stage: venue details left, date + calendar right */
.mg-final-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mg-final-card { border: 1px solid var(--line); border-radius: 16px; padding: 15px 16px; background: #fafbfb; min-width: 0; }
.mg-final-k {
  font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted-2); margin-bottom: 7px;
}
.mg-final-name { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 17px; line-height: 1.25; }
.mg-final-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.mg-final-addr { font-size: 12px; color: var(--muted-2); margin-top: 7px; line-height: 1.45; }
.mg-final-rating { font-size: 12px; color: #b08a3e; font-weight: 700; margin-top: 7px; }
.mg-final-links { display: flex; flex-direction: column; gap: 6px; margin-top: 11px; }
.mg-final-link {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600;
  color: var(--green); min-height: 28px;
}
.mg-final-link:hover { color: var(--green-d); }
.mg-final-cal { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.mg-final-cal .mg-cal-green, .mg-final-cal .mg-cal-grey { padding: 11px; font-size: 12.5px; }
.mg-final-people { display: flex; gap: 5px; flex-wrap: wrap; }

/* ---------- Native app: reminder + live-location toggles ---------- */
.mg-final-prefs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.mg-pref-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 12px; border-radius: 12px; cursor: pointer;
  border: 1.5px solid rgba(31, 111, 92, .22); background: #fff;
  color: #16181d; font: 600 13px 'Instrument Sans', sans-serif;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.mg-pref-toggle:hover { border-color: rgba(31, 111, 92, .45); }
.mg-pref-toggle.is-on {
  background: #1f6f5c; border-color: #1f6f5c; color: #fff;
  box-shadow: 0 3px 10px rgba(31, 111, 92, .28);
}
.mg-pref-ico { font-size: 15px; line-height: 1; }
.mg-pref-lbl { white-space: nowrap; }
.mg-pref-state {
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  padding: 2px 7px; border-radius: 20px; background: rgba(0, 0, 0, .07);
}
.mg-pref-toggle.is-on .mg-pref-state { background: rgba(255, 255, 255, .22); }
.mg-pref-hint {
  margin-top: 7px; font: 500 11.5px 'Instrument Sans', sans-serif;
  color: #5b6470; line-height: 1.45;
}

/* ---------- Startseite + "Neuen WannaMeet erstellen" ---------- */
/* Titel der Veranstaltung unter dem Logo */
.mg-event-title {
  margin: 5px 0 0 39px; padding: 4px 11px; border-radius: 20px; width: fit-content;
  background: #fff; box-shadow: 0 4px 14px rgba(20,22,26,.12);
  font-weight: 700; font-size: 12.5px; color: var(--green-d);
  max-width: min(60vw, 320px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Button rechts oben – auf der Startseite anstelle des Personen-Panels */
.mg-create-corner { position: fixed; right: 18px; top: calc(18px + var(--safe-top)); z-index: 610; }
.mg-create-btn {
  display: flex; align-items: center; gap: 7px; border: none; cursor: pointer;
  background: var(--green); color: #fff; font-family: 'Instrument Sans', sans-serif;
  font-weight: 600; font-size: 13px; padding: 10px 15px; border-radius: 12px;
  box-shadow: 0 8px 22px rgba(31,111,92,.30); transition: background .15s, transform .15s;
}
.h-create-btn:hover { background: var(--green-d); transform: translateY(-1px); }

/* Willkommenskarte in der Mitte der Karte */
.mg-home {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 590;
  width: min(430px, calc(100vw - 32px));
}
.mg-home-card {
  background: #fff; border-radius: 20px; box-shadow: 0 22px 60px rgba(20,22,26,.22);
  padding: 28px 28px 24px; text-align: center; animation: mgpop .35s cubic-bezier(.2,.8,.2,1) both;
}
.mg-home-title {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 23px;
  letter-spacing: -.015em; line-height: 1.2; margin-bottom: 8px;
}
.mg-home-sub { font-size: 13px; color: var(--muted-2); line-height: 1.55; margin-bottom: 8px; }
.mg-home-note {
  display: inline-flex; align-items: center; gap: 7px; margin: 4px 0 16px; padding: 7px 12px;
  background: #eef6f2; border-radius: 20px; font-size: 12px; font-weight: 600; color: var(--green-d);
}
.mg-home-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  padding: 14px; border: none; background: var(--green); color: #fff; border-radius: 13px;
  cursor: pointer; font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 14.5px;
  box-shadow: 0 8px 20px rgba(31,111,92,.28); transition: background .15s;
}
.mg-home-cta:hover { background: var(--green-d); }
/* Hinweis für unbestätigte Konten: E-Mail bestätigen, um erstellen zu dürfen. */
.mg-home-verify {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-top: 12px; padding: 10px 12px; border-radius: 12px;
  background: #fff7e6; border: 1px solid #f2d9a6;
  font-size: 12.5px; line-height: 1.4; color: #8a5a12; text-align: left;
}
.mg-home-verify svg { flex: none; }
.mg-home-verify-txt { flex: 1 1 140px; min-width: 0; font-weight: 600; }
.mg-home-verify-btn {
  flex: none; border: 1px solid #e0a94a; background: #fff; color: #8a5a12;
  border-radius: 9px; padding: 6px 11px; cursor: pointer;
  font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 12px;
}
.mg-home-verify-btn:hover { background: #fdf3e0; }
.mg-home-verify-btn:disabled { opacity: .55; cursor: default; }
.mg-home-alt {
  margin-top: 12px; border: none; background: transparent; color: var(--muted-2); cursor: pointer;
  font-family: 'Instrument Sans', sans-serif; font-size: 12.5px; font-weight: 600;
}
.mg-home-alt:hover { color: var(--ink); }
.mg-home-alt b { color: var(--green); }
/* Scroll cue on the home card down to the visible landing/info section. */
.mg-home-more {
  display: block; width: 100%; margin-top: 4px; padding: 6px 0 0;
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 12.5px; color: var(--muted-2);
}
.mg-home-more:hover { color: var(--ink); }

/* -------------------------------------------------------------------------
   Beispiel-Playback (Startseite, unangemeldet): eine nicht klickbare Schicht
   legt sich vor die Karte, während im Hintergrund ein Beispielablauf zeigt,
   wie WannaMeet funktioniert. pointer-events:auto fängt Klick/Drag/Wheel ab,
   die Karte ist also nicht bedienbar; die Willkommenskarte (z-index 590) und
   die Bedien-Buttons (z-index ≥ 600) liegen darüber und bleiben klickbar.
------------------------------------------------------------------------- */
.mg-demostage {
  position: fixed; inset: 0; z-index: 500; pointer-events: auto;
  /* dezenter „Hinter-Glas"-Schleier: Ränder leicht abgedunkelt, Mitte frei,
     damit die Willkommenskarte klar im Vordergrund bleibt. */
  background: radial-gradient(135% 90% at 50% 44%,
    rgba(240,245,246,0) 46%, rgba(224,232,235,.34) 78%, rgba(212,223,227,.5) 100%);
  animation: mgDemoFade .55s ease both;
}
/* Karte während des Demos ruhigstellen: Zoom-Regler und die (verdeckte)
   Attribution ausblenden – die Rechts-/Kartenhinweise trägt die Schicht selbst. */
.mg-map--demo .leaflet-control-zoom,
.mg-map--demo .leaflet-control-attribution { display: none; }

.mg-demostage-badge {
  position: absolute; left: 50%; top: calc(18px + var(--safe-top));
  transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px;
  max-width: calc(100vw - 32px); padding: 8px 14px; border-radius: 22px;
  background: rgba(22,24,29,.82); color: #fff; -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px); box-shadow: 0 8px 24px rgba(20,22,26,.28);
  font-family: 'Instrument Sans', sans-serif; white-space: nowrap;
}
.mg-demostage-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #37d29b; flex: none;
  box-shadow: 0 0 0 0 rgba(55,210,155,.55); animation: mgDemoBlink 1.9s ease-out infinite;
}
.mg-demostage-name {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .82;
}
.mg-demostage-step {
  font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis;
  padding-left: 8px; margin-left: 2px; border-left: 1px solid rgba(255,255,255,.22);
}
.mg-demostage-step:empty { display: none; }

.mg-demostage-attr {
  position: absolute; right: 8px; bottom: 6px; display: flex; gap: 5px; align-items: center;
  font-family: 'Instrument Sans', sans-serif; font-size: 10.5px; color: #5b6169;
  background: rgba(255,255,255,.66); padding: 2px 7px; border-radius: 8px;
}
.mg-demostage-attr a { color: #46707f; text-decoration: none; }
.mg-demostage-attr a:hover { text-decoration: underline; }
.mg-demostage-attr-map { color: #8a9098; }

/* Während des Demos rückt die Willkommenskarte auf dem Desktop etwas nach unten,
   damit der Beispielablauf (Mitte, Suchbereich, Orte) darüber sichtbar bleibt.
   Auf dem Handy sitzt die Karte ohnehin unten – dort läuft das Playback oben. */
@media (min-width: 701px) {
  .mg-demo-active .mg-home {
    top: auto; bottom: 6vh; transform: translateX(-50%);
    transition: bottom .4s ease;
  }
}

/* Ein-/Ausblenden der Marker (JS setzt die Klasse am inneren Icon-Element –
   nicht am äußeren, das Leaflet per transform positioniert). */
.mg-demo-pop { animation: mgDemoPop .5s cubic-bezier(.2,.9,.3,1.25) both; }
.mg-demo-out { animation: mgDemoOut .45s ease both; }

@keyframes mgDemoFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mgDemoBlink { 0% { box-shadow: 0 0 0 0 rgba(55,210,155,.5); } 70%,100% { box-shadow: 0 0 0 7px rgba(55,210,155,0); } }
@keyframes mgDemoPop { from { opacity: 0; transform: translateY(6px) scale(.55); } to { opacity: 1; transform: none; } }
@keyframes mgDemoOut { from { opacity: 1; } to { opacity: 0; transform: scale(.88); } }

@media (prefers-reduced-motion: reduce) {
  .mg-demostage { animation: none; }
  .mg-demostage-dot { animation: none; }
  .mg-demo-pop, .mg-demo-out { animation: none; }
}

/* freundlicher Hinweis im Auth-Modal ("erst registrieren") */
.mg-auth-intro {
  margin: -6px 0 16px; padding: 12px 14px; background: #eef6f2; border-radius: 12px;
  font-size: 12.5px; color: var(--green-d); line-height: 1.5; font-weight: 500;
}

/* Erstellen-Modal */
.mg-modal-create { padding: 26px; width: min(440px, 92vw); max-height: 88vh; overflow-y: auto; }
.mg-create-name-row { display: flex; gap: 8px; }
.mg-create-name-row .mg-input { flex: 1; min-width: 0; }
.mg-dice {
  flex: none; width: 44px; border: 1.5px solid var(--line-2); background: #fff;
  border-radius: 11px; cursor: pointer; font-size: 18px; transition: all .15s;
  display: flex; align-items: center; justify-content: center; color: var(--ink);
}
.h-dice:hover { border-color: var(--green); transform: rotate(-12deg); }
.mg-field-hint { display: block; margin-top: 6px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.mg-create-self {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; padding: 11px 13px;
  background: #eef6f2; border-radius: 12px; font-size: 12.5px; color: var(--green-d); line-height: 1.5;
}
.mg-linkrow { display: flex; gap: 8px; }
.mg-linkrow .mg-input { flex: 1; min-width: 0; font-size: 12.5px; color: var(--label); background: #fafbfb; }
.mg-linkrow .mg-btn-dark { flex: none; }

/* Direkt-Einladungen im "erstellt"-Schritt: Chip-Feld für Username/E-Mail.
   Jeder Eintrag wird zum eigenen Kästchen; Farben zeigen das Sende-Ergebnis. */
.mg-chipfield {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; cursor: text;
  border: 1.5px solid var(--line-2); border-radius: 11px; padding: 7px 9px;
  background: #fff; transition: border-color .15s;
}
.mg-chipfield:focus-within { border-color: var(--green); }
.mg-chipfield-input {
  flex: 1; min-width: 130px; border: none; outline: none; background: transparent;
  font-family: 'Instrument Sans', sans-serif; font-size: 13.5px; padding: 4px 3px;
}
.mg-chip {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
  background: var(--chip); border: 1px solid var(--line-2); border-radius: 8px;
  padding: 4px 5px 4px 9px; font-size: 12.5px; font-weight: 600; color: var(--ink);
  animation: mgpop .18s ease both;
}
.mg-chip-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-chip.is-ok { background: #eef6f2; border-color: #cfe4dc; color: var(--green-d); }
.mg-chip.is-link { background: #f8f5f1; border-color: #e8dfd0; color: #7a5c3e; }
.mg-chip.is-err { background: #f7e9e5; border-color: #ecccc0; color: #b0492c; }
.mg-chip-ico { flex: none; width: 12px; height: 12px; }
.mg-chip-x {
  flex: none; display: flex; border: none; background: transparent; color: inherit;
  cursor: pointer; padding: 2px; opacity: .55; transition: opacity .15s;
}
.mg-chip-x:hover { opacity: 1; }
.mg-chip-x .mg-ico { width: 11px; height: 11px; }
.mg-chipfield-send { margin-top: 10px; margin-left: auto; }

/* ---------- place details (photos, hours, reviews, contact, emoji) ---------- */
.mg-shop-main { display: flex; width: 100%; align-items: center; gap: 12px; }
.mg-shop.is-open { border-color: #d6dadd; box-shadow: 0 6px 16px rgba(0,0,0,.07); }
.mg-shop-more {
  border: none; background: #f1f2f4; color: var(--muted-2); width: 26px; height: 26px;
  border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.mg-shop-more:hover { background: #e8eaec; color: var(--ink); }
.mg-shop-price { color: var(--muted-2); font-weight: 700; white-space: nowrap; }
.mg-shop-feat { color: var(--green-d); font-weight: 600; white-space: nowrap; }
.mg-det-feats { display: flex; gap: 6px; flex-wrap: wrap; }
.mg-det-feat {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600;
  color: var(--green-d); background: #eef6f2; border-radius: 16px; padding: 4px 10px;
}
.mg-shop-details {
  width: 100%; margin-top: 2px; padding-top: 10px; border-top: 1px dashed var(--line-2);
  cursor: default; animation: mgdrop .25s ease both;
}
.mg-det-photos { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.mg-det-photos img {
  height: 96px; border-radius: 10px; flex: none; object-fit: cover; max-width: 160px;
  background: #eef0f1;
}
.mg-det-contact { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 9px; }
.mg-det-btn {
  display: inline-flex; align-items: center; gap: 5px; padding: 8px 11px; min-height: 36px;
  border: 1.5px solid var(--line-2); border-radius: 10px; background: #fff;
  font-size: 12px; font-weight: 600; color: var(--ink); cursor: pointer; transition: all .15s;
}
.mg-det-btn:hover { border-color: var(--green); color: var(--green); }
.mg-det-btn.is-call { border-color: #cfe4dc; background: #eef6f2; color: var(--green-d); }
.mg-det-sec {
  margin: 11px 0 5px; font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted-2);
}
.mg-det-hours { font-size: 11.5px; color: var(--ink-2); line-height: 1.55; }
.mg-det-review { font-size: 12px; color: var(--ink-2); line-height: 1.5; margin-bottom: 7px; }
.mg-det-review-author { color: var(--muted); }
.mg-det-react { display: flex; flex-wrap: wrap; gap: 6px; }
.mg-react-btn {
  border: 1.5px solid var(--line-2); background: #fff; border-radius: 10px; cursor: pointer;
  font-size: 16px; width: 38px; height: 36px; transition: all .12s; line-height: 1;
}
.mg-react-btn:hover { transform: translateY(-1px); border-color: #d0d4d7; }
.mg-react-btn.is-on { border-color: var(--green); background: #eef6f2; }
.mg-react-agg {
  display: inline-flex; align-items: center; font-size: 12px; background: #f4f5f6;
  border-radius: 12px; padding: 1px 7px; margin-left: 2px;
}

/* Auswahl-/Vote-Button unter den Details (Ergebnisliste + Karten-Popup) */
.mg-det-select {
  display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%;
  margin-top: 12px; padding: 11px 12px; border: 1.5px solid transparent; border-radius: 11px;
  cursor: pointer; background: var(--green); color: #fff;
  font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 13px;
  transition: background .15s, color .15s, border-color .15s;
}
.mg-det-select:hover { background: var(--green-d); }
.mg-det-select.is-voted { background: #fff; color: var(--green-d); border-color: var(--green); }
.mg-det-select.is-voted:hover { background: #eef6f2; }

/* ---------- Tisch-Reservierung (Slot-Raster + CTA) ---------- */
.mg-slotgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mg-slot {
  padding: 10px 0; border: 1.5px solid var(--line-2); border-radius: 10px; background: #fff;
  font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 13px;
  color: var(--green); text-align: center; cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.mg-slot:hover { border-color: var(--green); }
.mg-slot.is-active { background: var(--green); border-color: var(--green); color: #fff; }
.mg-slot.is-closed {
  background: #f1f2f4; border-color: transparent; color: #b4b9bf; cursor: default;
}
.mg-reserve-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  margin-top: 12px; padding: 12px; border: 1.5px solid var(--green); border-radius: 11px;
  background: #eef6f2; color: var(--green-d); font-weight: 600; font-size: 13.5px;
  transition: background .15s, color .15s;
}
.mg-reserve-btn:hover { background: var(--green); color: #fff; }
/* Keine Sofortbuchung: Button bleibt sichtbar, ist aber ausgegraut und tot. */
.mg-reserve-btn.is-off, .mg-det-btn.is-res.is-off {
  background: #f1f2f4; border-color: #e3e6e9; color: #b4b9bf;
  cursor: default; pointer-events: none;
}
.mg-res-hint { margin-top: 7px; font-size: 11px; color: var(--muted); text-align: center; line-height: 1.4; }
.mg-res-hint.is-det { margin: 6px 2px 0; text-align: left; }
.mg-res-hint .mg-res-call { color: var(--green-d); font-weight: 600; text-decoration: underline; }
.mg-det-btn.is-res { border-color: #cfe4dc; background: #eef6f2; color: var(--green-d); }
.mg-final-link.is-res { color: var(--green-d); font-weight: 700; }

/* ---------- Karten-Popup am Orts-Punkt ---------- */
.mg-shop-popup .leaflet-popup-content-wrapper {
  border-radius: 14px; box-shadow: 0 14px 40px rgba(20,22,26,.24); padding: 0;
}
.mg-shop-popup .leaflet-popup-content {
  margin: 0; padding: 13px 14px 12px; font-family: 'Instrument Sans', sans-serif;
  font-size: 12.5px; line-height: 1.45; color: var(--ink);
}
.mg-shop-popup a.leaflet-popup-close-button { top: 7px; right: 9px; color: var(--muted-2); }
.mg-popup-name { font-weight: 700; font-size: 14px; line-height: 1.3; padding-right: 16px; }
.mg-popup-sub { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.mg-popup-body { max-height: 250px; overflow-y: auto; overflow-x: hidden; margin-top: 2px; }
.mg-popup-body .mg-det-photos img { height: 76px; max-width: 130px; }

/* ---------- poll builder extras (templates, deadline, quorum) ---------- */
.mg-tpl-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.mg-tpl-label { font-size: 11px; font-weight: 700; color: var(--muted-2); }
.mg-tpl-chip {
  border: 1.5px dashed var(--line-2); background: #fafbfb; border-radius: 18px; cursor: pointer;
  font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 11.5px;
  color: var(--label); padding: 6px 11px; transition: all .15s;
}
.mg-tpl-chip:hover { border-color: var(--green); color: var(--green); background: #f3faf7; }
.mg-poll-opts { display: flex; gap: 12px; margin-top: 14px; }
.mg-poll-opts .mg-field { flex: 1; min-width: 0; }
.mg-opt-hint { display: block; margin-top: 5px; font-size: 10.5px; color: var(--muted); line-height: 1.4; }

/* dates stage meta + warnings + ics */
.mg-poll-meta {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 11.5px; font-weight: 600; color: var(--green-d);
  background: #eef6f2; border-radius: 10px; padding: 8px 11px;
}
.mg-slot-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.mg-slot-warn {
  font-size: 10.5px; font-weight: 600; color: #b08a3e; background: #fbf6ec;
  border-radius: 8px; padding: 3px 8px;
}
.mg-slot-warn.is-ics { color: #c2603d; background: #f7ebe7; }
.mg-ics-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.mg-ics-row .mg-opt-hint { margin-top: 0; flex: 1; min-width: 120px; }

/* final extras */
.mg-final-note {
  font-size: 12px; color: var(--green-d); background: #eef6f2;
  border-radius: 10px; padding: 8px 12px;
}
.mg-final-warn {
  font-size: 12px; color: #b08a3e; background: #fbf6ec;
  border-radius: 10px; padding: 8px 12px;
}
.mg-today-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--green); color: #fff; border-radius: 12px; padding: 10px 14px;
  font-weight: 700; font-size: 13.5px; box-shadow: 0 6px 18px rgba(31,111,92,.3);
}
.mg-today-late {
  border: none; background: rgba(255,255,255,.18); color: #fff; border-radius: 9px;
  font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 12px;
  padding: 7px 11px; cursor: pointer; white-space: nowrap;
}
.mg-today-late:hover { background: rgba(255,255,255,.3); }
.mg-final-photo {
  width: 100%; height: 120px; object-fit: cover; border-radius: 12px;
  margin-bottom: 11px; background: #eef0f1; display: block;
}
.mg-final-link.is-call { color: var(--green-d); font-weight: 700; }

/* ---------- Essenswünsche ---------- */
.mg-wish-panel { padding: 10px 16px 14px; border-top: 1px solid var(--line); }
.mg-wish-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mg-wish-title { font-weight: 600; font-size: 12.5px; }
.mg-wish-btn {
  border: 1.5px solid var(--line-2); background: #fff; color: var(--label);
  font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 11.5px;
  padding: 6px 11px; border-radius: 9px; cursor: pointer; transition: all .15s; white-space: nowrap;
}
.mg-wish-btn:hover { border-color: var(--green); color: var(--green); }
.mg-wish-list { margin-top: 7px; font-size: 12px; color: var(--green-d); line-height: 1.5; }
.mg-wish-none { margin-top: 7px; font-size: 11.5px; color: var(--muted); line-height: 1.5; }
/* ---------------------------------------------------------------------------
   Kostensplitter nach dem Event ("Kosten teilen")
--------------------------------------------------------------------------- */
.mg-stage-costsbtn {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  padding: 13px; border: none; background: var(--green); color: #fff;
  border-radius: 13px; cursor: pointer; font-family: 'Instrument Sans', sans-serif;
  font-weight: 600; font-size: 13.5px; box-shadow: 0 8px 20px rgba(31,111,92,.24);
  transition: background .15s;
}
.mg-stage-costsbtn:hover { background: var(--green-d); }
.mg-stage-costsbtn .mg-ico { width: 16px; height: 16px; }
.mg-stage-check.is-costs { color: var(--green-d); }
.mg-stage-check.is-costs .mg-ico { width: 20px; height: 20px; }
/* Glücksrad-Abschluss: lachender Smiley statt Banknote */
.mg-stage-check.is-laugh { color: var(--green-d); }
.mg-stage-check.is-laugh .mg-ico { width: 23px; height: 23px; }

/* Zahler-Prompt (PayPal/IBAN) im Stage-Panel */
.mg-costs-payform { display: flex; flex-direction: column; gap: 4px; }
.mg-costs-payform .mg-label { margin-top: 8px; margin-bottom: 2px; }
.mg-costs-err {
  font-size: 12px; color: #b3452e; background: #faf0ed;
  border-radius: 10px; padding: 8px 12px; margin-top: 8px;
}

/* Zahldaten- & Abrechnungskarten */
.mg-costs-payrow { padding: 8px 0; border-bottom: 1px dashed var(--line); }
.mg-costs-payrow:last-child { border-bottom: none; padding-bottom: 0; }
.mg-costs-payrow-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mg-costs-paylabel { font-weight: 700; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted-2); }
.mg-costs-payval {
  margin-top: 3px; font-weight: 600; font-size: 12.5px; word-break: break-word;
  font-variant-numeric: tabular-nums;
}
.mg-costs-copy {
  flex: none; border: 1.5px solid var(--line-2); background: #fff; color: var(--label);
  border-radius: 8px; padding: 4px 9px; font-family: 'Instrument Sans', sans-serif;
  font-size: 10.5px; font-weight: 600; cursor: pointer; transition: all .15s;
}
.mg-costs-copy:hover { border-color: var(--green); color: var(--green); }

/* Direkter PayPal-„Jetzt bezahlen"-Button (PayPal.Me-Deep-Link mit Betrag).
   Gold + zweifarbige Wortmarke = die vertraute PayPal-Optik. */
.mg-paypal-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 11px 14px; border-radius: 12px;
  background: #ffc439; color: #003087; text-decoration: none;
  font-family: 'Instrument Sans', sans-serif; box-shadow: 0 6px 16px rgba(255,196,57,.35);
  transition: background .15s, box-shadow .15s, transform .05s;
}
.mg-paypal-btn:hover { background: #f0b722; box-shadow: 0 8px 20px rgba(255,196,57,.45); }
.mg-paypal-btn:active { transform: translateY(1px); }
.mg-paypal-logo { font-weight: 800; font-style: italic; font-size: 16px; letter-spacing: -.01em; }
.mg-paypal-logo .mg-pp-a { color: #003087; }
.mg-paypal-logo .mg-pp-b { color: #0070ba; }
.mg-paypal-label {
  display: inline-flex; align-items: baseline; gap: 7px;
  font-weight: 700; font-size: 13.5px; color: #003087;
}
.mg-paypal-amount { font-weight: 800; font-variant-numeric: tabular-nums; }
.mg-costs-desc { font-size: 12.5px; color: var(--muted); font-style: italic; margin-bottom: 8px; }
.mg-costs-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 12.5px; color: var(--muted); padding: 3px 0;
}
.mg-costs-row b { color: var(--ink); font-variant-numeric: tabular-nums; }
.mg-costs-row.is-share { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 8px; font-weight: 700; color: var(--ink); }
.mg-costs-row.is-share b { color: var(--green-d); font-size: 15px; }

/* Wer hat schon überwiesen? Rot = offen, Grün = bezahlt. */
.mg-costs-status { margin-top: 2px; }
.mg-costs-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.mg-costs-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px 5px 7px; border-radius: 20px; font-size: 12px; font-weight: 600;
  background: #faf0ed; color: #b3452e; border: 1px solid #f0d9d2;
}
.mg-costs-chip.is-paid { background: #e8f2ee; color: var(--green-d); border-color: #d3e6de; }
.mg-costs-chip.is-tickable { cursor: pointer; transition: all .15s; }
.mg-costs-chip.is-tickable:hover { border-color: var(--green); color: var(--green-d); }
.mg-costs-chip-check { width: 13px; height: 13px; }
.mg-costs-chip-role {
  font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: rgba(31,111,92,.12); border-radius: 8px; padding: 2px 6px;
}
.mg-costs-paidbtn { margin-top: 4px; background: var(--green); box-shadow: 0 8px 20px rgba(31,111,92,.26); }
.mg-costs-paidbtn:not(.is-busy):hover { background: var(--green-d); }
.mg-costs-paidbtn .mg-ico { width: 15px; height: 15px; }
.mg-costs-settled {
  font-size: 12.5px; font-weight: 600; color: var(--green-d); background: #eef6f2;
  border-radius: 10px; padding: 9px 12px;
}

/* Abschieds-Screen ("Schön, dass du dabei warst") */
.mg-costs-bye-actions { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.mg-costs-bye-pitch { font-size: 12.5px; color: var(--muted); line-height: 1.5; text-align: center; }

/* Kosten-Modal (Admin-Editor) */
.mg-modal-costs { padding: 26px; width: min(480px, 92vw); max-height: 88vh; overflow-y: auto; }
.mg-modal-costs .mg-label { margin-top: 12px; }
.mg-costs-extra { display: flex; gap: 7px; align-items: center; margin-top: 8px; }
.mg-costs-extra [data-x="label"] { flex: 1.5; }
.mg-costs-extra [data-x="amount"] { flex: 1; }
.mg-costs-extra-rm {
  flex: none; width: 34px; height: 34px; border: 1.5px solid var(--line-2); background: #fff;
  color: var(--muted); border-radius: 10px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all .15s;
}
.mg-costs-extra-rm:hover { border-color: #c2603d; color: #c2603d; }
.mg-costs-addextra {
  margin-top: 9px; border: 1.5px dashed var(--line-2); background: none; color: var(--label);
  border-radius: 11px; padding: 8px 12px; font-family: 'Instrument Sans', sans-serif;
  font-size: 12px; font-weight: 600; cursor: pointer; transition: all .15s; width: 100%;
}
.mg-costs-addextra:hover { border-color: var(--green); color: var(--green); }
.mg-costs-payers { display: flex; gap: 6px; flex-wrap: wrap; }
.mg-costs-payerchip {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px 7px 8px;
  border: 1.5px solid var(--line-2); background: #fff; border-radius: 20px;
  font-family: 'Instrument Sans', sans-serif; font-size: 12.5px; font-weight: 600;
  color: var(--label); cursor: pointer; transition: all .15s;
}
.mg-costs-payerchip:hover { border-color: var(--green); }
.mg-costs-payerchip.is-on { border-color: var(--green); background: #e8f2ee; color: var(--green-d); }
.mg-costs-preview {
  margin-top: 12px; font-size: 12.5px; font-weight: 600; color: var(--green-d);
  background: #eef6f2; border-radius: 10px; padding: 9px 12px;
}
/* Auswahl: fair teilen oder das Glücksrad entscheiden lassen */
.mg-modal-choice { padding: 26px; width: min(420px, 92vw); }
.mg-choice-card {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  border: 1.5px solid var(--line-2); background: #fff; border-radius: 14px;
  padding: 14px 16px; cursor: pointer; transition: all .15s;
  font-family: 'Instrument Sans', sans-serif;
}
.mg-choice-card + .mg-choice-card { margin-top: 10px; }
.mg-choice-card:hover { border-color: var(--green); background: #f7faf9; }
.mg-choice-emoji { font-size: 26px; flex: none; }
/* Kachel-Icon (statt Emoji) – z. B. die Typ-Auswahl beim Erstellen
   („Mitte" mit 5 Punkten + Mittelkreis bzw. das Safe-Exchange-Schild). */
.mg-choice-ico {
  width: 42px; height: 42px; border-radius: 13px; flex: none; align-self: flex-start;
  display: flex; align-items: center; justify-content: center;
}
.mg-choice-ico svg { width: 22px; height: 22px; display: block; }
.mg-choice-name { display: block; font-weight: 700; font-size: 14px; color: var(--ink); }
.mg-choice-desc { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); line-height: 1.45; }

/* Einladungs-Dialog: der erste Bildschirm nach einem geteilten Link.
   Oben eine Kopfkarte (wer lädt ein, wie heißt das Treffen, wer ist dabei),
   darunter je nach Anmeldestatus ein Ja-Button oder die drei Wege hinein. */
.mg-modal-join { padding: 26px; width: min(430px, 92vw); max-height: 90vh; overflow-y: auto; }
.mg-join-card {
  display: flex; align-items: center; gap: 13px; margin-bottom: 16px;
  padding: 13px 14px; background: #eef6f2; border-radius: 14px;
}
.mg-join-ico {
  width: 44px; height: 44px; border-radius: 14px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--green); color: #fff; font-weight: 700; font-size: 17px;
  font-family: 'Bricolage Grotesque', sans-serif; text-transform: uppercase;
}
.mg-join-ico svg { width: 22px; height: 22px; display: block; }
.mg-join-info { min-width: 0; }
.mg-join-event {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700;
  font-size: 15px; color: var(--ink); line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mg-join-by { margin-top: 2px; font-size: 12.5px; color: var(--green-d); line-height: 1.4; }
.mg-join-people { margin-top: 1px; font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.mg-join-as { margin-bottom: 10px; font-size: 12.5px; color: var(--label); line-height: 1.45; }
.mg-join-as b { color: var(--ink); }
.mg-join-hint { text-align: center; margin-top: 9px; }
/* "In der App öffnen" – nur im mobilen Browser, direkt in der Einladung statt
   als konkurrierendes Banner über dem Dialog. */
.mg-join-app {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
  padding: 9px 11px; border: 1.5px solid var(--line-2); border-radius: 12px;
  text-decoration: none; color: var(--ink); transition: border-color .15s;
}
.mg-join-app:hover { border-color: var(--green); }
.mg-join-app-ico { width: 30px; height: 30px; border-radius: 8px; flex: none; }
.mg-join-app-txt { flex: 1; min-width: 0; font-size: 12px; color: var(--muted); line-height: 1.4; }
.mg-join-app-btn {
  flex: none; background: var(--green); color: #fff; font-weight: 700;
  font-size: 12.5px; padding: 7px 13px; border-radius: 9px;
}
.mg-join-foot { margin-top: 16px; text-align: center; }
.mg-join-foot .mg-link { font-size: 12.5px; }

/* Glücksrad: dreht idle langsam, der "Drehen"-Button sitzt in der Mitte */
.mg-modal-wheel { padding: 26px; width: min(430px, 92vw); max-height: 90vh; overflow-y: auto; }
.mg-wheel-wrap { position: relative; width: min(320px, 100%); margin: 4px auto 0; }
.mg-wheel-disc { border-radius: 50%; box-shadow: 0 14px 40px rgba(20,22,26,.20); }
.mg-wheel-svg { display: block; width: 100%; height: auto; }
.mg-wheel-svg.is-idle { animation: mgWheelIdle 24s linear infinite; }
@keyframes mgWheelIdle { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mg-wheel-svg.is-idle { animation: none; } }
.mg-wheel-pointer {
  position: absolute; top: -7px; left: 50%; transform: translateX(-50%); z-index: 3;
  width: 0; height: 0; border-left: 11px solid transparent; border-right: 11px solid transparent;
  border-top: 19px solid var(--ink); filter: drop-shadow(0 2px 3px rgba(0,0,0,.28));
}
.mg-wheel-spinbtn {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;
  width: 78px; height: 78px; border-radius: 50%; border: 4px solid #fff;
  background: var(--ink); color: #fff; cursor: pointer;
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 14.5px;
  box-shadow: 0 8px 22px rgba(20,22,26,.35); transition: transform .15s, background .15s;
}
.mg-wheel-spinbtn:hover:not(:disabled) { transform: translate(-50%, -50%) scale(1.06); }
.mg-wheel-spinbtn:disabled { cursor: default; opacity: .9; }
.mg-wheel-result { margin-top: 16px; text-align: center; }
.mg-wheel-winner {
  font-size: 15px; margin-bottom: 12px; line-height: 1.5;
  animation: mgpop .35s cubic-bezier(.2,.8,.2,1) both;
}
.mg-wheel-winner b { color: var(--green-d); }

.mg-modal-wish { padding: 26px; width: min(460px, 92vw); max-height: 88vh; overflow-y: auto; }
.mg-wish-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.mg-wish-grid .mg-filterchip { min-height: 36px; font-size: 12px; }
.mg-results-hint.is-wish { color: #7a5c3e; background: #f8f5f1; }

/* presence ("2 online") */
.mg-presence {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600;
  color: var(--green-d);
}
.mg-presence::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: #2fa87c;
  box-shadow: 0 0 0 3px rgba(47,168,124,.18);
}

/* ---------- chat ---------- */
.mg-chat-fab {
  position: fixed; right: 18px; bottom: calc(24px + var(--safe-bottom)); z-index: 650;
  width: 52px; height: 52px; border: none; border-radius: 50%; cursor: pointer;
  background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px rgba(20,22,26,.3); transition: transform .15s;
}
.mg-chat-fab:hover { transform: translateY(-2px); }
body.mg-stage-open .mg-chat-fab { display: flex; }   /* Chat bleibt in allen Stages erreichbar */
.mg-chat-badge {
  position: absolute; top: -3px; right: -3px; min-width: 19px; height: 19px;
  border-radius: 10px; background: #C2603D; color: #fff; font-size: 10.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; padding: 0 5px;
  border: 2px solid #fff;
}
.mg-chat-panel {
  position: fixed; right: 18px; bottom: calc(86px + var(--safe-bottom)); z-index: 660;
  width: min(360px, calc(100vw - 36px)); height: min(480px, 70vh);
  display: flex; flex-direction: column;
  background: #fff; border-radius: 18px; overflow: hidden;
  box-shadow: 0 18px 50px rgba(20,22,26,.28);
  animation: mgpop .25s cubic-bezier(.2,.8,.2,1) both;
}
.mg-chat-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 14px 11px 16px; border-bottom: 1px solid var(--line);
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 15px;
}
.mg-chat-messages { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 9px; }
.mg-chat-empty { text-align: center; color: var(--muted); font-size: 12.5px; margin-top: 24px; }
.mg-chat-msg { display: flex; align-items: flex-end; gap: 7px; }
.mg-chat-msg.is-own { justify-content: flex-end; }
.mg-chat-ava {
  flex: none; width: 24px; height: 24px; border-radius: 50%; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
}
.mg-chat-bubble {
  max-width: 78%; background: #f1f2f4; border-radius: 13px 13px 13px 4px; padding: 7px 11px;
}
.mg-chat-msg.is-own .mg-chat-bubble { background: #e2efe9; border-radius: 13px 13px 4px 13px; }
.mg-chat-name { font-size: 10.5px; font-weight: 700; margin-bottom: 1px; }
.mg-chat-text { font-size: 13px; line-height: 1.4; word-break: break-word; white-space: pre-wrap; }
.mg-chat-time { font-size: 9.5px; color: var(--muted); text-align: right; margin-top: 2px; }
.mg-chat-inputrow {
  display: flex; gap: 8px; padding: 10px 12px calc(10px + var(--safe-bottom));
  border-top: 1px solid var(--line);
}
.mg-chat-inputrow .mg-input { flex: 1; min-height: 40px; padding: 9px 12px; }
.mg-chat-send {
  flex: none; width: 42px; height: 42px; border: none; border-radius: 12px; cursor: pointer;
  background: var(--green); color: #fff; display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.mg-chat-send:hover { background: var(--green-d); }

/* Verhaltensregeln + Melden/Blockieren im Chat (App-Review Guideline 1.2) */
.mg-chat-rules {
  padding: 7px 16px; font-size: 11px; line-height: 1.4; color: var(--muted);
  border-bottom: 1px solid var(--line); background: #fafbfb;
}
.mg-chat-rules a { color: var(--green); font-weight: 600; text-decoration: none; }
.mg-chat-tools { display: flex; flex-direction: column; gap: 2px; opacity: .5; }
.mg-chat-msg:hover .mg-chat-tools { opacity: 1; }
.mg-chat-tool {
  border: none; background: transparent; padding: 4px; cursor: pointer; color: var(--muted);
  border-radius: 7px; display: flex; align-items: center; justify-content: center;
}
.mg-chat-tool:hover { background: #f1f2f4; color: #b3261e; }

/* Melden-Dialog */
.mg-report-quote {
  margin: 2px 0 14px; padding: 9px 12px; background: #f6f7f8;
  border-left: 3px solid var(--line-2); border-radius: 8px;
  font-size: 12.5px; color: var(--ink-2); word-break: break-word;
}
.mg-report-reasons { display: flex; flex-wrap: wrap; gap: 7px; }
.mg-report-chip {
  border: 1.5px solid var(--line-2); background: #fff; border-radius: 999px; padding: 7px 13px;
  font-family: 'Instrument Sans', sans-serif; font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  cursor: pointer; transition: border-color .12s, background .12s;
}
.mg-report-chip.is-active { border-color: var(--green); background: #e2efe9; color: var(--green-d); }

/* Nutzungsbedingungen-Zustimmung (EULA) im Auth-Dialog */
.mg-terms-row { display: flex; align-items: flex-start; gap: 9px; margin-top: 14px; cursor: pointer; }
.mg-terms-row input { flex: none; width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--green); }
/* Privatsphäre-Schalter in den Einstellungen: gesperrt, solange man in einem
   laufenden WannaMeet eingetragen ist */
.mg-privacy-row input:disabled { opacity: .45; cursor: not-allowed; }
.mg-privacy-row input:disabled + .mg-terms-text { opacity: .55; }
.mg-privacy-locked { color: #b3261e; }
.mg-terms-text { font-size: 12px; color: var(--muted); line-height: 1.45; }
.mg-terms-text a { color: var(--green); font-weight: 600; }
.mg-auth-terms { margin-top: 12px; font-size: 11px; color: #a3a8ae; text-align: center; }
.mg-auth-terms a { color: var(--green); font-weight: 600; }

/* Konto löschen / Blockieren: rote Bestätigungs-Buttons + Menüeintrag */
.mg-submit-danger { background: #b3261e; box-shadow: 0 8px 20px rgba(179,38,30,.25); }
.mg-submit-danger:not(.is-busy):hover { background: #9c1f18; }
.mg-submit-danger:disabled { opacity: .6; cursor: default; }
.mg-profile-item.is-danger { color: #b3261e; }
.mg-profile-item.is-danger:hover { background: #fdecea; }

/* Kategorie-Modal kann mit 8 Kacheln hoch werden */
.mg-modal-cat { max-height: 88vh; overflow-y: auto; }

/* =====================================================================
   Mobile first – über die Hälfte der Nutzer kommt vom Handy. Panels
   werden zu Bottom-Sheets, alles bleibt lesbar und tippbar (≥42px).
   ===================================================================== */
@media (max-width: 700px) {
  /* Unter Dynamic Island / Notch + Statusleiste schieben (Safe-Area beachten),
     sonst überlappen Logo und Login die Systeminfos oben. */
  .mg-logo { left: 12px; top: calc(12px + var(--safe-top)); }
  .mg-logo-tag { display: none; }
  .mg-logo-word { font-size: 19px; }
  .mg-logo-img { width: 30px; height: 30px; }

  /* Sprache + Login wandern nach oben rechts (unten liegen die Sheets);
     etwas schmalere Knöpfe, damit die Zeile auch auf 360px-Geräten
     neben dem Logo Platz hat. */
  .mg-top-bar { left: auto; right: 12px; top: calc(12px + var(--safe-top)); bottom: auto; }
  .mg-lang-btn { padding: 6px 9px; }
  .mg-auth-btn { padding: 7px 10px; }
  .mg-profile-menu { bottom: auto; top: calc(100% + 6px); }

  /* Teilnehmerliste versteckt sich hinter dem User-Icon oben rechts;
     ein Tipp darauf klappt das Panel unter dem Icon auf. */
  .mg-people-panel { left: 12px; right: 12px; top: 106px; width: auto; max-width: none; }
  body:not(.mg-people-open) .mg-people-panel { display: none; }
  .mg-people-list { max-height: 26vh; }
  .mg-people-fab {
    display: flex; align-items: center; justify-content: center;
    position: fixed; right: 12px; top: calc(56px + var(--safe-top)); z-index: 620;
    width: 42px; height: 42px; border: none; border-radius: 13px; cursor: pointer;
    background: #fff; color: var(--ink);
    box-shadow: 0 6px 20px rgba(20,22,26,.14);
  }
  .mg-people-fab.is-open { background: var(--ink); color: #fff; }
  .mg-people-fab-count {
    position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px;
    border-radius: 10px; background: var(--green); color: #fff;
    font-size: 10px; font-weight: 700; display: flex; align-items: center;
    justify-content: center; padding: 0 5px; border: 2px solid #fff;
  }
  body.mg-results-open .mg-people-fab,
  body.mg-stage-open .mg-people-fab { display: none; }

  /* Der Erstellen-Button oben rechts entfällt auf dem Handy: er erscheint
     nur auf der Startseite, wo die Willkommenskarte unten denselben
     Call-to-Action trägt – oben bleibt so Platz für Logo, Sprache, Login. */
  .mg-create-corner { display: none; }

  /* Ankündigungs-Banner: oben ist kein Platz zwischen Logo und Anmelden,
     deshalb eigene Zeile darunter; rechts bleibt der Personen-FAB frei. */
  .mg-announce {
    left: 12px; right: 62px; width: auto; min-width: 0; transform: none;
    top: calc(58px + var(--safe-top));
  }

  /* Beispiel-Badge: zentriert passt er nicht zwischen Logo und Anmelden,
     deshalb rückt er in eine eigene Zeile unter die obere Bedienreihe. */
  .mg-demostage-badge {
    top: calc(58px + var(--safe-top));
    max-width: calc(100vw - 24px);
  }
  .mg-event-title { margin-left: 0; margin-top: 6px; }
  .mg-home { top: auto; bottom: calc(20px + var(--safe-bottom)); transform: translateX(-50%); }
  .mg-home-card { padding: 22px 20px 18px; }
  .mg-home-cta { min-height: 48px; }

  .mg-actionbar {
    left: 10px; right: 10px; transform: none; width: auto;
    bottom: calc(10px + var(--safe-bottom));
    gap: 8px;
  }
  /* Kompakte Leiste: nur Options-Button + Let's-meet. Die Segmente
     (Aufteilung, Mitte nach, Modus) liegen im aufklappbaren Menü darüber. */
  .mg-actionbar-inner { width: 100%; flex-wrap: nowrap; justify-content: center; padding: 8px; gap: 8px; }
  .mg-calc { flex: 1; justify-content: center; min-height: 46px; }
  .mg-seg-btn { min-height: 38px; }
  .mg-barmenu-btn {
    display: flex; align-items: center; justify-content: center; flex: none;
    width: 46px; min-height: 46px; border: none; border-radius: 11px;
    background: #f1f2f4; color: var(--ink); cursor: pointer; transition: background .15s;
  }
  .mg-barmenu-btn.is-open { background: var(--ink); color: #fff; }
  .mg-barmenu {
    position: absolute; left: 0; right: 0; bottom: calc(100% + 10px);
    display: flex; flex-direction: column; gap: 12px;
    background: #fff; border-radius: 16px; padding: 14px;
    box-shadow: 0 12px 34px rgba(20,22,26,.2);
    animation: mgpop .22s cubic-bezier(.2,.8,.2,1) both;
  }
  .mg-barmenu .mg-weight { background: transparent; box-shadow: none; border-radius: 0; padding: 0; }
  .mg-barmenu .mg-seg { width: 100%; }
  .mg-barmenu .mg-seg .mg-seg-btn { flex: 1; justify-content: center; }
  .mg-hint { text-align: center; }

  /* Ergebnisliste als Bottom-Sheet – Karte bleibt oben sichtbar. Am Griff
     (bzw. der Titelzeile) lässt sich das Sheet nach oben/unten ziehen. */
  .mg-results {
    left: 0; right: 0; top: auto; bottom: 0; width: auto; max-width: none;
    height: min(54vh, 480px);
    border-radius: 18px 18px 0 0;
    padding-bottom: var(--safe-bottom);
    animation: mgpop .3s cubic-bezier(.2,.8,.2,1) both;
    transition: height .22s ease;
  }
  .mg-results-grip {
    display: flex; align-items: center; justify-content: center; flex: none;
    padding: 9px 0 5px; cursor: grab; touch-action: none;
  }
  .mg-results-grip span {
    width: 40px; height: 4px; border-radius: 4px; background: #dfe2e5;
  }
  .mg-results-grip, .mg-results-head-row, .mg-results-sub {
    touch-action: none; -webkit-user-select: none; user-select: none;
  }
  .mg-results-head { padding: 0 16px 10px; }
  body.mg-results-open .mg-actionbar { display: none; }
  body.mg-results-open .mg-people-panel { display: none; }
  .mg-shop { min-height: 56px; }

  /* Filterzeilen verstecken sich hinter dem Filter-Icon im Kopf des Sheets
     und verschwinden nach der Auswahl automatisch wieder (spart Platz). */
  .mg-filtertoggle {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 30px; border: none; border-radius: 9px;
    background: #f1f2f4; color: var(--label); cursor: pointer;
  }
  .mg-filtertoggle.is-open { background: var(--ink); color: #fff; }
  .mg-filtertoggle-dot {
    position: absolute; top: -3px; right: -3px; width: 10px; height: 10px;
    border-radius: 50%; background: var(--green); border: 2px solid #fff;
  }
  .mg-results:not(.is-filters-open) .mg-filterbar { display: none; }

  /* Stage-Panels als Bottom-Sheet */
  .mg-stage, .mg-stage.is-final {
    left: 0; right: 0; top: auto; bottom: 0; width: auto; max-width: none;
    max-height: min(62vh, 560px);
    border-radius: 18px 18px 0 0;
    padding: 14px 16px calc(14px + var(--safe-bottom));
  }
  /* Vergrößertes Terminvoting: fast Vollbild-Sheet. left/right/width müssen
     die Desktop-Zentrierung (left:50% + translateX) explizit überschreiben,
     sonst hängt das Sheet mit transform:none in der rechten Bildschirmhälfte.
     Die Terminliste darf nicht auf 0 zusammenschrumpfen (flex:1/min-height:0
     der Grundregel) – das Sheet selbst scrollt. */
  .mg-stage.is-expanded {
    transform: none;
    left: 0; right: 0; top: auto; bottom: 0; width: auto;
    max-height: calc(100vh - 52px);
    padding: 14px 16px calc(14px + var(--safe-bottom));
  }
  /* Terminfindung auf dem Handy: fast Vollbild-Sheet für alle Phasen. Die
     Desktop-Zentrierung (left:50% + translateX) muss explizit zurück. */
  body.mg-kind-termin #stagePanel {
    transform: none;
    left: 0; right: 0; top: auto; bottom: 0; width: auto;
    max-height: calc(100vh - 44px);
    border-radius: 18px 18px 0 0;
    padding: 16px 16px calc(16px + var(--safe-bottom));
  }
  body.mg-kind-termin #stagePanel.is-setup > .mg-stage-head > .mg-stage-share,
  body.mg-kind-termin #stagePanel.is-setup > .mg-stage-head > .mg-stage-headbtns { top: 14px; right: 14px; }
  .mg-final-grid { grid-template-columns: 1fr; }
  .mg-poll-fab { left: 12px; bottom: calc(140px + var(--safe-bottom)); }
  .mg-poll-corner { min-width: 88px; }
  .mg-poll-person { min-width: 104px; }
  .mg-poll-best { gap: 11px; padding: 13px; }
  .mg-poll-best-cta { padding: 9px 12px; }

  /* Chat als Vollbild-Sheet, FAB über den Bottom-Sheets */
  .mg-chat-fab { right: 12px; bottom: calc(12px + var(--safe-bottom)); z-index: 700; }
  body.mg-results-open .mg-chat-fab,
  body.mg-stage-open .mg-chat-fab { bottom: auto; top: calc(66px + var(--safe-top)); width: 44px; height: 44px; }
  .mg-chat-panel {
    right: 0; left: 0; bottom: 0; width: auto;
    height: min(78vh, 560px); border-radius: 18px 18px 0 0; z-index: 710;
  }
  .mg-poll-opts { flex-direction: column; gap: 10px; }
  .mg-det-photos img { height: 84px; }

  /* Modals: nie höher als der Screen, immer scrollbar */
  .mg-overlay { padding: 10px; }
  .mg-modal { max-height: calc(100vh - 40px); overflow-y: auto; }
  .mg-modal-add, .mg-modal-auth, .mg-modal-settings, .mg-modal-forgot, .mg-modal-reset,
  .mg-modal-admin, .mg-modal-access, .mg-modal-cat, .mg-modal-radius, .mg-modal-booking,
  .mg-modal-confirmed, .mg-modal-poll, .mg-modal-create, .mg-modal-history,
  .mg-modal-wish, .mg-modal-delete, .mg-modal-confirm2, .mg-modal-join,
  .mg-modal-block, .mg-modal-report { width: min(440px, 100%); padding: 20px 18px 18px; }
  .mg-cat-grid { grid-template-columns: 1fr; }
  .mg-cat { min-height: 56px; }
  .mg-input { min-height: 44px; font-size: 16px; }   /* 16px verhindert iOS-Zoom */
  .mg-submit { min-height: 48px; }
  .mg-vopt { min-height: 40px; }
  .mg-toast { bottom: calc(96px + var(--safe-bottom)); }
  .leaflet-control-zoom { display: none; }           /* Pinch-Zoom reicht auf Touch */
}

/* schmale Phones (≤ 380px): noch etwas kompakter */
@media (max-width: 380px) {
  .mg-people-head { padding: 12px 10px 10px 12px; }
  .mg-btn-share span { display: none; }
  .mg-stage-adminbtn { font-size: 11px; }
}

/* ---------------------------------------------------------------------------
   No-JS / crawler content (index.html <noscript>) and advertising slots.
   The site is ad-free by default; these styles only apply once the operator
   enables ads in the admin console (see ADS.md).
--------------------------------------------------------------------------- */
/* Visible landing/info section on the start page. Sits below the app viewport
   (margin-top: 100vh) and slides OVER the fixed map UI when scrolling (z-index
   above the map/demo/home layers at 500–700, below overlays/modals at 900+).
   app.js hides it while a WannaMeet session is open. */
.mg-landing {
  position: relative;
  z-index: 800;
  margin-top: 100vh;
  background: #fff;
  border-top: 1px solid var(--line-2);
  box-shadow: 0 -18px 44px rgba(20, 22, 26, .12);
  padding: 8px 0 44px;
}
.mg-seo {
  max-width: 640px;
  margin: 40px auto;
  padding: 0 22px;
  line-height: 1.55;
  color: var(--ink-2);
}
.mg-seo h1 {
  font-family: 'Bricolage Grotesque', Georgia, serif;
  color: var(--ink);
  font-size: 30px;
  margin: 0 0 12px;
}
.mg-seo h2 { font-size: 19px; margin: 26px 0 8px; }
.mg-seo h3 { font-size: 15px; margin: 18px 0 4px; }

/* An advertising slot. Always carries a small, legally-required label. */
.mg-ad {
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: #fbfbfc;
  padding: 10px 12px 12px;
  overflow: hidden;
}
.mg-ad-label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.mg-ad-body { min-height: 24px; }
.mg-ad-body :where(img, iframe, ins) { max-width: 100%; height: auto; }

/* Placement 1: interstitial while "Let's meet." loads the places. */
.mg-searching-ad { margin-top: 20px; width: 100%; max-width: 340px; }
/* Placement 2: on the final "the meeting is set" card everyone sees. */
.mg-final-ad { margin-top: 6px; }

/* ---------------------------------------------------------------------------
   iOS-App-Store-Prompt (nur mobiler Browser auf iPhone/iPad – Markup + Logik in
   index.html: #iosAppBanner). Dezenter Banner am oberen Rand im Stil des Apple
   „Smart App Banner" mit Direktlink in den App Store. Wird im nativen Shell und
   in der installierten PWA per JS gar nicht erst eingeblendet.
--------------------------------------------------------------------------- */
.mg-appbanner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1500;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  padding-top: calc(10px + var(--safe-top));
  padding-left: calc(14px + var(--safe-left));
  padding-right: calc(14px + var(--safe-right));
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--line-2);
  box-shadow: 0 6px 24px rgba(20, 22, 26, 0.10);
  transform: translateY(-100%);
  transition: transform .32s cubic-bezier(.22, .61, .36, 1);
  font-family: 'Instrument Sans', system-ui, sans-serif;
}
.mg-appbanner.is-visible { transform: translateY(0); }

.mg-appbanner__close {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  padding: 0;
  border: 0; border-radius: 50%;
  background: var(--chip); color: var(--label);
  font-size: 18px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.mg-appbanner__close:hover { background: var(--line-2); color: var(--ink); }

.mg-appbanner__icon {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(20, 22, 26, .18);
}

.mg-appbanner__text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex; flex-direction: column;
  line-height: 1.25;
}
.mg-appbanner__title { font-size: 15px; font-weight: 600; color: var(--ink); }
.mg-appbanner__sub {
  font-size: 12.5px; color: var(--label);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.mg-appbanner__cta {
  flex: 0 0 auto;
  background: var(--green); color: #fff !important;
  font-size: 14px; font-weight: 600;
  padding: 8px 16px; border-radius: 999px;
  white-space: nowrap;
}
.mg-appbanner__cta:hover { background: var(--green-d); color: #fff !important; }

/* ============================ Stammtisch ============================
   Wiederkehrender, durchgeplanter Abend über mehrere Stationen: Planer-
   Modal, gedockte Zeitleiste mit Zählern, Karten-Marker (Revier + Stopps)
   und die transparente Fahrweg-Gewichtung fürs Glücksrad. */

/* --- Planer-Modal --- */
.mg-modal-stamm { padding: 26px; width: min(560px, 94vw); max-height: 90vh; overflow-y: auto; }
.mg-stamm-stops-head { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
.mg-stamm-stops { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }

.mg-stamp-stop {
  display: flex; gap: 10px; align-items: flex-start;
  border: 1.5px solid var(--line-2); border-radius: 14px; padding: 10px 10px 12px; background: #fbfcfc;
}
.mg-stamp-num {
  flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #fff;
  font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; margin-top: 3px;
}
.mg-stamp-fields { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mg-stamp-line { display: flex; gap: 8px; align-items: center; }
.mg-stamp-cat { flex: none; width: 118px; }
.mg-stamp-times { display: flex; align-items: center; gap: 6px; flex: 1; }
.mg-stamp-time { padding: 8px; width: auto; flex: 1; min-width: 0; }
.mg-stamp-dash { color: var(--muted); }
.mg-stamp-note { width: 100%; font-size: 13px; min-width: 0; }
.mg-stamp-acts { display: flex; flex-direction: column; gap: 4px; }

/* Ort einer Station: „wählen"-Button (leer) bzw. gewählte Venue-Karte. */
.mg-stamp-choose {
  display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%;
  padding: 10px; border: 1.5px dashed #d8c4a4; background: #fdfbf6; border-radius: 11px;
  color: #946B2D; font: 600 13px 'Instrument Sans', sans-serif; cursor: pointer;
}
.mg-stamp-choose:hover { border-color: #946B2D; background: #f8f1e3; }
.mg-stamp-venue {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 10px; border: 1.5px solid var(--line-2); border-radius: 11px; background: #fff;
}
.mg-stamp-venue-info { flex: 1; min-width: 0; }
.mg-stamp-venue-info b { display: block; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-stamp-venue-info small { display: block; font-size: 11.5px; color: var(--label); }
.mg-star { color: #b8860b; font-weight: 700; white-space: nowrap; }
.mg-star-count { color: var(--muted); font-weight: 500; }

.mg-icon-btn {
  width: 30px; height: 30px; border: 1.5px solid var(--line-2); background: #fff; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink-2);
}
.mg-icon-btn:hover { border-color: var(--green); color: var(--green); }
.mg-icon-btn:disabled { opacity: .4; cursor: default; }
.mg-icon-btn.is-danger:hover { border-color: #c2603d; color: #c2603d; }

.mg-mini-btn {
  display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--line-2); background: #fff;
  border-radius: 9px; padding: 7px 10px; font: 600 12.5px 'Instrument Sans', sans-serif; color: var(--ink-2); cursor: pointer;
}
.mg-mini-btn:hover { border-color: var(--green); color: var(--green); }

.mg-add-stop {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 10px;
  padding: 10px; border: 1.5px dashed var(--line-2); background: #fff; border-radius: 12px;
  color: var(--ink-2); font: 600 13.5px 'Instrument Sans', sans-serif; cursor: pointer;
}
.mg-add-stop:hover { border-color: var(--green); color: var(--green); }

.mg-check { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; cursor: pointer; }
.mg-check input { margin-top: 3px; flex: none; }
.mg-check b { display: block; font-size: 14px; }
.mg-check small { display: block; color: var(--label); font-size: 12.5px; margin-top: 2px; }
.mg-stamm-fair { border: 1.5px solid var(--line-2); border-radius: 12px; padding: 12px; }

.mg-modal-actions { display: flex; gap: 10px; margin-top: 18px; }
.mg-ghost-btn {
  flex: none; padding: 13px 18px; border: 1.5px solid var(--line-2); background: #fff; border-radius: 13px;
  cursor: pointer; font: 600 14px 'Instrument Sans', sans-serif; color: var(--ink-2);
}
.mg-ghost-btn:hover { border-color: var(--muted); }

/* Planer-Footer: Abbrechen + Plan speichern gleich groß, „Termin planen"
   daneben als hervorgehobener Weiter-Button. */
.mg-stamm-foot { align-items: stretch; flex-wrap: wrap; }
.mg-stamm-foot .mg-ghost-btn { flex: 1 1 120px; padding: 13px 12px; text-align: center; }
.mg-stamm-foot .mg-submit { flex: 1.4 1 150px; margin-top: 0; }

/* --- Gedockte Zeitleiste (Panel) --- */
.mg-stamm-panel {
  position: fixed; left: 18px; bottom: calc(24px + var(--safe-bottom)); z-index: 600;
  width: min(360px, calc(100vw - 36px)); max-height: min(66vh, 600px);
  display: flex; flex-direction: column; background: #fff; border-radius: 18px; padding: 16px 16px 14px;
  box-shadow: 0 14px 44px rgba(20,22,26,.18); animation: mgpop .3s cubic-bezier(.2,.8,.2,1) both;
}
.mg-stamm-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mg-stamm-zone { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 15px; color: var(--ink); min-width: 0; }
.mg-stamm-zone span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-stamm-zone svg { color: #946B2D; flex: none; }
.mg-stamm-count { flex: none; font: 600 12px 'Instrument Sans', sans-serif; color: #946B2D; background: #f5efe3; border-radius: 20px; padding: 4px 10px; }
.mg-stamm-meta { font-size: 12.5px; color: var(--label); margin-top: 4px; }
.mg-stamm-scroll { overflow-y: auto; margin-top: 12px; }

.mg-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.mg-timeline-item { display: flex; gap: 12px; padding-bottom: 14px; position: relative; }
.mg-timeline-item:not(:last-child)::before { content: ''; position: absolute; left: 13px; top: 28px; bottom: 0; width: 2px; background: var(--line-2); }
.mg-timeline-num { flex: none; width: 28px; height: 28px; border-radius: 50%; color: #fff; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; z-index: 1; box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.mg-timeline-body { flex: 1; min-width: 0; padding-top: 2px; }
.mg-timeline-time { font: 700 12px 'Instrument Sans', sans-serif; color: var(--ink-2); }
.mg-timeline-title { font-weight: 600; font-size: 14px; word-break: break-word; }
.mg-timeline-tbd { color: var(--muted); font-weight: 500; font-style: italic; }
.mg-timeline-sub { font-size: 12.5px; color: var(--label); }
.mg-stamp-empty { font-size: 13.5px; color: var(--label); padding: 8px 0; line-height: 1.5; }

.mg-stamm-history { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 10px; }
.mg-stamm-history-title { font: 700 11px 'Instrument Sans', sans-serif; color: var(--label); text-transform: uppercase; letter-spacing: .03em; }
.mg-stamm-history ul { list-style: none; margin: 6px 0 0; padding: 0; }
.mg-stamm-history li { font-size: 12.5px; color: var(--ink-2); padding: 3px 0; }

.mg-stamm-actions { display: flex; gap: 8px; margin-top: 14px; }
.mg-stamm-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 11px;
  border: 1.5px solid var(--line-2); background: #fff; border-radius: 12px;
  font: 600 13.5px 'Instrument Sans', sans-serif; color: var(--ink-2); cursor: pointer; text-align: center;
}
.mg-stamm-btn:hover { border-color: var(--green); color: var(--green); }
.mg-stamm-btn.is-primary { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: 0 8px 20px rgba(20,22,26,.18); }
.mg-stamm-btn.is-primary:hover { background: var(--ink-2); color: #fff; }

/* --- Karte: Revier-Label + nummerierte Stopp-Pins --- */
.mg-zone-label {
  transform: translate(-50%, -50%); background: #946B2D; color: #fff; font: 700 11px 'Instrument Sans', sans-serif;
  padding: 3px 10px; border-radius: 20px; box-shadow: 0 3px 10px rgba(0,0,0,.22); white-space: nowrap; opacity: .94;
}
.mg-stop-pin { position: relative; width: 34px; height: 44px; }
.mg-stop-pin::before {
  content: ''; position: absolute; left: 50%; top: 1px; width: 30px; height: 30px;
  background: var(--c); border: 2.5px solid #fff; box-shadow: 0 4px 9px rgba(0,0,0,.3);
  border-radius: 50% 50% 50% 0; transform: translateX(-50%) rotate(-45deg);
}
.mg-stop-pin span { position: absolute; left: 0; right: 0; top: 7px; text-align: center; color: #fff; font: 700 14px 'Instrument Sans', sans-serif; z-index: 1; }
.mg-stop-popup b { font-size: 14px; }
.mg-stop-popup-time { font-weight: 700; font-size: 12px; color: #333; margin-top: 2px; }
.mg-stop-popup-cat, .mg-stop-popup-addr { font-size: 12px; color: #666; }

/* --- Faires Glücksrad: transparente Fahrweg-Gewichtung --- */
.mg-fair-note { margin-top: 4px; }
.mg-fair { border: 1.5px solid var(--line-2); border-radius: 14px; padding: 12px 14px; text-align: left; }
.mg-fair-title { font-weight: 700; font-size: 13px; margin-bottom: 8px; }
.mg-fair-list { display: flex; flex-direction: column; gap: 5px; }
.mg-fair-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.mg-fair-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.mg-fair-name { flex: 1; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-fair-dist { color: var(--label); font-size: 12px; flex: none; }
.mg-fair-slots { font: 700 12px 'Instrument Sans', sans-serif; color: #946B2D; background: #f5efe3; border-radius: 12px; padding: 2px 8px; flex: none; }
.mg-fair-hint { font-size: 12px; color: var(--label); margin-top: 8px; line-height: 1.45; }

@media (max-width: 700px) {
  .mg-modal-stamm { max-width: 100%; }
  .mg-stamp-cat { width: 96px; }
  .mg-stamm-panel {
    left: 10px; right: 10px; width: auto; top: calc(var(--safe-top) + 74px); bottom: auto;
    max-height: 42vh; padding: 12px 13px;
  }
  /* Während Termin-/Kosten-Panel als Bottom-Sheet offen ist, bleibt die
     Zeitleiste oben – sie stört das Sheet nicht. */
}

/* --- Orte-Seitenmenü (Venue-Picker) --- */
.mg-picker {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 20;
  width: min(380px, 100%); background: #fff; border-radius: 20px 0 0 20px;
  box-shadow: -14px 0 44px rgba(20,22,26,.16); display: flex; flex-direction: column;
  animation: mgSlideIn .22s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes mgSlideIn { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.mg-picker-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 18px 18px 10px; }
.mg-picker-title { font-weight: 700; font-size: 15px; }
.mg-picker-sub { font-size: 12px; color: var(--label); margin-top: 2px; }
.mg-picker-searchrow { display: flex; gap: 8px; padding: 0 18px 12px; }
.mg-picker-searchrow .mg-input { flex: 1; min-width: 0; }
.mg-picker-searchrow .mg-mini-btn { flex: none; }
.mg-picker-list { flex: 1; overflow-y: auto; padding: 0 12px 16px; }
.mg-picker-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 11px 12px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff;
  cursor: pointer; margin-bottom: 8px; transition: border-color .15s, background .15s;
}
.mg-picker-item:hover { border-color: var(--green); background: #f7faf9; }
.mg-picker-item-main { flex: 1; min-width: 0; }
.mg-picker-item-name { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.mg-picker-item-meta { font-size: 12px; color: var(--label); margin-top: 2px; }
.mg-picker-item-rating { flex: none; font-size: 13px; }
.mg-picker-wish {
  font: 700 10.5px 'Instrument Sans', sans-serif; color: #1f6f5c; background: #e5f0ec;
  border-radius: 20px; padding: 2px 8px; white-space: nowrap;
}
.mg-picker-busy, .mg-picker-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 36px 20px; color: var(--label); font-size: 13.5px; text-align: center;
}
.mg-picker-busy { flex-direction: row; }
.mg-picker-hint {
  margin: 0 18px 10px; padding: 9px 12px; border-radius: 10px; background: #fdf3e3;
  color: #946B2D; font-size: 12.5px; line-height: 1.4; border: 1px solid #f0dfc0;
}
.mg-picker-widenrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 18px 10px; }
.mg-picker-radius { font-size: 12px; color: var(--muted); }

/* --- Ladeanzeige (Spinner-Overlay) --- */
.mg-loader {
  position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center;
  background: rgba(20,22,26,.4); backdrop-filter: blur(3px); animation: mgfade .18s ease;
}
.mg-loader-box {
  background: #fff; border-radius: 18px; padding: 24px 30px; display: flex; flex-direction: column;
  align-items: center; gap: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.3); color: var(--green);
  max-width: 80vw;
}
.mg-loader-msg { color: var(--ink); font: 600 14px 'Instrument Sans', sans-serif; text-align: center; }
.mg-spin { animation: mgSpin .8s linear infinite; }
@keyframes mgSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mg-spin { animation-duration: 2s; } }

/* --- „Wie soll euer Abend aussehen?" --- */
.mg-modal-shape { padding: 24px; width: min(440px, 94vw); max-height: 88vh; overflow-y: auto; }
.mg-shape-list { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.mg-shape-emoji { font-size: 22px; flex: none; align-self: flex-start; line-height: 1.2; }

/* --- Finale „Abend steht"-Karte: Stationen als volle Breite --- */
.mg-final-stations { grid-column: 1 / -1; text-align: left; }
.mg-final-stations .mg-timeline { margin-top: 8px; }

@media (max-width: 700px) {
  .mg-picker { width: 100%; border-radius: 20px 20px 0 0; top: auto; height: 82%; }
  .mg-modal-shape { width: 100%; }
}