/**
 * Stadtteile-Raster – Widget + Legacy-Shortcode (.mxcp-template)
 */

.mxcp-funnel-widget--districts-grid .mxcp-districts,
.mxcp-template .mxcp-districts {
  width: 100%;
}

.mxcp-funnel-widget--districts-grid .mxcp-districts__grid,
.mxcp-template .mxcp-districts__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

@media (min-width: 640px) {
  .mxcp-funnel-widget--districts-grid .mxcp-districts__grid,
  .mxcp-template .mxcp-districts__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.mxcp-funnel-widget--districts-grid .mxcp-districts__item,
.mxcp-template .mxcp-districts__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--mxcp-line, #ece7dc);
  border-radius: 16px;
  background: #fff;
  color: var(--mxcp-ink, #0b1220);
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.mxcp-funnel-widget--districts-grid .mxcp-districts__item:hover,
.mxcp-template .mxcp-districts__item:hover {
  border-color: rgba(234, 91, 26, 0.3);
  background: var(--mxcp-accent-so, #ffedd9);
}

.mxcp-funnel-widget--districts-grid .mxcp-districts__label,
.mxcp-template .mxcp-districts__label {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
}

.mxcp-funnel-widget--districts-grid .mxcp-districts__arrow,
.mxcp-template .mxcp-districts__arrow {
  flex-shrink: 0;
  color: var(--mxcp-muted, #64748b);
  transition: color 0.15s ease;
}

.mxcp-funnel-widget--districts-grid .mxcp-districts__item:hover .mxcp-districts__arrow,
.mxcp-template .mxcp-districts__item:hover .mxcp-districts__arrow {
  color: var(--mxcp-accent, #ea5b1a);
}

.mxcp-funnel-widget--districts-grid .mxcp-districts__item--all,
.mxcp-template .mxcp-districts__item--all {
  border: 2px dashed rgba(234, 91, 26, 0.4);
  background: rgba(255, 237, 217, 0.4);
}

.mxcp-funnel-widget--districts-grid .mxcp-districts__item--all:hover,
.mxcp-template .mxcp-districts__item--all:hover {
  background: var(--mxcp-accent-so, #ffedd9);
  border-color: rgba(234, 91, 26, 0.55);
}

.mxcp-funnel-widget--districts-grid .mxcp-districts__label--all,
.mxcp-template .mxcp-districts__label--all {
  font-weight: 600;
  color: var(--mxcp-accent-hi, #c84a0e);
}

.mxcp-funnel-widget--districts-grid .mxcp-districts__item--all .mxcp-districts__arrow,
.mxcp-template .mxcp-districts__item--all .mxcp-districts__arrow {
  color: var(--mxcp-accent, #ea5b1a);
}