.screen-country-map{
  position:relative;
  width:100%;
  aspect-ratio:1404.7773/600.81262;
  overflow:visible;
}
.screen-country-map svg{position:absolute;inset:0;display:block;width:100%;height:100%;border-radius:14px}
.screen-country-map svg path{fill:var(--country-fill,#cbd5e1)!important;stroke:#f8fafc!important;stroke-width:.15!important;transition:filter .12s ease}
.screen-geo-map-error{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;color:var(--dim);font-size:13px;text-align:center}

/* Nutzer-Idee 01.09.2026: Flaggen direkt auf die Landesflaeche ausgeschnitten
   statt eines kleinen Badges daneben oder grossflaechiger gruener Einfaerbung
   -- die eigentliche Flaggen-Zuweisung (--country-fill als SVG-Pattern-URL)
   passiert in screener-world-map.js, hier nur die Interaktions-Optik. */
.screen-country-map svg .has-flag-fill{cursor:pointer;outline:none}
.screen-country-map svg .has-flag-fill:hover path,
.screen-country-map svg .has-flag-fill:focus-visible path{filter:brightness(1.06) drop-shadow(0 1px 2px rgba(15,23,42,.35))}

/* Länder-Flaggen wie in den übrigen Research-Tabellen. */
.etf-holding-country{display:inline-flex;align-items:center;gap:7px;min-width:0}
.etf-holding-country-flag{display:inline-grid;width:24px;height:18px;flex:0 0 24px;place-items:center;border-radius:3px;background:#f8fafc;box-shadow:0 0 0 1px rgba(15,23,42,.08);font-size:16px;line-height:1;overflow:hidden}
.etf-holding-country-flag img{display:block;width:100%;height:100%;object-fit:contain}

@media(max-width:620px){
  .screen-country-map{min-height:220px;aspect-ratio:auto}
}