/* Kantonskarte - Masse aus Figma: Titel 36px blau, Leadtext 18px/150%
   max. 640px; darunter links hellblaue Box (#E5F5FC) mit Liste in zwei
   Spalten (Pfeil blau, Name 16px), rechts Karte als blaue Kontur.
   Hover auf Liste <-> Kanton gegenseitig (Frontend.js). */

#content section.mantik-cmap,
.mantik-cmap { padding: 80px 0; margin: 0; }

.mantik-cmap__intro { max-width: 640px; margin-bottom: 48px; }
#content .mantik-cmap .mantik-cmap__title,
.mantik-cmap .mantik-cmap__title { margin: 0; font-size: 2.25rem; line-height: 1.3; font-weight: 500; color: #009fe3; }
#content .mantik-cmap .mantik-cmap__lead,
.mantik-cmap .mantik-cmap__lead { margin: 24px 0 0; font-size: 1.125rem; line-height: 1.5; color: #212529; }

.mantik-cmap__body {
  display: grid; grid-template-columns: minmax(0, 540px) minmax(0, 1fr);
  gap: 64px; align-items: center;
}

/* Liste */
.mantik-cmap__list { background: #e5f5fc; border-radius: 4px; padding: 20px 32px; }
.mantik-cmap__list ul {
  list-style: none; margin: 0; padding: 0;
  columns: 2; column-gap: 32px;
}
.mantik-cmap__list li { break-inside: avoid; margin: 0; padding: 0; }
#content .mantik-cmap .mantik-cmap__link,
.mantik-cmap .mantik-cmap__link {
  display: inline-block; padding: 1px 0;
  font-size: 1rem; line-height: 1.7; font-weight: 500; color: #212529; text-decoration: none;
}
.mantik-cmap__arrow { display: inline-block; margin-right: .3em; color: #009fe3; transition: transform .2s ease; }
#content .mantik-cmap .mantik-cmap__link:hover,
#content .mantik-cmap .mantik-cmap__link.is-active,
.mantik-cmap .mantik-cmap__link:hover,
.mantik-cmap .mantik-cmap__link.is-active { color: #009fe3; text-decoration: none; }
.mantik-cmap__link.is-active .mantik-cmap__arrow { transform: translateX(3px); }

/* Karte */
.mantik-cmap__map svg { display: block; width: 100%; height: auto; overflow: visible; }
.mantik-cmap__area polygon,
.mantik-cmap__area path {
  fill: #fff; stroke: #009fe3; stroke-width: 1; stroke-linejoin: round;
  vector-effect: non-scaling-stroke; transition: fill .15s ease;
}
.mantik-cmap__area:hover polygon, .mantik-cmap__area:hover path,
.mantik-cmap__area:focus polygon, .mantik-cmap__area:focus path,
.mantik-cmap__area.is-active polygon, .mantik-cmap__area.is-active path { fill: #b3e2f7; }
.mantik-cmap__area:focus { outline: none; }

@media (max-width: 991px) {
  #content section.mantik-cmap, .mantik-cmap { padding: 48px 0; }
  .mantik-cmap__body { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .mantik-cmap__intro { margin-bottom: 32px; }
  #content .mantik-cmap .mantik-cmap__title,
  .mantik-cmap .mantik-cmap__title { font-size: 1.75rem; }
  .mantik-cmap__map { order: -1; max-width: 480px; }
}
@media (max-width: 400px) {
  .mantik-cmap__list { padding: 16px 20px; }
  .mantik-cmap__list ul { column-gap: 16px; }
  #content .mantik-cmap .mantik-cmap__link,
  .mantik-cmap .mantik-cmap__link { font-size: .9375rem; }
}